@font-face {
    font-family: 'Jun';           /* Имя, которое будете использовать */
    src: url('/fonts/Jun_Regular.otf') format('opentype');
    font-style: normal;
    font-display: swap;              /* чтобы текст был виден до загрузки шрифта */
}

:root {
    --accent: #cf123e;
    --white: #fff;
    --ink: #282828;
    font-family: "Jun", Times, serif;
    color: var(--white);
    background: #000;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0
}

a {
    color: inherit;
    text-decoration: none
}

button, input, textarea {
    font: inherit
}

button, a, input, textarea {
    -webkit-tap-highlight-color: transparent
}

a:focus-visible, button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 5px
}

input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px
}

.icon-definitions, .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%)
}

.skip-link {
    position: fixed;
    left: 15px;
    top: -70px;
    padding: 12px;
    background: var(--accent);
    z-index: 10
}

.skip-link:focus {
    top: 10px
}

.site-header {
    background: var(--accent);
    height: 5.2vw;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header nav {
    width: 70%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;

    gap: 20px;
    text-transform: uppercase;
    font-size: 1.6vw
}

.site-header a {
    padding-left: 2%;
    padding-right: 2%;
    white-space: nowrap
}

.site-header a:hover {
    opacity: .75
}

.site-header nav a[aria-current="page"] {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: max(5px, .8vw)
}

.nav-name {
    font-size: 2.9vw
}

.header-socials, .header-name, .menu-toggle {
    display: none
}

.site-header .header-socials {
    display: none;
}

.photo-section {
    position: relative;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    scroll-margin-top: 12px
}

.hero {
    height: 51.05vw;
    background-image: url('images/page_1_1.webp')
}

.hero-brand {
    position: absolute;
    left: 5.8%;
    top: 14.5%;
    width: 38%;
    text-align: center
}

.hero-brand img {
    display: block;
    width: 76%;
    height: 29.5vw;
    margin: 0 auto
}

.hero h1 {
    margin: 1.3vw 0 0;
    font-size: 4.6vw;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap
}

.socials {
    display: flex;
    gap: .8vw
}

.socials a {
    width: 2.65vw;
    height: 2.65vw;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    transition: transform .2s, background .2s
}

.socials a:hover {
    transform: translateY(-3px);
    background: #ee2455
}

.socials svg {
    width: 77%;
    height: 77%;
    fill: currentColor
}

.hero-socials {
    position: absolute;
    left: 5.8%;
    top: 6%
}

.about {
    min-height: 56.25vw;
    background-image: url('images/page_1_2.webp');
    color: var(--ink);
    padding: 3.3vw 4.3% 3.7vw 36%
}

.about-copy {
    text-align: right
}

.about blockquote {
    margin: 0 -1vw 1.7vw -1vw;
    text-align: center;
    font-size: 2.65vw;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.05;
    font-weight: 600;
    white-space: nowrap
}

.about cite {
    display: block;
    font-weight: 400;
    font-style: normal;
    font-variant: small-caps;
    text-transform: none;
    letter-spacing: .03em;
    font-size: 2.9vw
}

.about h2 {
    font-weight: 400;
    color: var(--accent);
    text-align: center;
    font-size: 4.8vw;
    text-transform: uppercase;
    margin: 0 0 2.5vw
}

.about p {
    font-size: 2.3vw;
    line-height: 1.14;
    margin: 0 0 2.6vw
}

.about p:last-child {
    margin-bottom: 0
}

.biography {
    min-height: 56.25vw;
    background-image: url('images/page_1_3.webp');
    padding: 3vw 4% 2.1vw;
    color: #d0d0d0
}

.biography p {
    font-size: 2.3vw;
    line-height: 1.14;
    margin: 0 0 2vw
}

.biography .recording {
    color: var(--accent);
    font-size: 2.95vw;
    font-style: italic;
    line-height: 1.15;
    margin-bottom: 2.1vw
}

.biography .career {
    width: 58%;
    margin-bottom: 2.1vw
}

.biography .fellowship {
    color: var(--accent);
    text-align: center;
    font-size: 2.05vw;
    letter-spacing: .045em;
    line-height: 1.07;
    text-transform: uppercase;
    margin: 0
}

.contact {
    height: 53.4vw;
    min-height: 480px;
    background-image: url('images/page_1_4.webp')
}

.contact-brand {
    position: absolute;
    left: 4%;
    top: 14%;
    width: 21%;
    text-align: center
}

.contact-brand img {
    width: 100%;
    height: 22vw;
    display: block
}

.contact-brand span {
    display: block;
    font-size: 3.5vw;
    text-transform: uppercase;
    line-height: 1.05;
    margin-top: 2vw
}

.footer-socials {
    justify-content: center;
    gap: 1.4vw;
    margin-top: 3.6vw
}

.footer-socials a {
    width: 4.5vw;
    height: 4.5vw;
    color: #fff
}

.contact-copy {
    position: absolute;
    right: 4.3%;
    top: 8%;
    width: 43%;
    text-align: right
}

.contact h2 {
    font-size: 4.8vw;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0 0 1.8vw
}

.contact-links {
    display: grid;
    gap: .5vw;
    font-size: 2.3vw;
    text-transform: uppercase
}

.contact-links a:hover {
    text-decoration: underline;
    text-underline-offset: 4px
}

form {
    margin-top: 3.5vw;
    text-align: center;
    display: grid;
    gap: 1vw
}

input, textarea {
    border: 1px solid #bcbcbc;
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    padding: .75vw 1.2vw;
    min-width: 0;
    width: 100%;
    font-size: 1.9vw
}

input::placeholder, textarea::placeholder {
    color: #444;
    opacity: 1
}

textarea {
    height: 10vw;
    resize: vertical;
    min-height: 80px
}

.send-button {
    justify-self: center;
    border: 0;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    text-transform: uppercase;
    font-size: 2.6vw;
    padding: .65vw 2vw;
    margin-top: 1.1vw;
    cursor: pointer;
    transition: background .2s
}

.send-button:hover {
    background: #e51c4b
}

.form-status {
    font-size: 15px;
    line-height: 1.3;
    margin: 0;
    text-align: center
}

.contact-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

#contact-form .contact-privacy {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    color: #eee;
}

.contact-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.send-button:disabled { opacity: .65; cursor: wait; }

.site-footer {
    height: 2.6vw;
    min-height: 15px;
    background: var(--accent)
}

.hero {
    background-position: center bottom
}

.about blockquote {
    font-size: 2.45vw;
    letter-spacing: .025em;
    font-weight: 400
}

.biography {
    background-image: linear-gradient(to bottom, transparent 52%, #0008 80%, #000 100%), url('images/page_1_3.webp')
}

@media (max-width: 640px) {
    .site-header {
        height: 64px;
        position: relative;
        z-index: 5;
        padding: 0 22px;
        justify-content: space-between
    }

    .header-name {
        display: block;
        font-size: 24px;
        text-transform: uppercase
    }

    .menu-toggle {
        display: grid;
        gap: 7px;
        padding: 10px 0 10px 12px;
        border: 0;
        background: none;
        color: #fff;
        cursor: pointer
    }

    .menu-toggle span {
        width: 26px;
        height: 1px;
        background: currentColor
    }

    .site-header nav {
        width: 100%;
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        background: var(--accent);
        padding: 18px 24px 24px;
        font-size: 18px;
        align-items: flex-start;
        gap: 0;
        box-shadow: 0 10px 20px #0004
    }

    .site-header nav.is-open {
        display: flex;
        flex-direction: column
    }

    .site-header nav a {
        padding: 12px 0;
        width: 100%
    }

    .site-header .nav-name {
        display: none
    }

    .hero {
        height: 115vw;
        min-height: 430px;
        background-position: 61% center
    }

    .hero-brand {
        left: 5%;
        top: 28%;
        width: 43%
    }

    .hero-brand img {
        height: 43vw;
        width: 100%
    }

    .hero h1 {
        font-size: 5.1vw;
        margin-top: 12px;
        white-space: normal
    }

    .socials {
        gap: 9px
    }

    .socials a {
        width: 32px;
        height: 32px
    }

    .hero-socials {
        left: 6%;
        top: 6%
    }

    .about {
        padding: 36px 23px 32px;
        min-height: 0;
        background-size: auto 62vw;
        background-position: left top;
        background-repeat: no-repeat;
        background-color: white
    }

    .about blockquote {
        font-size: 3.1vw;
        white-space: normal;
        margin: 0 0 12px 35%;
        line-height: 1.2
    }

    .about cite {
        font-size: 4vw;
        margin-top: 5px
    }

    .about h2 {
        font-size: 7vw;
        margin: 0 0 43vw 37%
    }

    .about p {
        text-align: left;
        font-size: 19px;
        line-height: 1.4;
        margin-bottom: 20px
    }

    .desktop-break {
        display: none
    }

    .biography {
        padding: 64vw 23px 30px;
        background-size: auto 70vw;
        background-position: 65% top;
        background-repeat: no-repeat;
        background-color: #000
    }

    .biography:before {
        content: "";
        position: absolute;
        inset: 45vw 0 auto;
        height: 26vw;
        background: linear-gradient(transparent, #000);
        z-index: -1
    }

    .biography p {
        font-size: 19px;
        line-height: 1.4;
        margin-bottom: 22px
    }

    .biography .recording {
        font-size: 24px;
        margin-bottom: 22px
    }

    .biography .career {
        width: 100%;
        margin-bottom: 22px
    }

    .biography .fellowship {
        font-size: 17px;
        line-height: 1.35;
        margin-top: 28px
    }

    .contact {
        height: auto;
        min-height: 0;
        padding: 68vw 23px 35px;
        background-position: 35% top;
        background-size: auto 105vw;
        background-repeat: no-repeat;
        background-color: #292929
    }

    .contact:before {
        content: "";
        position: absolute;
        top: 49vw;
        left: 0;
        right: 0;
        height: 57vw;
        background: linear-gradient(transparent, #292929);
        z-index: -1
    }

    .contact-brand {
        left: 6%;
        top: 8vw;
        width: 29%
    }

    .contact-brand img {
        height: 33vw
    }

    .contact-brand span {
        font-size: 5vw;
        margin-top: 3vw
    }

    .footer-socials {
        margin-top: 20px;
        gap: 8px
    }

    .footer-socials a {
        width: 30px;
        height: 30px
    }

    .contact-copy {
        position: relative;
        inset: auto;
        width: 100%;
        text-align: center
    }

    .contact h2 {
        font-size: 38px;
        margin: 0 0 18px
    }

    .contact-links {
        font-size: 17px;
        gap: 9px;
        overflow-wrap: anywhere
    }

    form {
        margin-top: 30px;
        gap: 12px
    }

    input, textarea {
        font-size: 18px;
        padding: 12px
    }

    textarea {
        height: 130px
    }

    .send-button {
        font-size: 23px;
        padding: 9px 25px;
        margin-top: 6px
    }

    .site-footer {
        height: 18px
    }
}

/* About page: keep the shared Jun typeface and the original editorial layout. */
.about-page {
    --about-gray: #818180;
    font-size: 2.2vw;
    line-height: 1.18;
    color: #e7e5e1;
}
.about-page img { display: block; max-width: 100%; height: auto; }
.about-page p { margin: 0; }
.about-page em { color: var(--accent); font-style: normal; text-transform: uppercase; }
.about-page strong { font-weight: 400; text-transform: uppercase; }
.about-intro { position: relative; min-height: 51.1vw; background: var(--about-gray); isolation: isolate; border-bottom: 5.5vw solid var(--accent); }
.about-intro::before { content: ""; position: absolute; inset: 0 0 0 71.5%; background: #161616; z-index: -1; }
.about-intro-portrait { position: absolute; right: 0; bottom: -5.5vw; width: 59.1%; z-index: -1; }
.about-intro-copy { padding: 1.5vw 0 0 4%; width: 63%; }
.about-intro h1 { font-size: 6vw; line-height: 1; font-weight: 400; text-transform: uppercase; margin: 0 0 1.7vw; }
.about-childhood { position: relative; width: 35.4%; margin: 2.7vw 0 -3.5vw 4%; }
.about-education { position: relative; background: #fff; color: var(--ink); padding: 3.3vw 3.5% 0 4%; }
.about-studies { position: relative; min-height: 28.3vw; }
.about-studies::before { content: ""; position: absolute; top: 3vw; right: -3.783783%; width: 35.5%; height: 18.5vw; background: var(--accent); }
.about-studies p { width: 63%; position: relative; }
.about-page .about-carnegie { position: absolute; right: 0; top: -2.3vw; width: 30.6%; height: 29.8vw; object-fit: cover; object-position: top; }
.about-debut { text-align: center; padding: 1vw 0 2.6vw; }
.about-early-photos { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 4.2vw; align-items: stretch; padding: 0 1.8%; margin-bottom: -18vw; }
.about-early-photos img { width: 100%; height: 35vw; object-fit: cover; }
.about-achievements { background: var(--about-gray); padding: 21vw 4% 0; text-align: center; border-bottom: 2.6vw solid var(--accent); }
.about-achievements > p { margin-bottom: 2.6vw; }
.about-awards { display: grid; grid-template-columns: 47% 49%; gap: 4%; align-items: center; margin-top: 3.2vw; margin-bottom: -5.6vw; }
.about-awards img { width: 100%; position: relative; z-index: 1; }
.about-awards p { padding-bottom: 3vw; }
.about-world-stage { position: relative; isolation: isolate; min-height: 72vw; padding: 8.5vw 4% 4vw; background: #000; }
.about-world-photo { position: absolute; right: 0; bottom: 0; width: 86.6%; z-index: -1; }
.about-world-photo img { width: 100%; }
.about-world-detail { margin-top: 2.6vw; }
.about-world-copy { border: 2px solid #c4c4c4; padding: 2.7vw; width: 59.6%; }
.about-world-copy p + p { margin-top: 2.6vw; }
.about-recognition { display: grid; grid-template-columns: 1.08fr 1fr; gap: 4.4vw; padding: 2vw 3.5% 1.8vw 4%; background: var(--accent); }
.about-recognition-left, .about-recognition-right { min-width: 0; }
.about-recognition img { width: 100%; }
.about-recognition picture { display: block; }
.about-recognition picture img { height: 100%; object-fit: cover; }
.about-page .about-concert { height: 25.3vw; object-fit: cover; }
.about-recognition-left p { margin: 1vw 0 1.8vw; }
.about-page .about-gala { height: 28.8vw; object-fit: cover; }
.about-page .about-vogue { height: 53vw; object-fit: cover; }
.about-recognition-right p { text-align: center; padding: 3.5vw .3vw 1vw; }

@media (max-width: 640px) {
    .about-page { font-size: 18px; line-height: 1.3; }
    .about-intro { min-height: 0; padding-bottom: 0; border-bottom-width: 20px; }
    .about-intro::before { left: 65%; }
    .about-intro-portrait { width: 100%; max-width: none !important; height: 100% !important; object-fit: cover; object-position: 43% top; bottom: 0; }
    .about-intro-copy { position: relative; padding: 22px 0 0 4%; width: 49%; background: var(--about-gray); }
    .about-intro h1 { font-size: clamp(32px, 9vw, 52px); line-height: 1.05; margin-bottom: 15px; }
    .about-intro-copy p { font-size: clamp(15px, 3.8vw, 21px); line-height: 1.25; }
    .about-childhood { width: 68%; margin: 25px 0 0 4%; transform: translateY(1px); }
    .about-education { padding: 25px 4% 0; }
    .about-studies { min-height: 0; display: flow-root; }
    .about-studies::before { top: 22px; height: 130px; right: -4.347826%; width: 54%; }
    .about-page .about-carnegie { position: relative; float: right; top: -15px; width: 51%; height: 50vw; margin: 0 -1% 0 15px; }
    .about-studies p { width: auto; font-size: 17px; }
    .about-debut { padding: 24px 0; text-align: justify; font-size: 17px; }
    .about-early-photos { padding: 0; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 4vw; margin-bottom: -16vw; }
    .about-early-photos img { height: 33vw; }
    .about-achievements { padding: 24vw 4% 0; border-bottom-width: 20px; }
    .about-achievements > p { text-align: justify; margin-bottom: 24px; }
    .about-awards { display: flex; flex-direction: column; gap: 22px; margin: 0; }
    .about-awards img { width: 100%; }
    .about-awards p { text-align: justify; padding-bottom: 20px; }
    .about-world-stage { min-height: 0; padding: 22px 4%; }
    .about-world-stage > img { width: 100%; height: 74%; object-fit: cover; object-position: 65% bottom; }
    .about-world-copy { width: 100%; padding: 0; border: 0; font-size: 17px; display: flow-root; }
    .about-world-copy::before { content: ""; float: right; width: 51%; height: 520px; shape-outside: polygon(100% 0, 100% 100%, 0 100%, 8% 58%, 62% 34%); }
    .about-world-copy p { position: relative; text-shadow: 0 1px 3px #000; }
    .about-world-copy p + p { margin-top: 24px; }
    .about-recognition { grid-template-columns: 1fr 1fr; gap: 0 5%; padding: 22px 4%; }
    .about-recognition-left, .about-recognition-right { display: contents; }
    .about-page .about-concert, .about-page .about-vogue { height: 59vw; object-fit: cover; }
    .about-concert { grid-column: 1; grid-row: 1; }
    .about-vogue { grid-column: 2; grid-row: 1; }
    .about-recognition-left p { grid-column: 1 / -1; grid-row: 2; margin: 20px 0; text-align: justify; }
    .about-page .about-gala { grid-column: 1 / -1; grid-row: 3; height: auto; }
    .about-recognition-right p { grid-column: 1 / -1; grid-row: 4; text-align: justify; padding: 22px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }

    *, *:before, *:after {
        transition: none !important
    }
}