/* Parallax exploration — self-contained, safe to remove.
   Intro band styled like the homepage hero (.hp_parallax): a gallery photo
   drifts behind a dark overlay while the copy sits still on top.
   Body copy: site default (Inter), italic — matching the homepage .text_b.
   Author surname on the right: elegant serif (Playfair Display italic). */

@font-face {
    font-family: 'Playfair Display';
    font-display: swap;
    font-weight: 400 800;
    font-style: italic;
    src: url('../fonts/playfair/PlayfairDisplay-Italic.ttf') format('truetype');
}

.seo_hero {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.seo_hero > .bg {
    position: absolute;
    left: 0; right: 0; top: -40%; bottom: -40%;
    background: url('/static/img/about/gallery.jpg') center/cover no-repeat;
    will-change: transform;
}

.seo_hero > .ov {
    position: absolute;
    inset: 0;
    background: rgba(8, 16, 36, 0.58);
}

.seo_hero > .seo_inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.seo_hero .hero_copy {
    flex: 0 1 620px;
}

/* Elegant author surname on the right, floating over the photo. */
.seo_hero .hero_name {
    flex: 0 0 auto;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(54px, 6.6vw, 116px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: #fff;
    opacity: 0.32;
    text-align: right;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.seo_hero .seo_intro {
    max-width: 620px;
    margin: 0 0 26px;
    color: #fff;
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.45;
    letter-spacing: -0.2px;
    text-wrap: balance;
}

.seo_hero .seo_cta {
    display: inline-block;
    padding: 13px 32px;
    border-radius: 30px;
    background: #fff;
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.seo_hero .seo_cta:hover {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    .seo_hero .hero_name { display: none; }
}
@media (max-width: 760px) {
    .seo_hero { min-height: 240px; }
    .seo_hero > .bg { top: 0; bottom: 0; transform: none !important; }
    .seo_hero .seo_intro { font-size: 19px; margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .seo_hero > .bg { transform: none !important; }
}