:root {
    color-scheme: dark;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #101010;
    color: #f5f5f5;
}
* { box-sizing: border-box; }
body { margin: 0; color: inherit; background: #101010; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
:lang(fa) { font-family: "IRANSans", Tahoma, sans-serif; }
.portrait-hero {
    position: relative;
    isolation: isolate;
    min-height: 620px;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: linear-gradient(110deg, #101010 40%, #151515 100%);
}
.portrait-hero__image {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 96%;
}
.portrait-hero__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}
.portrait-hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #101010 0%, transparent 30%), linear-gradient(0deg, #101010 0%, transparent 24%);
}
.portrait-hero__intro {
    position: absolute;
    left: 5.8%;
    right: 4%;
    bottom: 8.5%;
}
h1 {
    margin: 0 0 18px;
    font-size: clamp(56px, 8.2vw, 150px);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 1.02;
}
h1 span { display: block; }
p {
    margin: 0;
    color: #c6c6c6;
    font-size: clamp(17px, 2.15vw, 32px);
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.4;
}
@media (max-width: 700px) {
    .portrait-hero { min-height: 700px; }
    .portrait-hero__image { width: 95%; height: 78%; right: -12%; bottom: 18%; }
    .portrait-hero__image::after {
        background: linear-gradient(0deg, #101010 0%, transparent 45%);
    }
    .portrait-hero__intro { left: 7%; right: 7%; bottom: 7%; }
    h1 { font-size: clamp(36px, 11vw, 76px); margin-bottom: 20px; }
    p { max-width: 310px; font-size: 20px; }
}