@import url(
    'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap'
);


/* ========================================
   RESET
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    background: #ffffff;
    color: #000000;

    font-family: "Inter", sans-serif;
    font-weight: 300;
}


/* ========================================
   HEADER
======================================== */

.header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 90px;

    padding: 0 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 1000;

    pointer-events: none;
}

.logo {
    position: fixed;

    top: 35px;
    left: 45px;

    color: #000000;
    text-decoration: none;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;

    z-index: 1100;

    pointer-events: auto;
}

/* ========================================
   MENU BUTTON
======================================== */

.menu-button {
    position: absolute;

    top: 19px;
    right: 45px;

    width: 52px;
    height: 52px;

    border: none;
    background: #000000;

    cursor: pointer;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    z-index: 1100;

    pointer-events: auto;
}


.menu-button span {

    display: block;

    width: 20px;
    height: 1px;

    background: #ffffff;

    transition:
        transform 0.4s ease,
        width 0.4s ease;

}


/* ========================================
   MENU BUTTON — OPEN
======================================== */

.menu-button.active span:first-child {

    transform: translateY(4px) rotate(45deg);

}


.menu-button.active span:last-child {

    transform: translateY(-4px) rotate(-45deg);

}


/* ========================================
   MENU OVERLAY
======================================== */

.menu-overlay {

    position: fixed;

    inset: 0;

    background: #ffffff;

    z-index: 900;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;

}


.menu-overlay.active {

    opacity: 1;

    visibility: visible;

}


/* ========================================
   MENU CONTENT
======================================== */

.menu-content {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


.main-navigation {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

}


.main-navigation a {

    position: relative;

    color: #000000;

    text-decoration: none;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(38px, 5vw, 70px);

    line-height: 1;

    font-weight: 500;

    transition: opacity 0.3s ease;

}


.main-navigation a:hover {

    opacity: 0.35;

}


/* ========================================
   HERO
======================================== */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 80px;

    padding: 100px 8% 60px;

}


.hero-image {

    width: 42vw;

    max-width: 600px;

}


.image-placeholder {

    aspect-ratio: 3 / 4;

    background: #eeeeee;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #999999;

    letter-spacing: 0.15em;

}


.hero-content {

    max-width: 600px;

}


.hero h1 {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(60px, 7vw, 120px);

    line-height: 0.85;

    font-weight: 500;

    letter-spacing: -0.04em;

}


.hero p {

    margin-top: 35px;

    font-size: 16px;

    letter-spacing: 0.05em;

}


/* ========================================
   INTRO
======================================== */

.intro {

    padding: 140px 12%;

    border-top: 1px solid #000000;

}


.intro-text {

    max-width: 1100px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(35px, 4vw, 64px);

    line-height: 1.05;

    font-weight: 500;

}


/* ========================================
   PAGES
======================================== */

.page {

    max-width: 1400px;

    margin: 0 auto;

    padding: 150px 7% 100px;

}


.page-header {

    border-bottom: 1px solid #000000;

    padding-bottom: 25px;

    margin-bottom: 100px;

}


.page-header h1 {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(50px, 7vw, 100px);

    line-height: 0.9;

    font-weight: 500;

}


/* ========================================
   BIOGRAPHY
======================================== */

.biography-intro {

    max-width: 1000px;

    margin-left: auto;

    margin-bottom: 120px;

}


.biography-intro p {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(30px, 3vw, 48px);

    line-height: 1.1;

    margin-bottom: 35px;

}


.biography-text {

    max-width: 800px;

    margin-left: 15%;

}


.biography-text p,
.content-text p {

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 35px;

}


/* ========================================
   NUMBERS
======================================== */

.large-number {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(150px, 20vw, 300px);

    line-height: 0.7;

    font-weight: 500;

}


.large-number-caption {

    font-size: 18px;

    line-height: 1.5;

    margin-top: 50px;

    margin-bottom: 100px;

}


/* ========================================
   MEDIA
======================================== */

.media-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 50px;

}


.media-placeholder {

    aspect-ratio: 16 / 10;

    background: #eeeeee;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #999999;

    letter-spacing: 0.1em;

}


/* ========================================
   FOOTER
======================================== */

.footer {

    border-top: 1px solid #000000;

    padding: 50px;

    display: flex;

    justify-content: space-between;

    font-size: 12px;

    letter-spacing: 0.05em;

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 900px) {


    .header {

        height: 75px;

        padding: 0 20px;

    }


    .menu-button {

        width: 45px;
        height: 45px;

    }


    .main-navigation {

        gap: 15px;

        align-items: flex-start;

        padding: 30px;

    }


    .main-navigation a {

        font-size: 42px;

    }


    .hero {

        flex-direction: column;

        align-items: flex-start;

        padding: 100px 20px 50px;

    }


    .hero-image {

        width: 100%;

    }


    .hero h1 {

        font-size: 70px;

    }


    .intro {

        padding: 80px 20px;

    }


    .page {

        padding: 120px 20px 70px;

    }


    .page-header {

        margin-bottom: 60px;

    }


    .page-header h1 {

        font-size: 52px;

    }


    .biography-text {

        margin-left: 0;

    }


    .media-grid {

        grid-template-columns: 1fr;

    }


    .footer {

        flex-direction: column;

        gap: 15px;

        padding: 30px 20px;

    }
    .teaching-video-list {
        grid-template-columns: 1fr;
    }

    .student-video video {
        max-width: 100%;
    }



}

/* ========================================
   BIOGRAPHY
======================================== */

.biography-photo {

    max-width: 900px;

    margin: 0 auto 120px;

}


.biography-photo .image-placeholder {

    aspect-ratio: 16 / 9;

}


.biography-section {

    margin-top: 150px;

}


.biography-section h2,
.teaching-philosophy h2,
.students-achievements h2,
.students-video h2,
.media-section h2,
.concert-section h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: 42px;

    font-weight: 500;

    margin-bottom: 60px;

}


.biography-final {

    max-width: 900px;

    margin: 150px auto 0;

    padding-top: 70px;

    border-top: 1px solid #000000;

}


.biography-final p {

    font-family: "Cormorant Garamond", serif;

    font-size: 42px;

    line-height: 1.15;

    margin-bottom: 40px;

}


/* ========================================
   TEACHING
======================================== */

.teaching-stat {

    margin-bottom: 120px;

}


.teaching-intro {

    max-width: 850px;

    margin-left: 15%;

    margin-bottom: 150px;

}


.teaching-philosophy {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    padding-top: 80px;

    border-top: 1px solid #000000;

}


.achievement-list {

    border-top: 1px solid #000000;

}


.achievement-item {

    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 30px;

    padding: 25px 0;

    border-bottom: 1px solid #dddddd;

}


.achievement-item span {

    color: #777777;

}


.achievement-item p {

    font-family: "Cormorant Garamond", serif;

    font-size: 28px;

}


.students-achievements,
.students-video {

    margin-top: 150px;

}


/* ========================================
   VIDEO
======================================== */

.video-card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 28px;

    font-weight: 500;

    margin-top: 20px;

}


.video-card p {

    margin-top: 8px;

    color: #777777;

}


/* ========================================
   MEDIA
======================================== */

.media-section {

    margin-bottom: 150px;

}


.audio-list {

    border-top: 1px solid #000000;

}


.audio-item {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 30px 0;

    border-bottom: 1px solid #dddddd;

}


.audio-play {

    width: 45px;
    height: 45px;

    border: 1px solid #000000;

    background: white;

    cursor: pointer;

}


.audio-item h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 27px;

    font-weight: 500;

}


.audio-item p {

    margin-top: 5px;

    color: #777777;

}


    .photo-grid {
        display: grid;
        grid-template-columns: repeat(2, 320px);
        gap: 25px;

        justify-content: center;
    }

    .photo-item {
        width: 320px;
        height: 260px;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;
    }

    .photo-item img {
        display: block;

        max-width: 100%;
        max-height: 100%;

        width: auto;
        height: auto;

        object-fit: contain;
    }


/* ========================================
   CONCERTS
======================================== */

.concert-section {

    margin-bottom: 150px;

}


.concert-list {

    border-top: 1px solid #000000;

}


.concert {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 50px;

    padding: 45px 0;

    border-bottom: 1px solid #dddddd;

}


.concert-date {

    font-family: "Cormorant Garamond", serif;

    font-size: 35px;

}


.concert-info h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 35px;

    font-weight: 500;

}


.concert-info p {

    margin-top: 10px;

    color: #666666;

}


/* ========================================
   ACHIEVEMENTS
======================================== */

.achievements-intro {

    max-width: 800px;

    margin: 0 auto 120px;

}


.achievements-intro p {

    font-family: "Cormorant Garamond", serif;

    font-size: 40px;

    line-height: 1.15;

}


.awards-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 80px 30px;

}


.award-image {

    aspect-ratio: 4 / 3;

    background: #eeeeee;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #999999;

}


.award-info {

    margin-top: 25px;

}


.award-info h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: 35px;

    font-weight: 500;

}


.award-info p {

    max-width: 500px;

    line-height: 1.6;

    margin-top: 10px;

}


/* ========================================
   PRESS
======================================== */

.press-feature {

    max-width: 1000px;

    margin: 0 auto 150px;

    text-align: center;

}


.press-feature blockquote {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(40px, 5vw, 70px);

    line-height: 1.05;

}


.press-feature p {

    margin-top: 30px;

    color: #777777;

}


.press-list {

    border-top: 1px solid #000000;

}


.press-item {

    padding: 50px 0;

    border-bottom: 1px solid #dddddd;

}


.press-item span {

    font-size: 11px;

    letter-spacing: 0.15em;

}


.press-item h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: 45px;

    font-weight: 500;

    margin-top: 20px;

}


.press-item p {

    margin-top: 10px;

    color: #666666;

}


.text-link {

    display: inline-block;

    margin-top: 25px;

    color: #000000;

    text-decoration: none;

    border-bottom: 1px solid #000000;

    padding-bottom: 4px;

}


/* ========================================
   CONTACTS
======================================== */

.contacts-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

}


.contacts-main h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(60px, 7vw, 110px);

    line-height: 0.85;

    font-weight: 500;

}


.contacts-main p {

    margin-top: 40px;

}


.contact-block {

    padding: 30px 0;

    border-top: 1px solid #000000;

}


.contact-block span {

    display: block;

    font-size: 11px;

    letter-spacing: 0.15em;

    margin-bottom: 15px;

}


.contact-block a {

    color: #000000;

    text-decoration: none;

    font-size: 18px;

}


.contact-block p {

    max-width: 400px;

    line-height: 1.7;

}


.social-links {

    display: flex;

    gap: 25px;

}


.social-links a {

    font-family: "Cormorant Garamond", serif;

    font-size: 25px;

}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 900px) {


    .teaching-philosophy {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .teaching-intro {

        margin-left: 0;

    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

    .photo-item {
        width: 280px;
        height: 180px;
        margin: 0 auto;
    }

    .awards-grid {

        grid-template-columns: 1fr;

    }


    .concert {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .contacts-layout {

        grid-template-columns: 1fr;

        gap: 80px;

    }


    .biography-final p {

        font-size: 32px;

    }

}

@media (max-width: 900px) {

    .logo {
        top: 25px;
        left: 20px;
    }

    .header {
        height: 75px;
        padding: 0 20px;
    }

    .menu-button {
        width: 45px;
        height: 45px;
    }

}

@media (max-width: 900px) {

    .logo {
        position: fixed;

        top: 25px;
        left: 20px;
    }

    .menu-button {
        position: absolute;

        top: 15px;
        right: 20px;
    }

}

/* ========================================
   HEADER POSITIONING
======================================== */

/* Имя находится на странице и прокручивается */
.logo {
    position: absolute !important;

    top: 35px !important;
    left: 45px !important;

    color: #000000;
    text-decoration: none;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;

    z-index: 2000;
}


/* Кнопка меню всегда находится в углу экрана */
.menu-button {
    position: fixed !important;

    top: 19px !important;
    right: 45px !important;

    width: 52px;
    height: 52px;

    border: none;
    background: #000000;

    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    z-index: 2000;
}


/* Мобильная версия */
@media (max-width: 900px) {

    .logo {
        position: absolute !important;

        top: 25px !important;
        left: 20px !important;
    }

    .menu-button {
        position: fixed !important;

        top: 15px !important;
        right: 20px !important;

        width: 45px;
        height: 45px;
    .photo-grid {
    grid-template-columns: 1fr;
    }

    }

}

.hero-image {
    width: 30vw;
    max-width: 500px;
    overflow: hidden;
}

.hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

.biography-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.teaching-video {
    max-width: 900px;
    margin: 100px auto;
}

.teaching-video h2 {
    margin-bottom: 30px;
}

.video-container {
    width: 100%;
}

.video-container video {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   ВИДЕО УЧАЩИХСЯ
======================================== */

.teaching-video {
    max-width: 1000px;
    margin: 100px auto;
}

.teaching-video h2 {
    margin-bottom: 40px;
}

.teaching-video-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.student-video {
    width: 100%;
}

.student-video video {
    display: block;

    width: 100%;
    max-width: 450px;

    height: auto;

    margin: 0 auto;
}

.student-video h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.student-video p {
    margin: 0;
}
.student-video iframe {
    display: block !important;
    width: 640px !important;
    height: 360px !important;
    max-width: 100%;
    border: 0 !important;
}
.video-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    overflow: hidden;
}

.video-wrapper iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: none;
}