@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=Lora:wght@400;500&display=swap');
:root {
    --bg: #f7f3ed;
    --bg-soft: #fbfaf7;
    --card: rgba(255, 255, 255, 0.82);
    --text: #1d1d1f;
    --muted: #6e6e73;
    --line: rgba(29, 29, 31, 0.08);
    --accent: #b59b6b;
    --shadow: 0 24px 70px rgba(40, 32, 22, 0.10);
    --shadow-hover: 0 34px 90px rgba(40, 32, 22, 0.16);
    --radius: 30px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(181, 155, 107, 0.16), transparent 34%),
        linear-gradient(180deg, #fbfaf7 0%, var(--bg) 100%);
    color: var(--text);
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 7vw;
    backdrop-filter: blur(20px);
    background: rgba(247, 243, 237, 0.74);
    border-bottom: 1px solid var(--line);
}

.logo {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.nav {
    display: flex;
    gap: 28px;
    color: var(--muted);
    font-size: 15px;
}

.nav a {
    transition: color .25s ease;
}

.nav a:hover {
    color: var(--text);
}

.section {
    padding: 90px 7vw;
}

.hero {
    min-height: 86vh;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;
    padding: 90px 7vw 110px;
}

.eyebrow {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 18px;
}

.hero h1,
.page-title {
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.95;
    letter-spacing: -0.065em;
    margin: 0;
}

.hero-text {
    max-width: 670px;
}

.hero-subtitle {
    margin-top: 28px;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.35;
    color: var(--muted);
}

.quote {
    margin-top: 34px;
    padding-left: 22px;
    border-left: 2px solid var(--accent);
    color: #3c3c40;
    font-size: 20px;
    line-height: 1.55;
}

.actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 38px;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 600;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn-primary {
    background: #1d1d1f;
    color: white;
    box-shadow: 0 14px 36px rgba(29, 29, 31, 0.20);
}

.btn-secondary {
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--line);
    color: var(--text);
}

.btn:hover {
    transform: translateY(-2px);
}

.hero-art {
    position: relative;
    min-height: 520px;
}

.floating-cover {
    position: absolute;
    width: 260px;
    aspect-ratio: 3 / 4;
    border-radius: 26px;
    background: linear-gradient(145deg, #f0e5d2, #ffffff);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: float 6s ease-in-out infinite;
}

.floating-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.floating-cover.book {
    right: 180px;
    top: 20px;
    transform: rotate(-8deg);
}

.floating-cover.album {
    right: 10px;
    top: 170px;
    transform: rotate(7deg);
    animation-delay: -2s;
}

.vinyl {
    position: absolute;
    width: 270px;
    height: 270px;
    right: 40px;
    top: 150px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #d8c39c 0 8%, #111 9% 14%, #282828 15% 100%);
    box-shadow: 0 28px 80px rgba(0,0,0,.22);
}

.section-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 34px;
}

.section-head h2 {
    font-size: clamp(36px, 4vw, 64px);
    letter-spacing: -0.05em;
    margin: 0;
}

.section-head p {
    max-width: 420px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    transition: transform .35s ease, box-shadow .35s ease;
}

.card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-hover);
}

.card-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 22px;
    overflow: hidden;
    background: #eee7dc;
}

.card-cover.album-cover {
    aspect-ratio: 1 / 1;
}

.card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body {
    padding: 20px 4px 4px;
}

.card-body h3 {
    margin: 0 0 8px;
    font-size: 24px;
    letter-spacing: -0.035em;
}

.meta {
    color: var(--muted);
    font-size: 14px;
}

.card-body p {
    color: var(--muted);
    line-height: 1.55;
}

.site-footer {
    padding: 42px 7vw;
    color: var(--muted);
    border-top: 1px solid var(--line);
    text-align: center;
}

.fade-up {
    animation: fadeUp .75s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -18px;
    }
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 60px;
    }

    .hero-art {
        min-height: 420px;
    }

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

    .section-head {
        display: block;
    }

    .site-header {
        padding: 18px 5vw;
    }

    .nav {
        gap: 16px;
        font-size: 14px;
    }

    .section {
        padding: 64px 5vw;
    }
}

.book-hero {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 72px;
    align-items: center;
    min-height: 74vh;
}

.book-cover-wrap {
    display: flex;
    justify-content: center;
}

.book-cover-large {
    width: min(100%, 390px);
    aspect-ratio: 3 / 4;
    border-radius: 34px;
    overflow: hidden;
    background: #eee7dc;
    box-shadow:
        0 34px 90px rgba(40, 32, 22, 0.18),
        0 8px 24px rgba(40, 32, 22, 0.10);
    transform: rotate(0deg);
    transition: transform .45s ease, box-shadow .45s ease;
}

.book-cover-large:hover {
    transform: rotate(-2deg) translateY(-6px);
    box-shadow:
        0 44px 120px rgba(40, 32, 22, 0.22),
        0 10px 32px rgba(40, 32, 22, 0.12);
}

.book-cover-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-info {
    max-width: 760px;
}

.book-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
    color: var(--muted);
}

.book-meta span {
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
}

.book-description {
    margin-top: 30px;
    max-width: 650px;
    font-size: 20px;
    line-height: 1.7;
    color: var(--muted);
}

.contents-section {
    padding-top: 40px;
}

.poem-list {
    display: grid;
    gap: 14px;
}

.poem-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 82px;
    padding: 20px 26px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 46px rgba(40, 32, 22, 0.06);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.poem-row:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 26px 70px rgba(40, 32, 22, 0.11);
}

.poem-number {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.poem-title {
    font-size: 24px;
    letter-spacing: -0.035em;
    font-weight: 600;
}

.poem-arrow {
    color: var(--muted);
    font-size: 15px;
}

@media (max-width: 900px) {
    .book-hero {
        grid-template-columns: 1fr;
        gap: 42px;
        min-height: auto;
    }

    .book-cover-large {
        width: min(100%, 320px);
    }

    .poem-row {
        grid-template-columns: 52px 1fr;
    }

    .poem-arrow {
        display: none;
    }

    .poem-title {
        font-size: 20px;
    }
}
.poem-page {
    max-width: 980px;
    margin: 0 auto;
    padding-top: 64px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
    color: var(--muted);
    font-size: 15px;
}

.breadcrumbs a {
    transition: color .25s ease;
}

.breadcrumbs a:hover {
    color: var(--text);
}

.poem-reader {
    max-width: 760px;
    margin: 0 auto;
    padding: 54px 64px 62px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow:
        0 24px 80px rgba(40, 32, 22, 0.08),
        inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
}

.poem-heading {
    max-width: 680px;
    margin: 0;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.poem-text {
    margin-top: 36px;
    max-width: 620px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 1.45vw, 24px);
    line-height: 1.78;
    color: #303034;
    letter-spacing: -0.01em;
}

.poem-navigation {
    max-width: 760px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
}

.poem-navigation a:first-child {
    justify-self: start;
}

.poem-navigation a:nth-child(2) {
    justify-self: center;
}

.poem-navigation a:last-child {
    justify-self: end;
}

@media (max-width: 900px) {
    .poem-page {
        padding-top: 38px;
    }

    .breadcrumbs {
        margin-bottom: 24px;
        font-size: 14px;
    }

    .poem-reader {
        padding: 34px 24px 40px;
        border-radius: 28px;
    }

    .poem-heading {
        font-size: clamp(32px, 10vw, 44px);
    }

    .poem-text {
        margin-top: 28px;
        font-size: 20px;
        line-height: 1.72;
    }

    .poem-navigation {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .poem-navigation .btn {
        width: 100%;
    }
}
.album-hero {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
    min-height: 74vh;
}

.album-art-wrap {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-cover-large {
    position: relative;
    z-index: 2;
    width: min(100%, 390px);
    aspect-ratio: 1 / 1;
    border-radius: 34px;
    overflow: hidden;
    background: #eee7dc;
    box-shadow:
        0 34px 90px rgba(40, 32, 22, 0.20),
        0 8px 24px rgba(40, 32, 22, 0.10);
    transform: rotate(0deg);
    transition: transform .45s ease, box-shadow .45s ease;
}

.album-cover-large:hover {
    transform: rotate(-2deg) translateY(-6px);
    box-shadow:
        0 44px 120px rgba(40, 32, 22, 0.24),
        0 10px 32px rgba(40, 32, 22, 0.12);
}

.album-cover-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-vinyl {
    position: absolute;
    z-index: 1;
    width: 390px;
    height: 390px;
    right: 3%;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #d7bf90 0 8%, #111 9% 14%, #242424 15% 35%, #101010 36% 100%);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, .26),
        inset 0 0 0 1px rgba(255,255,255,.08);
    transform: translateX(30%);
}

.album-vinyl::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(
            circle at center,
            rgba(255,255,255,.08) 0 1px,
            transparent 1px 7px
        );
    opacity: .35;
}

.album-vinyl::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 36px;
    top: 82px;
    left: 80px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    filter: blur(10px);
    transform: rotate(-28deg);
}

.tracks-section {
    padding-top: 30px;
    padding-bottom: 140px;
}

.track-list {
    display: grid;
    gap: 14px;
}

.track-row {
    width: 100%;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;

    display: grid;
    grid-template-columns: 70px 48px 1fr auto;
    gap: 18px;
    align-items: center;

    min-height: 78px;
    padding: 18px 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 46px rgba(40, 32, 22, 0.06);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.track-row:hover,
.track-row.active {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 26px 70px rgba(40, 32, 22, 0.11);
}

.track-number {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.track-play {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1f;
    color: white;
    font-size: 14px;
    box-shadow: 0 12px 28px rgba(29,29,31,.18);
}

.track-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.035em;
}

.track-duration {
    color: var(--muted);
}

.music-player {
    position: fixed;
    left: 7vw;
    right: 7vw;
    bottom: 24px;
    z-index: 50;

    display: none;
    grid-template-columns: 1fr minmax(320px, 640px);
    gap: 24px;
    align-items: center;

    padding: 18px 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 80px rgba(40, 32, 22, 0.18);
    backdrop-filter: blur(24px);
}

.music-player.visible {
    display: grid;
    animation: fadeUp .35s ease both;
}

.music-player-label {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.music-player-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.music-player audio {
    width: 100%;
}

@media (max-width: 900px) {
    .album-hero {
        grid-template-columns: 1fr;
        gap: 42px;
        min-height: auto;
    }

    .album-art-wrap {
        min-height: 360px;
    }

    .album-cover-large {
        width: min(100%, 310px);
    }

    .album-vinyl {
        width: 310px;
        height: 310px;
        right: 8%;
    }

    .track-row {
        grid-template-columns: 48px 42px 1fr;
    }

    .track-duration {
        display: none;
    }

    .track-title {
        font-size: 19px;
    }

    .music-player {
        left: 16px;
        right: 16px;
        bottom: 16px;
        grid-template-columns: 1fr;
    }
}
.album-art-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 470px;
}

.album-art-simple .album-cover-large {
    transform: rotate(0deg);
}

.album-art-simple .album-cover-large:hover {
    transform: rotate(-2deg) translateY(-6px);
}

/* полностью скрываем старую пластинку, если CSS остался */
.album-vinyl {
    display: none !important;
}

@media (max-width: 900px) {
    .album-art-simple {
        min-height: 360px;
    }
}
.catalog-hero {
    padding-bottom: 30px;
}

.catalog-subtitle {
    max-width: 760px;
    margin-top: 30px;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.45;
    color: var(--muted);
}

.catalog-section {
    padding-top: 20px;
}

.catalog-grid {
    display: grid;
    gap: 28px;
}

.catalog-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 34px;
    align-items: center;
    padding: 22px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 70px rgba(40, 32, 22, 0.08);
    backdrop-filter: blur(18px);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.catalog-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 34px 100px rgba(40, 32, 22, 0.13);
}

.catalog-cover {
    display: block;
    overflow: hidden;
    background: #eee7dc;
    box-shadow: 0 20px 60px rgba(40, 32, 22, 0.14);
}

.book-catalog-cover {
    aspect-ratio: 3 / 4;
    border-radius: 26px;
}

.album-catalog-cover {
    aspect-ratio: 1 / 1;
    border-radius: 28px;
}

.catalog-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.catalog-card:hover .catalog-cover img {
    transform: scale(1.045);
}

.catalog-card-body {
    max-width: 760px;
}

.catalog-card-body h2 {
    margin: 14px 0 14px;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.catalog-card-body p {
    max-width: 680px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.65;
}

.catalog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.catalog-meta span {
    padding: 8px 13px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    font-size: 14px;
}

.catalog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

@media (max-width: 800px) {
    .catalog-card {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .catalog-cover {
        width: min(100%, 320px);
        justify-self: center;
    }

    .catalog-actions .btn {
        width: 100%;
    }
}

.menu-toggle {
    display: none;
    border: 0;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(40, 32, 22, 0.08);
}

.mobile-menu {
    display: none;
}

@media (max-width: 700px) {
    .site-header .nav {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .mobile-menu {
        position: fixed;
        top: 76px;
        left: 16px;
        right: 16px;
        z-index: 60;

        display: grid;
        gap: 8px;
        padding: 14px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.86);
        box-shadow: 0 24px 80px rgba(40, 32, 22, 0.18);
        backdrop-filter: blur(24px);

        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
    }

    .mobile-menu.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .mobile-menu a {
        padding: 15px 16px;
        border-radius: 18px;
        color: var(--text);
        font-weight: 600;
        background: rgba(247, 243, 237, 0.56);
    }

    .mobile-menu a:hover {
        background: rgba(247, 243, 237, 0.9);
    }
}
.home-about-section {
    padding-top: 20px;
}

.home-about-card {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(34px, 6vw, 70px);
    border-radius: 42px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        0 34px 100px rgba(40, 32, 22, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px);
}

.home-about-card h2 {
    margin: 0;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.home-about-text {
    margin-top: 38px;
    max-width: 820px;
    color: #343438;
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.75;
}

.home-about-text p {
    margin: 0 0 26px;
}

.home-about-text p:last-child {
    margin-bottom: 0;
}
.nav a {
    position: relative;
    padding: 8px 0;
}

.nav a.active {
    color: var(--text);
}

.nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
    transform: translateX(-50%);
    transition: width .25s ease;
}

.nav a:hover::after,
.nav a.active::after {
    width: 100%;
}

.mobile-menu a.active {
    background: rgba(181, 155, 107, 0.14);
    color: var(--text);
}

.global-player {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100;

    width: min(920px, calc(100vw - 32px));
    min-height: 104px;

    display: grid;
    grid-template-columns: 76px 1fr 72px;
    gap: 18px;
    align-items: center;

    padding: 14px 18px;
    border-radius: 32px;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.95);

    box-shadow:
        0 30px 90px rgba(40, 32, 22, 0.22),
        0 10px 30px rgba(40, 32, 22, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);

    opacity: 0;
    transform: translateX(-50%) translateY(28px) scale(0.98);
    pointer-events: none;

    transition:
        opacity .32s ease,
        transform .32s ease;
}

.global-player.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}

.global-player::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 31px;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(181, 155, 107, 0.18), transparent 36%),
        radial-gradient(circle at bottom right, rgba(29, 29, 31, 0.06), transparent 34%);
}

.global-player-cover {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(145deg, #e8dcc8, #fffaf1);
    box-shadow:
        0 18px 42px rgba(40, 32, 22, 0.18),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.global-player-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-player-content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.global-player-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.global-player-text {
    min-width: 0;
}

.global-player-title {
    display: block;
    max-width: 100%;

    font-size: 19px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -0.035em;

    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: color .25s ease;
}

.global-player-title:hover {
    color: var(--accent);
}

.global-player-album {
    margin-top: 5px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-player-close {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    border: 0;
    border-radius: 50%;
    cursor: pointer;

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

    background: rgba(29, 29, 31, 0.06);
    color: var(--muted);

    font-size: 24px;
    line-height: 1;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.global-player-close:hover {
    background: rgba(29, 29, 31, 0.11);
    color: var(--text);
    transform: rotate(90deg);
}

.global-player-progress-wrap {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    gap: 10px;
    align-items: center;
}

.global-player-time {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.global-player-progress {
    width: 100%;
    height: 6px;

    appearance: none;
    -webkit-appearance: none;

    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #1d1d1f var(--progress, 0%),
        rgba(29, 29, 31, 0.12) var(--progress, 0%)
    );

    outline: none;
    cursor: pointer;
}

.global-player-progress::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 16px;
    height: 16px;
    border-radius: 50%;

    background: #1d1d1f;
    border: 3px solid white;
    box-shadow:
        0 6px 16px rgba(29, 29, 31, 0.28),
        0 0 0 1px rgba(29,29,31,.08);

    transition: transform .2s ease;
}

.global-player-progress::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.global-player-progress::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid white;
    border-radius: 50%;
    background: #1d1d1f;
    box-shadow:
        0 6px 16px rgba(29, 29, 31, 0.28),
        0 0 0 1px rgba(29,29,31,.08);
}

.global-player-actions {
    position: relative;
    z-index: 1;

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

.global-player-main-button {
    width: 58px;
    height: 58px;

    border: 0;
    border-radius: 50%;
    cursor: pointer;

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

    background: #1d1d1f;
    color: white;

    font-size: 18px;
    box-shadow:
        0 18px 42px rgba(29, 29, 31, 0.28),
        inset 0 1px 0 rgba(255,255,255,.16);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.global-player-main-button:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 24px 56px rgba(29, 29, 31, 0.34),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.global-player-main-button:active {
    transform: scale(0.96);
}

@media (max-width: 700px) {
    .global-player {
        bottom: 14px;
        width: calc(100vw - 24px);
        grid-template-columns: 58px 1fr 52px;
        gap: 12px;
        min-height: 88px;
        padding: 12px;
        border-radius: 26px;
    }

    .global-player-cover {
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

    .global-player-title {
        font-size: 16px;
    }

    .global-player-album {
        font-size: 13px;
    }

    .global-player-top {
        margin-bottom: 10px;
    }

    .global-player-progress-wrap {
        grid-template-columns: 36px 1fr 36px;
        gap: 7px;
    }

    .global-player-time {
        font-size: 11px;
    }

    .global-player-main-button {
        width: 48px;
        height: 48px;
        font-size: 15px;
    }

    .global-player-close {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 28px;
        height: 28px;
        font-size: 20px;
    }
}
.global-player {
    grid-template-columns: 76px 1fr auto;
}

.global-player-actions {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.global-player-side-button {
    width: 46px;
    height: 46px;

    border: 0;
    border-radius: 50%;
    cursor: pointer;

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

    background: rgba(29, 29, 31, 0.06);
    color: var(--muted);

    font-size: 30px;
    line-height: 1;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.global-player-side-button:hover {
    background: rgba(29, 29, 31, 0.12);
    color: var(--text);
    transform: translateY(-2px);
}

.global-player-main-button {
    width: 60px;
    height: 60px;
}

.global-volume {
    position: relative;
}

.global-volume-button {
    font-size: 18px;
}

.global-volume-popup {
    position: absolute;
    left: 50%;
    bottom: 58px;

    width: 54px;
    height: 170px;

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

    padding: 18px 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.9);

    box-shadow:
        0 24px 70px rgba(40, 32, 22, 0.20),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    opacity: 0;
    transform: translateX(-50%) translateY(12px);
    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.global-volume:hover .global-volume-popup {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.global-volume-range {
    appearance: none;
    -webkit-appearance: none;

    width: 130px;
    height: 6px;

    transform: rotate(-90deg);

    border-radius: 999px;
    background: rgba(29, 29, 31, 0.14);
    outline: none;
    cursor: pointer;
}

.global-volume-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 16px;
    height: 16px;
    border-radius: 50%;

    background: #1d1d1f;
    border: 3px solid white;

    box-shadow:
        0 6px 16px rgba(29, 29, 31, 0.28),
        0 0 0 1px rgba(29,29,31,.08);
}

.global-volume-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid white;
    border-radius: 50%;
    background: #1d1d1f;
}

@media (max-width: 700px) {
    .global-player {
        grid-template-columns: 58px 1fr;
    }

    .global-player-actions {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .global-player-side-button {
        width: 42px;
        height: 42px;
        font-size: 26px;
    }

    .global-player-main-button {
        width: 52px;
        height: 52px;
    }

    .global-volume-popup {
        bottom: 52px;
    }
}
.global-player-side-button {
    font-size: 20px;
}

.global-volume-button {
    font-size: 20px;
}

.global-player-main-button {
    font-size: 18px;
}
.global-player::before {
    pointer-events: none !important;
}

.global-player-progress {
    position: relative;
    z-index: 3;
}
.global-player-progress {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;
}

.global-player-progress-wrap {
    position: relative !important;
    z-index: 9999 !important;
}

.global-player::before {
    pointer-events: none !important;
}
.albums-grid-section {
    padding-top: 20px;
}

.albums-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 28px;
}

.album-tile {
    min-width: 0;
}

.album-tile-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 24px;
    background: #f3eee7;
    box-shadow:
        0 20px 54px rgba(40, 32, 22, 0.10),
        0 6px 18px rgba(40, 32, 22, 0.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-radius .35s ease;
}

.album-tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter .35s ease;
}

.album-tile:hover .album-tile-cover {
    transform: translateY(-6px);
    border-radius: 28px;
    box-shadow:
        0 30px 80px rgba(40, 32, 22, 0.16),
        0 10px 26px rgba(40, 32, 22, 0.08);
}

.album-tile:hover .album-tile-cover img {
    filter: brightness(.92);
}

.album-tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .35s ease;
}

.album-tile:hover .album-tile-cover {
    transform: translateY(-6px);
    border-radius: 0;
    box-shadow:
        0 30px 80px rgba(40, 32, 22, 0.16),
        0 10px 26px rgba(40, 32, 22, 0.08);
}

.album-tile:hover .album-tile-cover img {
    filter: brightness(.92);
}
.album-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 14px;
    opacity: 0;
    transition: opacity .28s ease;
}

.album-tile:hover .album-tile-overlay {
    opacity: 1;
}

.album-tile-play {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #1d1d1f;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
}

.album-tile-info {
    padding-top: 14px;
}

.album-tile-info h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-tile-info p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
}


@media (max-width: 760px) {
    .albums-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 16px;
    }

.album-tile-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow:
        0 20px 54px rgba(40, 32, 22, 0.10),
        0 6px 18px rgba(40, 32, 22, 0.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

    .album-tile-info h2 {
        font-size: 16px;
    }
}
.books-grid-section {
    padding-top: 20px;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 36px;
}

.book-tile {
    min-width: 0;
}

.book-tile-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 22px;
    background: #eee7dc;
    box-shadow:
        0 20px 54px rgba(40, 32, 22, 0.10),
        0 6px 18px rgba(40, 32, 22, 0.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-radius .35s ease;
}

.book-tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .45s ease,
        filter .35s ease;
}

.book-tile:hover .book-tile-cover {
    transform: translateY(-6px);
    border-radius: 26px;
    box-shadow:
        0 30px 80px rgba(40, 32, 22, 0.16),
        0 10px 26px rgba(40, 32, 22, 0.08);
}

.book-tile:hover .book-tile-cover img {
    transform: scale(1.045);
    filter: brightness(.82);
}

.book-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 14px;
    opacity: 0;
    transition: opacity .28s ease;
}

.book-tile:hover .book-tile-overlay {
    opacity: 1;
}

.book-tile-open {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: #1d1d1f;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
}

.book-tile-info {
    padding-top: 14px;
}

.book-tile-info h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-tile-info p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
}

@media (max-width: 1280px) {
    .books-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .books-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }

    .book-tile-cover {
        border-radius: 18px;
    }

    .book-tile-info h2 {
        font-size: 16px;
    }
}

/* ===== FINAL FIX: album tiles with soft frame, no overlay button, no crop zoom ===== */

.albums-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 28px;
}

.album-tile-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 24px;
    background: #f3eee7;
    box-shadow:
        0 20px 54px rgba(40, 32, 22, 0.10),
        0 6px 18px rgba(40, 32, 22, 0.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-radius .35s ease;
}

.album-tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter .35s ease;
}

.album-tile:hover .album-tile-cover {
    transform: translateY(-6px);
    border-radius: 28px;
    box-shadow:
        0 30px 80px rgba(40, 32, 22, 0.16),
        0 10px 26px rgba(40, 32, 22, 0.08);
}

.album-tile:hover .album-tile-cover img {
    filter: brightness(.92);
}

.album-tile-overlay,
.album-tile-play {
    display: none !important;
}

@media (max-width: 760px) {
    .albums-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 16px;
    }

    .album-tile-cover {
        border-radius: 20px;
        background: #f3eee7;
    }

    .album-tile:hover .album-tile-cover {
        border-radius: 22px;
    }
}
.books-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 48px 36px !important;
}

@media (max-width: 760px) {
    .books-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
}

.books-grid-section {
    padding-top: 30px;
}

.books-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 360px)) !important;
    gap: 56px 48px !important;
    justify-content: center !important;
}

.book-tile {
    width: 100%;
    max-width: 360px;
}

.book-tile-cover {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 4;
    border-radius: 26px;
}

.book-tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-tile-info h2 {
    font-size: 24px;
    line-height: 1.15;
}

.book-tile-info p {
    font-size: 17px;
}

@media (max-width: 900px) {
    .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 34px 20px !important;
    }

    .book-tile {
        max-width: none;
    }

    .book-tile-cover {
        max-width: none;
    }

    .book-tile-info h2 {
        font-size: 18px;
    }

    .book-tile-info p {
        font-size: 14px;
    }
}

@media (max-width: 560px) {
    .books-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1150px) {
    .site-header {
        padding: 18px 5vw;
    }

    .nav {
        gap: 22px;
        font-size: 14px;
    }

    .hero {
        grid-template-columns: 1fr 0.8fr;
        gap: 32px;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .hero h1,
    .page-title {
        font-size: clamp(54px, 7vw, 82px);
    }

    .hero-art {
        min-height: 420px;
        overflow: hidden;
    }

    .floating-cover {
        width: 220px;
    }

    .floating-cover.book {
        right: 120px;
        top: 10px;
    }

    .floating-cover.album {
        right: 0;
        top: 150px;
    }
}

.books-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 320px)) !important;
    gap: 48px 36px !important;
    justify-content: center !important;
}

.book-tile {
    width: 100%;
    max-width: 320px;
}

.book-tile-cover {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
}

@media (max-width: 1050px) {
    .books-grid {
        grid-template-columns: repeat(2, minmax(0, 320px)) !important;
        gap: 42px 28px !important;
    }
}

@media (max-width: 620px) {
    .books-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .book-tile {
        max-width: 340px;
        margin: 0 auto;
    }

    .book-tile-cover {
        max-width: 340px;
    }
}

.book-compact-page {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.book-compact-sidebar {
    position: sticky;
    top: 112px;
}

.book-compact-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 28px;
    overflow: hidden;
    background: #f3eee7;
    box-shadow:
        0 28px 80px rgba(40, 32, 22, 0.14),
        0 8px 22px rgba(40, 32, 22, 0.08);
}

.book-compact-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.book-compact-info {
    margin-top: 26px;
}

.book-compact-info h1 {
    margin: 0;
    font-size: 42px;
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.book-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.book-compact-meta span {
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.book-compact-info p {
    margin: 22px 0 26px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}

.book-compact-content {
    min-width: 0;
}

.book-compact-head {
    margin-bottom: 28px;
}

.book-compact-head h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.book-compact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.book-compact-row {
    min-width: 0;
    min-height: 56px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;

    padding: 12px 14px;
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: 0 12px 32px rgba(40, 32, 22, 0.045);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.book-compact-row:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 48px rgba(40, 32, 22, 0.08);
}

.book-compact-number {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.book-compact-title {
    min-width: 0;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.025em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1400px) {
    .book-compact-page {
        grid-template-columns: 360px minmax(0, 1fr);
    }

    .book-compact-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .book-compact-page {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .book-compact-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 30px;
        align-items: center;
    }

    .book-compact-info {
        margin-top: 0;
    }

    .book-compact-info h1 {
        font-size: 38px;
    }

    .book-compact-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .book-compact-sidebar {
        display: block;
    }

    .book-compact-cover {
        max-width: 300px;
        margin: 0 auto;
    }

    .book-compact-info {
        margin-top: 26px;
    }

    .book-compact-info h1 {
        font-size: 36px;
    }

    .book-compact-list {
        grid-template-columns: 1fr;
    }

    .book-compact-title {
        white-space: normal;
    }
}
/* ===== Compact book detail layout ===== */

.book-compact-page {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 56px !important;
    align-items: start !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}

.book-compact-sidebar {
    position: sticky !important;
    top: 112px !important;
    min-width: 0 !important;
}

.book-compact-cover {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #f3eee7 !important;
    box-shadow:
        0 28px 80px rgba(40, 32, 22, 0.14),
        0 8px 22px rgba(40, 32, 22, 0.08) !important;
}

.book-compact-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.book-compact-info {
    margin-top: 24px !important;
}

.book-compact-info h1 {
    margin: 0 !important;
    font-size: 36px !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
}

.book-compact-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

.book-compact-meta span {
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--line) !important;
    color: var(--muted) !important;
    font-size: 14px !important;
}

.book-compact-info p {
    margin: 20px 0 24px !important;
    color: var(--muted) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

.book-compact-content {
    min-width: 0 !important;
}

.book-compact-head {
    margin-bottom: 26px !important;
}

.book-compact-head h2 {
    margin: 0 !important;
    font-size: clamp(40px, 5vw, 72px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.06em !important;
}

.book-compact-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.book-compact-row {
    min-width: 0 !important;
    min-height: 54px !important;

    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;

    padding: 12px 14px !important;
    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 12px 32px rgba(40, 32, 22, 0.045) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}

.book-compact-row:hover {
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 48px rgba(40, 32, 22, 0.08) !important;
}

.book-compact-number {
    color: var(--accent) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

.book-compact-title {
    min-width: 0 !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (min-width: 1400px) {
    .book-compact-page {
        grid-template-columns: 340px minmax(0, 1fr) !important;
    }

    .book-compact-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1050px) {
    .book-compact-page {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
    }

    .book-compact-sidebar {
        position: static !important;
        display: grid !important;
        grid-template-columns: 240px minmax(0, 1fr) !important;
        gap: 30px !important;
        align-items: center !important;
    }

    .book-compact-info {
        margin-top: 0 !important;
    }

    .book-compact-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .book-compact-sidebar {
        display: block !important;
    }

    .book-compact-cover {
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    .book-compact-info {
        margin-top: 26px !important;
    }

    .book-compact-list {
        grid-template-columns: 1fr !important;
    }

    .book-compact-title {
        white-space: normal !important;
    }
}
.book-compact-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
}

.book-compact-row {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;

    padding: 10px 12px !important;
    border-radius: 14px !important;

    background: rgba(255, 255, 255, 0.46) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow: none !important;
}

.book-compact-row:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 14px 36px rgba(40, 32, 22, 0.06) !important;
}

.book-compact-number {
    padding-top: 2px !important;
    color: var(--accent) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

.book-compact-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

@media (max-width: 1250px) {
    .book-compact-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .book-compact-list {
        grid-template-columns: 1fr !important;
    }

    .book-compact-title {
        -webkit-line-clamp: unset !important;
    }
}
.book-compact-head h2 {
    font-size: clamp(42px, 4.2vw, 64px) !important;
    margin-bottom: 0 !important;
}
/* ===== Book detail: wider left sidebar ===== */

.book-compact-page {
    grid-template-columns: 430px minmax(0, 1fr) !important;
    gap: 56px !important;
    max-width: 1500px !important;
    padding-top: 58px !important;
}

.book-compact-sidebar {
    position: sticky !important;
    top: 120px !important;
}

.book-compact-cover {
    max-width: 430px !important;
    width: 100% !important;
    border-radius: 30px !important;
}

.book-compact-info {
    margin-top: 24px !important;
    padding: 28px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 18px 54px rgba(40, 32, 22, 0.07) !important;
    backdrop-filter: blur(18px) !important;
}

.book-compact-info h1 {
    font-size: clamp(34px, 3vw, 48px) !important;
}

.book-compact-meta {
    margin-top: 18px !important;
}

.book-compact-info .btn {
    margin-top: 20px !important;
    width: 100% !important;
}

.book-compact-content {
    padding-top: 18px !important;
}

.book-compact-head {
    margin-bottom: 24px !important;
}

.book-compact-head h2 {
    display: none !important;
}

@media (max-width: 1200px) {
    .book-compact-page {
        grid-template-columns: 360px minmax(0, 1fr) !important;
        gap: 42px !important;
    }

    .book-compact-cover {
        max-width: 360px !important;
    }
}

@media (max-width: 900px) {
    .book-compact-page {
        grid-template-columns: 1fr !important;
    }

    .book-compact-sidebar {
        position: static !important;
        display: grid !important;
        grid-template-columns: 260px minmax(0, 1fr) !important;
        gap: 26px !important;
        align-items: center !important;
    }

    .book-compact-info {
        margin-top: 0 !important;
    }

    .book-compact-cover {
        max-width: 260px !important;
    }
}

@media (max-width: 650px) {
    .book-compact-sidebar {
        display: block !important;
    }

    .book-compact-cover {
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    .book-compact-info {
        margin-top: 22px !important;
    }
}
/* ===== Fit left book block into viewport ===== */

.book-compact-page {
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 56px !important;
    padding-top: 34px !important;
}

.book-compact-sidebar {
    position: sticky !important;
    top: 104px !important;
    max-height: calc(100vh - 120px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.book-compact-cover {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: 52vh !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 28px !important;
}

.book-compact-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.book-compact-info {
    margin-top: 18px !important;
    padding: 22px !important;
    border-radius: 26px !important;
}

.book-compact-info .eyebrow {
    margin-bottom: 12px !important;
}

.book-compact-info h1 {
    font-size: clamp(30px, 2.6vw, 40px) !important;
    line-height: 1 !important;
}

.book-compact-meta {
    margin-top: 14px !important;
}

.book-compact-meta span {
    padding: 7px 12px !important;
    font-size: 13px !important;
}

.book-compact-info p {
    margin: 16px 0 18px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.book-compact-info .btn {
    min-height: 44px !important;
    margin-top: 14px !important;
}

.book-compact-content {
    padding-top: 26px !important;
}

@media (max-width: 1200px) {
    .book-compact-page {
        grid-template-columns: 320px minmax(0, 1fr) !important;
        gap: 40px !important;
    }

    .book-compact-cover {
        max-width: 320px !important;
        max-height: 48vh !important;
    }
}

.book-pdf-meta-button {
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #1d1d1f;
    color: white;
    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 10px 24px rgba(29, 29, 31, 0.18);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.book-pdf-meta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(29, 29, 31, 0.24);
}
.book-compact-cover {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    max-height: 52vh !important;
    background: #f3eee7 !important;
}

.book-compact-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.book-compact-meta {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
    align-items: center !important;
}

.book-pdf-meta-button {
    width: 100% !important;
    min-height: 36px !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #1d1d1f !important;
    color: white !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    box-shadow: 0 10px 24px rgba(29, 29, 31, 0.18) !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.book-pdf-meta-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 32px rgba(29, 29, 31, 0.24) !important;
}

@media (max-width: 650px) {
    .book-compact-meta {
        grid-template-columns: 1fr !important;
    }
}
/* ===== Final book detail alignment ===== */

.book-compact-page {
    display: grid !important;
    grid-template-columns: 390px minmax(0, 1fr) !important;
    gap: 56px !important;
    align-items: start !important;

    max-width: 1450px !important;
    margin: 0 auto !important;
    padding-top: 42px !important;
}

.book-compact-sidebar {
    position: sticky !important;
    top: 112px !important;

    width: 390px !important;
    max-height: calc(100vh - 126px) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.book-compact-cover {
    width: 390px !important;
    height: 520px !important;

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

    padding: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;

    background: #f3eee7 !important;
    box-shadow:
        0 28px 80px rgba(40, 32, 22, 0.14),
        0 8px 22px rgba(40, 32, 22, 0.08) !important;
}

.book-compact-cover img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;
}

.book-compact-info {
    width: 390px !important;
    margin-top: 0 !important;

    padding: 24px 26px !important;
    border-radius: 28px !important;

    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    box-shadow:
        0 22px 64px rgba(40, 32, 22, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(18px) !important;
}

.book-compact-info h1 {
    margin: 0 !important;
    font-size: 42px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
}

.book-compact-meta {
    width: 100% !important;
    margin-top: 18px !important;

    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

.book-compact-meta span {
    min-height: 40px !important;
    padding: 0 13px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid var(--line) !important;

    color: var(--muted) !important;
    font-size: 14px !important;
}

.book-pdf-meta-button {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: #1d1d1f !important;
    color: white !important;

    font-size: 14px !important;
    font-weight: 750 !important;

    box-shadow: 0 12px 28px rgba(29, 29, 31, 0.20) !important;
}

.book-compact-content {
    padding-top: 0 !important;
}

.book-compact-head {
    margin-top: 0 !important;
    margin-bottom: 26px !important;
}

.book-compact-head .eyebrow {
    margin-top: 0 !important;
}

.book-compact-list {
    align-content: start !important;
}

/* промежуточные экраны */
@media (max-width: 1200px) {
    .book-compact-page {
        grid-template-columns: 330px minmax(0, 1fr) !important;
        gap: 38px !important;
    }

    .book-compact-sidebar,
    .book-compact-info,
    .book-compact-cover {
        width: 330px !important;
    }

    .book-compact-cover {
        height: 440px !important;
    }

    .book-compact-info h1 {
        font-size: 36px !important;
    }
}

/* планшет */
@media (max-width: 900px) {
    .book-compact-page {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .book-compact-sidebar {
        position: static !important;
        width: 100% !important;
        max-height: none !important;

        display: grid !important;
        grid-template-columns: 240px minmax(0, 1fr) !important;
        gap: 24px !important;
        align-items: center !important;
    }

    .book-compact-cover {
        width: 240px !important;
        height: 320px !important;
    }

    .book-compact-info {
        width: 100% !important;
    }
}

/* телефон */
@media (max-width: 650px) {
    .book-compact-sidebar {
        display: block !important;
    }

    .book-compact-cover {
        width: min(100%, 320px) !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;
        margin: 0 auto !important;
    }

    .book-compact-info {
        width: 100% !important;
        margin-top: 20px !important;
    }

    .book-compact-meta {
        grid-template-columns: 1fr !important;
    }
}
/* ===== Book detail final layout ===== */

@media (min-width: 901px) {
    .book-compact-page {
        display: grid !important;
        grid-template-columns: 380px minmax(0, 1fr) !important;
        gap: 72px !important;
        align-items: start !important;

        max-width: 1320px !important;
        margin: 0 auto !important;
        padding-top: 42px !important;
        padding-bottom: 180px !important;
    }

    .book-compact-sidebar {
        position: sticky !important;
        top: 112px !important;

        width: 380px !important;
        max-height: none !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .book-compact-cover {
        width: 380px !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;

        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .book-compact-cover img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;

        display: block !important;
        border-radius: 0 !important;

        box-shadow:
            0 28px 80px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .book-compact-info {
        width: 380px !important;
        margin-top: 0 !important;

        padding: 24px 28px !important;
        border-radius: 28px !important;

        background: rgba(255, 255, 255, 0.72) !important;
        border: 1px solid rgba(255, 255, 255, 0.82) !important;
        box-shadow:
            0 22px 64px rgba(40, 32, 22, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
        backdrop-filter: blur(18px) !important;
    }

    .book-compact-info h1 {
        width: 100% !important;
        margin: 0 !important;

        font-size: 40px !important;
        line-height: 1 !important;
        letter-spacing: -0.055em !important;
    }

    .book-compact-meta {
        width: 100% !important;
        margin-top: 18px !important;

        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .book-compact-meta span {
        min-height: 40px !important;
        padding: 0 13px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.78) !important;
        border: 1px solid var(--line) !important;

        color: var(--muted) !important;
        font-size: 14px !important;
    }

    .book-pdf-meta-button {
        width: 100% !important;
        max-width: none !important;
        min-height: 40px !important;
        padding: 0 18px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 999px !important;
        background: #1d1d1f !important;
        color: white !important;

        font-size: 14px !important;
        font-weight: 750 !important;

        box-shadow: 0 12px 28px rgba(29, 29, 31, 0.20) !important;
    }

    .book-compact-content {
        padding-top: 0 !important;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

    .book-compact-head {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    .book-compact-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        max-width: 760px !important;
    }

    .book-compact-row {
        min-height: 52px !important;

        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;

        padding: 12px 18px !important;
        border-radius: 18px !important;

        background: rgba(255, 255, 255, 0.58) !important;
        border: 1px solid rgba(255, 255, 255, 0.74) !important;
        box-shadow: 0 12px 32px rgba(40, 32, 22, 0.045) !important;
    }

    .book-compact-number {
        color: var(--accent) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
    }

    .book-compact-title {
        font-size: 17px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.025em !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;

        display: block !important;
    }
}
@media (max-width: 900px) {
    .book-compact-page {
        display: block !important;
        padding-top: 34px !important;
    }

    .book-compact-sidebar {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
    }

    .book-compact-cover {
        width: min(100%, 340px) !important;
        margin: 0 auto !important;
        aspect-ratio: 3 / 4 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .book-compact-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        box-shadow:
            0 24px 70px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .book-compact-info {
        width: min(100%, 420px) !important;
        margin: 20px auto 0 !important;
    }

    .book-compact-list {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }
}
@media (min-width: 901px) {
    .book-compact-list {
        display: block !important;
        columns: 3 !important;
        column-gap: 14px !important;
        max-width: 900px !important;
    }

    .book-compact-row {
        break-inside: avoid !important;
        page-break-inside: avoid !important;

        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;

        min-height: 52px !important;
        margin: 0 0 8px !important;
        padding: 12px 18px !important;
        border-radius: 18px !important;

        background: rgba(255, 255, 255, 0.58) !important;
        border: 1px solid rgba(255, 255, 255, 0.74) !important;
        box-shadow: 0 12px 32px rgba(40, 32, 22, 0.045) !important;
    }

    .book-compact-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: block !important;
    }
}

@media (max-width: 1200px) and (min-width: 901px) {
    .book-compact-list {
        columns: 2 !important;
        max-width: 720px !important;
    }
}

@media (max-width: 700px) {
    .book-compact-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        columns: auto !important;
    }
}
@media (min-width: 901px) {
    .book-compact-list {
        display: block !important;
        columns: 3 !important;
        column-gap: 34px !important;
        max-width: 980px !important;
    }

    .book-compact-row {
        break-inside: avoid !important;

        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: baseline !important;

        min-height: 0 !important;
        margin: 0 0 10px !important;
        padding: 0 !important;

        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .book-compact-row:hover {
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .book-compact-number {
        color: var(--accent) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
    }

    .book-compact-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.28 !important;
        letter-spacing: -0.02em !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: block !important;
    }

    .book-compact-row:hover .book-compact-title {
        color: var(--accent) !important;
    }
}
/* ===== Book detail: clean cover + PDF button width ===== */

@media (min-width: 901px) {
    .book-compact-sidebar {
        width: 380px !important;
        align-items: flex-start !important;
    }

    .book-compact-cover {
        width: 380px !important;
        height: auto !important;
        aspect-ratio: auto !important;

        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .book-compact-cover img {
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
        object-position: center !important;

        display: block !important;
        border-radius: 0 !important;

        box-shadow:
            0 28px 80px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .book-compact-info {
        width: 380px !important;
        box-sizing: border-box !important;
    }

    .book-compact-meta {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .book-compact-meta span {
        flex: 0 0 auto !important;
        min-width: 58px !important;
    }

    .book-pdf-meta-button {
        flex: 0 0 auto !important;
        width: 245px !important;
        min-height: 44px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* ===== Book detail: fix left cover/info overlap ===== */

@media (min-width: 901px) {
    .book-compact-page {
        grid-template-columns: 390px minmax(0, 1fr) !important;
        gap: 72px !important;
        align-items: start !important;
        max-width: 1320px !important;
        padding-top: 42px !important;
    }

    .book-compact-sidebar {
        position: sticky !important;
        top: 112px !important;

        width: 390px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: stretch !important;

        max-height: none !important;
    }

    .book-compact-cover {
        width: 390px !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;

        display: block !important;
        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    .book-compact-cover img {
        width: 100% !important;
        height: auto !important;
        display: block !important;

        object-fit: contain !important;
        object-position: center !important;

        border-radius: 0 !important;
        box-shadow:
            0 28px 80px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .book-compact-info {
        width: 390px !important;
        margin: 0 !important;
        padding: 26px 28px !important;

        border-radius: 28px !important;
        background: rgba(255, 255, 255, 0.76) !important;
        border: 1px solid rgba(255, 255, 255, 0.84) !important;
        box-shadow:
            0 22px 64px rgba(40, 32, 22, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
        backdrop-filter: blur(18px) !important;
    }

    .book-compact-info h1 {
        margin: 0 !important;
        font-size: 42px !important;
        line-height: 1 !important;
        letter-spacing: -0.055em !important;
    }

    .book-compact-meta {
        margin-top: 18px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .book-compact-meta span {
        flex: 0 0 auto !important;
        min-width: 62px !important;
        min-height: 42px !important;
    }

    .book-pdf-meta-button {
        flex: 0 0 auto !important;
        width: 260px !important;
        min-height: 42px !important;
    }
}
/* ===== Fix: info card must not overlap book cover ===== */

@media (min-width: 901px) {
    .book-compact-sidebar {
        width: 380px !important;
        display: block !important;
        position: sticky !important;
        top: 112px !important;
        max-height: none !important;
    }

    .book-compact-cover {
        width: 380px !important;
        height: auto !important;
        aspect-ratio: auto !important;
        display: block !important;
        margin: 0 0 22px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .book-compact-cover img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 0 !important;
        box-shadow:
            0 28px 80px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .book-compact-info {
        position: relative !important;
        z-index: 2 !important;

        width: 380px !important;
        margin: 0 !important;
        padding: 26px 28px !important;

        border-radius: 28px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        border: 1px solid rgba(255, 255, 255, 0.88) !important;
        box-shadow:
            0 22px 64px rgba(40, 32, 22, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(18px) !important;
    }

    .book-compact-info h1 {
        margin: 0 !important;
        font-size: 40px !important;
        line-height: 1 !important;
        letter-spacing: -0.055em !important;
    }

    .book-compact-meta {
        margin-top: 18px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .book-compact-meta span {
        min-width: 62px !important;
        min-height: 42px !important;
        flex: 0 0 auto !important;
    }

    .book-pdf-meta-button {
        width: 260px !important;
        min-height: 42px !important;
        flex: 0 0 auto !important;
    }
}
/* ===== HARD RESET: book sidebar no overlap ===== */

@media (min-width: 901px) {
    .book-compact-sidebar {
        width: 360px !important;
        position: sticky !important;
        top: 112px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        row-gap: 24px !important;
        align-items: start !important;

        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .book-compact-cover {
        width: 360px !important;
        height: 480px !important;
        max-height: 480px !important;

        position: relative !important;
        z-index: 1 !important;

        display: block !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .book-compact-cover img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 0 !important;
        box-shadow:
            0 28px 80px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .book-compact-info {
        width: 360px !important;

        position: relative !important;
        z-index: 2 !important;

        display: block !important;
        margin: 0 !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        padding: 24px 26px !important;
        border-radius: 28px !important;

        background: rgba(255, 255, 255, 0.84) !important;
        border: 1px solid rgba(255, 255, 255, 0.9) !important;
        box-shadow:
            0 22px 64px rgba(40, 32, 22, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(18px) !important;
    }

    .book-compact-info h1 {
        margin: 0 !important;
        font-size: 38px !important;
        line-height: 1 !important;
        letter-spacing: -0.055em !important;
    }

    .book-compact-meta {
        margin-top: 18px !important;

        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .book-compact-meta span {
        min-height: 42px !important;
        padding: 0 12px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .book-pdf-meta-button {
        width: 100% !important;
        min-height: 42px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* ===== Book detail: make info card same width as cover ===== */

@media (min-width: 901px) {
    .book-compact-sidebar {
        width: 340px !important;
        align-items: center !important;
    }

    .book-compact-cover {
        width: 340px !important;
        height: auto !important;
        margin: 0 0 24px 0 !important;
    }

    .book-compact-cover img {
        width: 340px !important;
        height: auto !important;
        display: block !important;
    }

    .book-compact-info {
        width: 340px !important;
        box-sizing: border-box !important;
        padding: 24px 26px !important;
    }

    .book-compact-info h1 {
        font-size: 36px !important;
    }

    .book-compact-meta {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .book-pdf-meta-button {
        width: 100% !important;
    }
}
@media (min-width: 901px) {
    .book-compact-page {
        padding-bottom: 120px !important;
    }

    .book-compact-sidebar {
        padding-bottom: 80px !important;
    }
}
/* ===== Keep left book card fully visible with bottom gap ===== */

@media (min-width: 901px) {
    .book-compact-sidebar {
        position: sticky !important;
        top: 112px !important;

        width: 340px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;

        /* чтобы визуально был воздух снизу */
        max-height: calc(100vh - 150px) !important;
    }

    .book-compact-cover {
        width: 340px !important;

        /*
        Важно: высота обложки зависит от высоты окна.
        Так блок с названием не будет упираться в низ экрана.
        */
        height: min(430px, calc(100vh - 370px)) !important;
        min-height: 330px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    .book-compact-cover img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;

        box-shadow:
            0 28px 80px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .book-compact-info {
        width: 340px !important;
        margin: 0 !important;
        padding: 24px 26px !important;
        box-sizing: border-box !important;
    }

    .book-compact-info h1 {
        font-size: 36px !important;
        line-height: 1 !important;
    }

    .book-compact-meta {
        margin-top: 18px !important;
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .book-pdf-meta-button {
        width: 100% !important;
        min-height: 42px !important;
    }
}
/* ===== Restore full book cover proportions ===== */

@media (min-width: 901px) {
    .book-compact-sidebar {
        width: 340px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        align-items: start !important;
    }

    .book-compact-cover {
        width: 340px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    .book-compact-cover img {
        width: 340px !important;
        height: auto !important;
        max-height: 470px !important;

        object-fit: contain !important;
        object-position: center center !important;

        display: block !important;

        box-shadow:
            0 28px 80px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .book-compact-info {
        width: 340px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}
.album-detail-page {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
    padding-top: 42px;
    padding-bottom: 160px;
}

.album-detail-sidebar {
    position: sticky;
    top: 112px;
    width: 360px;
}

.album-main-cover {
    display: block;
    width: 360px;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 28px 80px rgba(40, 32, 22, 0.14),
        0 8px 22px rgba(40, 32, 22, 0.08);
}

.album-main-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.album-photo-carousel {
    width: 360px;
    margin-top: 16px;
    padding: 2px;
}

.album-photo-carousel .swiper-slide {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    display: block;
    background: #f3eee7;
    cursor: pointer;
}

.album-photo-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.album-photo-carousel .swiper-button-prev,
.album-photo-carousel .swiper-button-next {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    color: #1d1d1f;
    box-shadow: 0 10px 28px rgba(40, 32, 22, 0.14);
}

.album-photo-carousel .swiper-button-prev::after,
.album-photo-carousel .swiper-button-next::after {
    font-size: 13px;
    font-weight: 800;
}

.album-detail-info {
    margin-top: 20px;
    padding: 24px 26px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.84);
    box-shadow:
        0 22px 64px rgba(40, 32, 22, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
}

.album-detail-info h1 {
    margin: 0;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.055em;
}

.album-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.album-detail-meta span {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.album-detail-info p {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.album-detail-content {
    padding-top: 8px;
}

.album-track-list {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.album-track-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px 38px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: 0 12px 32px rgba(40, 32, 22, 0.045);
}

.album-track-number {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.album-track-play {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: #1d1d1f;
    color: white;
    font-size: 11px;
}

.album-track-title {
    min-width: 0;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.25;
}

.album-track-duration {
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 900px) {
    .album-detail-page {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .album-detail-sidebar {
        position: static;
        width: min(100%, 360px);
        margin: 0 auto;
    }

    .album-main-cover,
    .album-photo-carousel {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .album-track-row {
        grid-template-columns: 34px 34px minmax(0, 1fr);
    }

    .album-track-duration {
        display: none;
    }
}
/* ===== Album gallery ===== */

.album-detail-page {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
    padding-top: 42px;
    padding-bottom: 160px;
}

.album-detail-sidebar {
    position: sticky;
    top: 112px;
    width: 380px;
}

.album-main-cover {
    width: 380px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    display: block;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 30px;
    background: #f3eee7;
    box-shadow:
        0 28px 80px rgba(40, 32, 22, 0.14),
        0 8px 22px rgba(40, 32, 22, 0.08);
}

.album-main-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* мини-карусель под обложкой */

.album-thumb-carousel {
    position: relative;
    width: 380px;
    margin-top: 14px;
    padding: 2px 38px;
}

.album-thumb {
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: 16px;
    background: #f3eee7;
    opacity: .72;
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.album-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.album-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* стрелки мини-карусели */

.album-thumb-prev,
.album-thumb-next {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    color: #1d1d1f;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 10px 26px rgba(40, 32, 22, 0.12);
}

.album-thumb-prev {
    left: 0;
}

.album-thumb-next {
    right: 0;
}

/* инфо-блок */

.album-detail-info {
    margin-top: 20px;
    padding: 24px 26px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.84);
    box-shadow:
        0 22px 64px rgba(40, 32, 22, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
}

.album-detail-info h1 {
    margin: 0;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.055em;
}

.album-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.album-detail-meta span {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.album-detail-info p {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

/* ===== Fullscreen gallery ===== */

body.gallery-open {
    overflow: hidden;
}

.album-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    background: rgba(8, 8, 9, 0.94);
    backdrop-filter: blur(12px);
}

.album-lightbox.is-open {
    display: block;
}

.album-lightbox-close {
    position: fixed;
    top: 32px;
    right: 34px;
    z-index: 100002;

    width: 60px;
    height: 60px;

    border: 0;
    border-radius: 50%;

    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    color: white;

    font-size: 42px;
    line-height: 1;
}

.album-lightbox-counter {
    position: fixed;
    top: 42px;
    left: 50%;
    z-index: 100002;
    transform: translateX(-50%);

    color: rgba(255, 255, 255, 0.62);
    font-size: 20px;
    font-weight: 600;
}

.album-lightbox-swiper {
    width: 100%;
    height: 100%;
}

.album-lightbox-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 76px 120px 72px;
}

.album-lightbox-swiper img {
    max-width: min(72vw, 1120px);
    max-height: 82vh;
    object-fit: contain;
    display: block;

    border-radius: 14px;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.42),
        0 14px 38px rgba(0, 0, 0, 0.28);
}

.album-lightbox-prev,
.album-lightbox-next {
    position: fixed;
    top: 50%;
    z-index: 100002;

    width: 66px;
    height: 66px;

    border: 0;
    border-radius: 50%;

    transform: translateY(-50%);
    cursor: pointer;

    background: rgba(255, 255, 255, 0.11);
    color: white;

    font-size: 48px;
    line-height: 1;
}

.album-lightbox-prev {
    left: 44px;
}

.album-lightbox-next {
    right: 44px;
}

.album-lightbox-pagination {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 36px !important;
    z-index: 100002;
}

.album-lightbox-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, 0.42);
    opacity: 1;
}

.album-lightbox-pagination .swiper-pagination-bullet-active {
    background: white;
}

/* адаптив */

@media (max-width: 900px) {
    .album-detail-page {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .album-detail-sidebar {
        position: static;
        width: min(100%, 380px);
        margin: 0 auto;
    }

    .album-main-cover,
    .album-thumb-carousel {
        width: 100%;
    }

    .album-lightbox-swiper .swiper-slide {
        padding: 82px 24px 72px;
    }

    .album-lightbox-swiper img {
        max-width: 94vw;
        max-height: 78vh;
    }

    .album-lightbox-prev,
    .album-lightbox-next {
        width: 52px;
        height: 52px;
        font-size: 38px;
    }

    .album-lightbox-prev {
        left: 14px;
    }

    .album-lightbox-next {
        right: 14px;
    }

    .album-lightbox-close {
        top: 22px;
        right: 18px;
        width: 52px;
        height: 52px;
        font-size: 36px;
    }
}
/* ===== Album detail: compact left column + thin carousel ===== */

@media (min-width: 901px) {
    .album-detail-page {
        grid-template-columns: 380px minmax(0, 1fr) !important;
        gap: 72px !important;
        align-items: start !important;
        max-width: 1320px !important;
        margin: 0 auto !important;
        padding-top: 42px !important;
        padding-bottom: 160px !important;
    }

    .album-detail-sidebar {
        position: sticky !important;
        top: 112px !important;
        width: 380px !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;

        max-height: calc(100vh - 128px) !important;
        overflow: visible !important;
    }

    .album-main-cover {
        width: 380px !important;
        height: 380px !important;
        aspect-ratio: 1 / 1 !important;

        border: 0 !important;
        padding: 0 !important;
        border-radius: 28px !important;
        overflow: hidden !important;

        background: #f3eee7 !important;
        cursor: zoom-in !important;

        box-shadow:
            0 28px 80px rgba(40, 32, 22, 0.14),
            0 8px 22px rgba(40, 32, 22, 0.08) !important;
    }

    .album-main-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Узкая карусель под обложкой */
    .album-thumb-carousel {
        width: 380px !important;
        height: 78px !important;
        margin-top: 0 !important;
        padding: 0 34px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .album-thumb-carousel .swiper-wrapper {
        align-items: center !important;
    }

    .album-thumb {
        height: 78px !important;
        aspect-ratio: 16 / 9 !important;

        padding: 0 !important;
        border: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;

        background: #f3eee7 !important;
        cursor: pointer !important;
        opacity: .7 !important;

        transition:
            opacity .25s ease,
            transform .25s ease !important;
    }

    .album-thumb:hover {
        opacity: 1 !important;
        transform: translateY(-2px) !important;
    }

    .album-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .album-thumb-prev,
    .album-thumb-next {
        position: absolute !important;
        top: 50% !important;
        z-index: 5 !important;

        width: 28px !important;
        height: 28px !important;

        transform: translateY(-50%) !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: rgba(255, 255, 255, 0.9) !important;
        color: #1d1d1f !important;

        font-size: 22px !important;
        line-height: 1 !important;

        cursor: pointer !important;
        box-shadow: 0 10px 26px rgba(40, 32, 22, 0.12) !important;
    }

    .album-thumb-prev {
        left: 0 !important;
    }

    .album-thumb-next {
        right: 0 !important;
    }

    /* Инфо-блок должен аккуратно влезать */
    .album-detail-info {
        width: 380px !important;
        margin-top: 2px !important;
        padding: 22px 24px !important;

        border-radius: 26px !important;
        background: rgba(255, 255, 255, 0.76) !important;
        border: 1px solid rgba(255, 255, 255, 0.84) !important;

        box-shadow:
            0 22px 64px rgba(40, 32, 22, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;

        backdrop-filter: blur(18px) !important;
    }

    .album-detail-info h1 {
        margin: 0 !important;
        font-size: 38px !important;
        line-height: 1 !important;
        letter-spacing: -0.055em !important;
    }

    .album-detail-meta {
        margin-top: 16px !important;
        display: flex !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .album-detail-meta span {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
    }

    .album-detail-info p {
        margin-top: 16px !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .album-detail-content {
        padding-top: 10px !important;
    }
}
.track-row.active .js-play-track,
.album-track-row.active .album-track-play,
.js-play-track.is-playing {
    background: var(--accent) !important;
    color: #fff !important;
}
/* ===== New home hero ===== */

.hero-author {
    min-height: calc(100vh - 96px);
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);
    gap: clamp(48px, 8vw, 120px);
    align-items: center;

    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 7vw 90px;
}

.hero-author .hero-text {
    max-width: 690px;
}

.hero-author h1 {
    margin: 0;
    font-size: clamp(62px, 8vw, 118px);
    line-height: 0.9;
    letter-spacing: -0.075em;
}

.hero-author .hero-subtitle {
    max-width: 640px;
    margin-top: 28px;

    color: var(--muted);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.38;
    letter-spacing: -0.035em;
}

.hero-note {
    margin-top: 34px;
    padding-left: 22px;
    border-left: 2px solid var(--accent);

    color: #55575d;
    font-size: 18px;
    line-height: 1.55;
}

.hero-author .actions {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Правая витрина */

.hero-showcase {
    display: grid;
    gap: 22px;
}

.showcase-card {
    position: relative;
    min-height: 245px;
    padding: 34px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    border-radius: 34px;
    overflow: hidden;

    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.42), transparent 34%),
        rgba(255, 255, 255, 0.62);

    border: 1px solid rgba(255, 255, 255, 0.82);

    box-shadow:
        0 34px 90px rgba(40, 32, 22, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);

    backdrop-filter: blur(18px);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.showcase-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 42px 110px rgba(40, 32, 22, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.showcase-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .92;
    z-index: -1;
}

.showcase-card-book::before {
    background:
        linear-gradient(135deg, rgba(114, 114, 114, .9), rgba(238, 232, 222, .45)),
        url("/static/img/book-pattern.svg");
    background-size: cover;
}

.showcase-card-music::before {
    background:
        linear-gradient(135deg, rgba(10, 18, 44, .95), rgba(184, 157, 95, .34));
}

.showcase-card-music::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -80px;

    width: 260px;
    height: 260px;
    border-radius: 50%;

    background:
        radial-gradient(circle, rgba(255,255,255,.26), transparent 62%);

    opacity: .8;
}

.showcase-label {
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.showcase-title {
    margin-top: 14px;

    color: #1d1d1f;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 850;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.showcase-card-music .showcase-title,
.showcase-card-music .showcase-meta {
    color: white;
}

.showcase-meta {
    margin-top: 14px;

    color: rgba(29, 29, 31, .68);
    font-size: 16px;
    line-height: 1.45;
}

.showcase-card-music .showcase-label {
    color: #d6bb7a;
}

@media (max-width: 1000px) {
    .hero-author {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 56px;
    }

    .hero-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .hero-author {
        padding: 42px 6vw 70px;
    }

    .hero-author h1 {
        font-size: clamp(54px, 18vw, 82px);
    }

    .hero-author .hero-subtitle {
        font-size: 21px;
    }

    .hero-showcase {
        grid-template-columns: 1fr;
    }

    .showcase-card {
        min-height: 210px;
        border-radius: 28px;
        padding: 28px;
    }
}
.site-header,
.site-header a,
.hero-author,
.hero-author h1,
.hero-author .hero-subtitle,
.hero-author .hero-note,
.hero-author .eyebrow,
.hero-author .actions,
.hero-showcase,
.showcase-card {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
/* ===== Typography refresh ===== */

:root {
    --font-sans: 'Golos Text', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
}

html,
body {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
}

/* Убираем излишнюю жирность со всех крупных заголовков */
h1,
h2,
h3,
h4,
.page-title,
.hero-author h1,
.book-compact-info h1,
.album-detail-info h1,
.showcase-title,
.card-title,
.book-title,
.album-title {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    letter-spacing: -0.045em !important;
}

/* Обычный текст */
p,
.meta,
.hero-subtitle,
.hero-note,
.book-compact-title,
.album-track-title,
.nav a,
.site-header,
.btn {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
}

/* Акценты можно оставить чуть плотнее, но не жирными */
.eyebrow,
.book-compact-number,
.album-track-number,
.compact-number,
.showcase-label {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
}

/* Кнопки */
.btn,
button,
.book-pdf-meta-button,
.album-track-play,
.js-play-track {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
}

/* Карточки списков: меньше жирности */
.book-compact-title,
.album-track-title,
.compact-title {
    font-weight: 400 !important;
}

/* Названия карточек книг/альбомов */
.book-tile h2,
.book-tile h3,
.album-tile h2,
.album-tile h3,
.work-card h2,
.work-card h3 {
    font-weight: 500 !important;
}
/* ===== Poem reading typography ===== */

.poem-text,
.poem-body,
.poem-content {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    font-size: clamp(20px, 1.8vw, 25px) !important;
    line-height: 1.85 !important;
    letter-spacing: 0 !important;
}

.poem-detail h1,
.poem-page h1,
.poem-title {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    letter-spacing: -0.045em !important;
}
/* ===== Stable hover volume popup for current base.html ===== */

.global-volume {
    position: relative !important;
}

/* Невидимый мостик между кнопкой и ползунком */
.global-volume::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;

    width: 110px;
    height: 64px;

    transform: translateX(-50%);
    background: transparent;

    pointer-events: auto;
    z-index: 20;
}

.global-volume-button {
    position: relative !important;
    z-index: 25 !important;
}

.global-volume-popup {
    position: absolute !important;
    right: 50% !important;
    bottom: calc(100% + 10px) !important;

    width: 76px !important;
    height: 220px !important;
    padding: 22px 0 !important;

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

    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;

    box-shadow:
        0 24px 70px rgba(29, 29, 31, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    backdrop-filter: blur(18px) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateX(50%) translateY(10px) scale(0.98) !important;
    transform-origin: bottom center !important;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease !important;

    z-index: 30 !important;
}

/* Открыто, пока мышь на кнопке, мостике или самом попапе */
.global-volume:hover .global-volume-popup,
.global-volume:focus-within .global-volume-popup {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(50%) translateY(0) scale(1) !important;
}

.global-volume-range {
    width: 170px !important;
    height: 6px !important;

    transform: rotate(-90deg) !important;

    cursor: pointer !important;
    accent-color: #1d1d1f !important;
}
/* ===== Global player volume: hover only, stable and centered ===== */

.global-volume {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Невидимый мостик от кнопки до попапа, чтобы он не пропадал */
.global-volume::before {
    content: "";
    position: absolute !important;
    left: 50% !important;
    bottom: 100% !important;

    width: 96px !important;
    height: 34px !important;

    transform: translateX(-50%) !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 39 !important;
}

.global-volume-button {
    position: relative !important;
    z-index: 42 !important;
}

/* Сам попап */
.global-volume-popup {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;
    bottom: calc(100% + 8px) !important;

    width: 66px !important;
    height: 190px !important;
    padding: 18px 0 !important;

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

    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;

    box-shadow:
        0 20px 58px rgba(29, 29, 31, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    backdrop-filter: blur(18px) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateX(-50%) translateY(8px) scale(0.98) !important;
    transform-origin: bottom center !important;

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease !important;

    z-index: 40 !important;
}

/* Открывается только при наведении или фокусе */
.global-volume:hover .global-volume-popup,
.global-volume:focus-within .global-volume-popup {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Принудительно отключаем старую фиксацию через is-open */
.global-volume.is-open:not(:hover):not(:focus-within) .global-volume-popup {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(8px) scale(0.98) !important;
}

.global-volume-range {
    width: 145px !important;
    height: 5px !important;

    transform: rotate(-90deg) !important;

    cursor: pointer !important;
    accent-color: #1d1d1f !important;
}
/* ===== Volume popup: hover only, no click/focus lock ===== */

.global-volume {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* мостик между кнопкой и попапом */
.global-volume::before {
    content: "";
    position: absolute !important;
    left: 50% !important;
    bottom: 100% !important;

    width: 96px !important;
    height: 42px !important;

    transform: translateX(-50%) !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 39 !important;
}

.global-volume-popup {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;
    bottom: calc(100% + 8px) !important;

    width: 66px !important;
    height: 190px !important;
    padding: 18px 0 !important;

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

    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;

    box-shadow:
        0 20px 58px rgba(29, 29, 31, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    backdrop-filter: blur(18px) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateX(-50%) translateY(8px) scale(0.98) !important;
    transform-origin: bottom center !important;

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease !important;

    z-index: 40 !important;
}

/* ВАЖНО: только hover, без focus-within */
.global-volume:hover .global-volume-popup {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* отключаем любые старые фиксации */
.global-volume.is-open .global-volume-popup,
.global-volume:focus-within .global-volume-popup {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(8px) scale(0.98) !important;
}

/* но если мышь реально наведена — показываем */
.global-volume:hover .global-volume-popup {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

.global-volume-range {
    width: 145px !important;
    height: 5px !important;

    transform: rotate(-90deg) !important;

    cursor: pointer !important;
    accent-color: #1d1d1f !important;
}
.album-lightbox .swiper-pagination {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;
    bottom: 34px !important;

    width: auto !important;

    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;

    transform: translateX(-50%) !important;

    z-index: 100002 !important;
}
/* ===== Final fix: center lightbox pagination dots ===== */

.album-lightbox .album-lightbox-pagination,
.album-lightbox .swiper-pagination,
.album-lightbox-swiper .swiper-pagination {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 34px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 100010 !important;
    text-align: center !important;
}

.album-lightbox .album-lightbox-pagination.swiper-pagination-horizontal,
.album-lightbox .swiper-pagination-horizontal {
    left: 50% !important;
    right: auto !important;
    bottom: 34px !important;
    transform: translateX(-50%) !important;
}

.album-lightbox .swiper-pagination-bullet {
    display: block !important;

    width: 8px !important;
    height: 8px !important;

    margin: 0 !important;

    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.42) !important;
}

.album-lightbox .swiper-pagination-bullet-active {
    background: #ffffff !important;
}
/* ===== Album cover hover: no zoom cursor, soft image zoom ===== */

.album-main-cover {
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative !important;
}

.album-main-cover img {
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1),
        filter .55s cubic-bezier(.2, .8, .2, 1) !important;
    will-change: transform !important;
}

.album-main-cover:hover img {
    transform: scale(1.045) !important;
    filter: saturate(1.04) contrast(1.03) !important;
}

/* небольшой мягкий блик при наведении */
.album-main-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            transparent 38%,
            transparent 100%
        );

    opacity: 0;
    transition: opacity .45s ease !important;
}

.album-main-cover:hover::after {
    opacity: 1;
}
/* ===== Beautiful fullscreen gallery arrows ===== */

.album-lightbox-prev,
.album-lightbox-next {
    width: 72px !important;
    height: 72px !important;

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

    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;

    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 42%),
        rgba(255, 255, 255, 0.10) !important;

    color: rgba(255, 255, 255, 0.94) !important;

    font-size: 0 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        opacity .25s ease !important;
}

/* рисуем стрелки не текстом, а псевдоэлементом */
.album-lightbox-prev::before,
.album-lightbox-next::before {
    content: "";
    width: 15px;
    height: 15px;

    display: block;

    border-top: 4px solid currentColor;
    border-right: 4px solid currentColor;
}

.album-lightbox-prev::before {
    transform: rotate(-135deg);
    margin-left: 5px;
}

.album-lightbox-next::before {
    transform: rotate(45deg);
    margin-right: 5px;
}

.album-lightbox-prev:hover,
.album-lightbox-next:hover {
    transform: translateY(-50%) scale(1.08) !important;

    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.24), transparent 42%),
        rgba(255, 255, 255, 0.16) !important;

    border-color: rgba(255, 255, 255, 0.22) !important;
}

.album-lightbox-prev:active,
.album-lightbox-next:active {
    transform: translateY(-50%) scale(0.96) !important;
}

.album-lightbox-prev {
    left: clamp(22px, 4vw, 64px) !important;
}

.album-lightbox-next {
    right: clamp(22px, 4vw, 64px) !important;
}
/* ===== Beautiful fullscreen close button ===== */

.album-lightbox-close {
    width: 66px !important;
    height: 66px !important;

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

    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;

    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 42%),
        rgba(255, 255, 255, 0.10) !important;

    color: white !important;
    font-size: 0 !important;

    cursor: pointer !important;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease !important;
}

.album-lightbox-close::before,
.album-lightbox-close::after {
    content: "";
    position: absolute;

    width: 24px;
    height: 4px;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
}

.album-lightbox-close::before {
    transform: rotate(45deg);
}

.album-lightbox-close::after {
    transform: rotate(-45deg);
}

.album-lightbox-close:hover {
    transform: scale(1.08) !important;

    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.24), transparent 42%),
        rgba(255, 255, 255, 0.16) !important;

    border-color: rgba(255, 255, 255, 0.22) !important;
}

.album-lightbox-close:active {
    transform: scale(0.96) !important;
}
/* ===== Lightbox image smooth entrance ===== */

.album-lightbox.is-open .album-lightbox-swiper img {
    animation: lightboxImageIn .34s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes lightboxImageIn {
    from {
        opacity: 0;
        transform: scale(.965);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ===== Album thumbnails carousel: clean background + better arrows ===== */

.album-thumb-carousel {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;

    width: 380px !important;
    height: 86px !important;

    margin-top: 14px !important;
    padding: 0 28px !important;

    overflow: hidden !important;
}

.album-thumb-carousel .swiper-wrapper {
    align-items: center !important;
}

.album-thumb {
    height: 78px !important;
    border-radius: 18px !important;

    background: transparent !important;
    border: none !important;
    box-shadow:
        0 12px 28px rgba(40, 32, 22, 0.10) !important;

    opacity: 0.72 !important;
    overflow: hidden !important;

    transition:
        opacity .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}

.album-thumb:hover {
    opacity: 1 !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow:
        0 18px 42px rgba(40, 32, 22, 0.15) !important;
}

.album-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* убираем старый вид кнопок */
.album-thumb-prev,
.album-thumb-next {
    position: absolute !important;
    top: 50% !important;
    z-index: 10 !important;

    width: 34px !important;
    height: 34px !important;

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

    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.72) !important;
    color: #1d1d1f !important;

    font-size: 0 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    transform: translateY(-50%) !important;

    box-shadow:
        0 12px 30px rgba(40, 32, 22, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        opacity .2s ease !important;
}

.album-thumb-prev {
    left: 0 !important;
}

.album-thumb-next {
    right: 0 !important;
}

.album-thumb-prev::before,
.album-thumb-next::before {
    content: "";
    width: 9px;
    height: 9px;
    display: block;

    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.album-thumb-prev::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.album-thumb-next::before {
    transform: rotate(45deg);
    margin-right: 3px;
}

.album-thumb-prev:hover,
.album-thumb-next:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow:
        0 16px 38px rgba(40, 32, 22, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.album-thumb-prev:active,
.album-thumb-next:active {
    transform: translateY(-50%) scale(0.96) !important;
}
/* ===== Album thumbnail carousel: no color seams, arrows outside photos ===== */

.album-thumb-carousel {
    width: 380px !important;
    height: 86px !important;

    margin-top: 14px !important;

    /* место под стрелки слева и справа */
    padding: 0 46px !important;

    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
    position: relative !important;
}

.album-thumb-carousel::before,
.album-thumb-carousel::after {
    display: none !important;
    content: none !important;
}

.album-thumb-carousel .swiper {
    background: transparent !important;
}

.album-thumb-carousel .swiper-wrapper {
    align-items: center !important;
    background: transparent !important;
}

.album-thumb-carousel .swiper-slide {
    background: transparent !important;
}

.album-thumb {
    height: 78px !important;
    border-radius: 16px !important;

    background: transparent !important;
    border: 0 !important;

    box-shadow:
        0 12px 28px rgba(40, 32, 22, 0.10) !important;

    overflow: hidden !important;
    opacity: 0.74 !important;

    transition:
        opacity .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}

.album-thumb:hover {
    opacity: 1 !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 18px 42px rgba(40, 32, 22, 0.14) !important;
}

.album-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* стрелки стоят в отдельной зоне и не налезают на фото */
.album-thumb-prev,
.album-thumb-next {
    position: absolute !important;
    top: 50% !important;

    width: 34px !important;
    height: 34px !important;

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

    transform: translateY(-50%) !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.78) !important;
    color: rgba(29, 29, 31, 0.78) !important;

    box-shadow:
        0 10px 26px rgba(40, 32, 22, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    font-size: 0 !important;
    cursor: pointer !important;
    z-index: 20 !important;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease !important;
}

.album-thumb-prev {
    left: 4px !important;
}

.album-thumb-next {
    right: 4px !important;
}

.album-thumb-prev::before,
.album-thumb-next::before {
    content: "";
    width: 10px;
    height: 10px;

    display: block;

    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.album-thumb-prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.album-thumb-next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

.album-thumb-prev:hover,
.album-thumb-next:hover {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #1d1d1f !important;

    transform: translateY(-50%) scale(1.08) !important;

    box-shadow:
        0 14px 34px rgba(40, 32, 22, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
/* =========================================================
   RESPONSIVE FINAL LAYER
   ========================================================= */

/* ---------- Base safety ---------- */

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}


/* =========================================================
   1. LARGE / DESKTOP NORMALIZATION
   ========================================================= */

@media (min-width: 1200px) {
    .section {
        padding-left: clamp(48px, 6vw, 120px) !important;
        padding-right: clamp(48px, 6vw, 120px) !important;
    }

    .site-header {
        padding-left: clamp(48px, 7vw, 128px) !important;
        padding-right: clamp(48px, 7vw, 128px) !important;
    }
}


/* =========================================================
   2. MEDIUM DESKTOP / NOTEBOOKS
   ========================================================= */

@media (max-width: 1439px) and (min-width: 1001px) {
    .hero-author {
        grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.7fr) !important;
        gap: 64px !important;
        padding-left: 7vw !important;
        padding-right: 7vw !important;
    }

    .hero-author h1 {
        font-size: clamp(72px, 8vw, 104px) !important;
    }

    .hero-author .hero-subtitle {
        font-size: 26px !important;
    }

    .showcase-card {
        min-height: 220px !important;
        padding: 30px !important;
    }

    .showcase-title {
        font-size: 44px !important;
    }

    .book-grid,
    .album-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 48px 36px !important;
    }
}


/* =========================================================
   3. SMALL NOTEBOOKS
   ========================================================= */

@media (max-width: 1199px) and (min-width: 901px) {
    .site-header {
        padding: 22px 48px !important;
    }

    .hero-author {
        min-height: auto !important;
        grid-template-columns: 1fr 0.8fr !important;
        gap: 48px !important;
        padding: 64px 48px 86px !important;
    }

    .hero-author h1 {
        font-size: clamp(62px, 8vw, 88px) !important;
        line-height: 0.94 !important;
    }

    .hero-author .hero-subtitle {
        font-size: 23px !important;
        line-height: 1.4 !important;
    }

    .hero-note {
        font-size: 16px !important;
    }

    .showcase-card {
        min-height: 190px !important;
        padding: 26px !important;
        border-radius: 28px !important;
    }

    .showcase-title {
        font-size: 38px !important;
    }

    /* списки книг / альбомов */
    .book-grid,
    .album-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 44px 34px !important;
    }

    /* страница книги */
    .book-compact-page {
        grid-template-columns: 310px minmax(0, 1fr) !important;
        gap: 48px !important;
        padding-left: 44px !important;
        padding-right: 44px !important;
    }

    .book-compact-sidebar,
    .book-compact-cover,
    .book-compact-cover img,
    .book-compact-info {
        width: 310px !important;
    }

    .book-compact-info h1 {
        font-size: 32px !important;
    }

    .book-compact-list {
        columns: 3 !important;
        column-gap: 32px !important;
    }

    .book-compact-title {
        font-size: 15px !important;
    }

    /* страница альбома */
    .album-detail-page {
        grid-template-columns: 340px minmax(0, 1fr) !important;
        gap: 48px !important;
        padding-left: 44px !important;
        padding-right: 44px !important;
    }

    .album-detail-sidebar,
    .album-main-cover,
    .album-detail-info,
    .album-thumb-carousel {
        width: 340px !important;
    }

    .album-main-cover {
        height: 340px !important;
    }

    .album-thumb-carousel {
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    .album-detail-info h1 {
        font-size: 34px !important;
    }

    .album-track-row {
        min-height: 58px !important;
        grid-template-columns: 42px 38px minmax(0, 1fr) auto !important;
    }
}


/* =========================================================
   4. TABLETS
   ========================================================= */

@media (max-width: 900px) {
    .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;

        padding: 18px 28px !important;
    }

    .nav {
        display: none !important;
    }

    .menu-toggle {
        display: inline-flex !important;
    }

    .mobile-menu.open {
        display: grid !important;
    }

    main {
        padding-top: 0 !important;
    }

    .section {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    /* главная */
    .hero-author {
        min-height: auto !important;
        grid-template-columns: 1fr !important;
        gap: 44px !important;

        padding: 56px 28px 76px !important;
    }

    .hero-author h1 {
        font-size: clamp(56px, 13vw, 92px) !important;
        line-height: 0.92 !important;
    }

    .hero-author .hero-subtitle {
        font-size: 23px !important;
        max-width: 620px !important;
    }

    .hero-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .showcase-card {
        min-height: 190px !important;
        padding: 26px !important;
        border-radius: 28px !important;
    }

    .showcase-title {
        font-size: 36px !important;
    }

    /* списки */
    .book-grid,
    .album-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 38px 24px !important;
    }

    .book-card,
    .album-card,
    .work-card {
        max-width: none !important;
    }

    /* детальная книги */
    .book-compact-page {
        display: block !important;
        padding: 36px 28px 110px !important;
    }

    .book-compact-sidebar {
        position: static !important;
        width: min(100%, 420px) !important;
        margin: 0 auto 44px !important;
        display: grid !important;
        gap: 20px !important;
    }

    .book-compact-cover,
    .book-compact-cover img,
    .book-compact-info {
        width: 100% !important;
    }

    .book-compact-cover img {
        height: auto !important;
    }

    .book-compact-info {
        padding: 24px !important;
    }

    .book-compact-info h1 {
        font-size: 36px !important;
    }

    .book-compact-content {
        width: 100% !important;
    }

    .book-compact-list {
        columns: 2 !important;
        column-gap: 28px !important;
    }

    .book-compact-row {
        height: 54px !important;
    }

    /* детальная альбома */
    .album-detail-page {
        display: block !important;
        padding: 36px 28px 130px !important;
    }

    .album-detail-sidebar {
        position: static !important;
        width: min(100%, 430px) !important;
        margin: 0 auto 44px !important;
    }

    .album-main-cover {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .album-thumb-carousel {
        width: 100% !important;
        padding-left: 46px !important;
        padding-right: 46px !important;
    }

    .album-detail-info {
        width: 100% !important;
    }

    .album-detail-content {
        padding-top: 0 !important;
    }

    .album-track-row {
        grid-template-columns: 38px 38px minmax(0, 1fr) auto !important;
        gap: 12px !important;
        min-height: 60px !important;
        padding: 12px 16px !important;
    }

    .album-track-title {
        font-size: 16px !important;
    }

    /* плеер */
    .global-player {
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
        width: auto !important;

        grid-template-columns: 62px minmax(0, 1fr) auto !important;
        gap: 14px !important;

        padding: 14px !important;
        border-radius: 28px !important;
    }

    .global-player-cover {
        width: 62px !important;
        height: 62px !important;
    }

    .global-player-actions {
        gap: 8px !important;
    }

    .global-player-side-button {
        width: 42px !important;
        height: 42px !important;
    }

    .global-player-main-button {
        width: 56px !important;
        height: 56px !important;
    }
}


/* =========================================================
   5. PHONES
   ========================================================= */

@media (max-width: 700px) {
    .site-header {
        padding: 16px 20px !important;
    }

    .logo {
        font-size: 17px !important;
    }

    .menu-toggle {
        min-height: 38px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
    }

    .mobile-menu {
        top: 70px !important;
        left: 14px !important;
        right: 14px !important;
        border-radius: 24px !important;
    }

    .section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* главная */
    .hero-author {
        padding: 42px 20px 70px !important;
        gap: 34px !important;
    }

    .hero-author h1 {
        font-size: clamp(52px, 18vw, 78px) !important;
        line-height: 0.92 !important;
        letter-spacing: -0.065em !important;
    }

    .hero-author .hero-subtitle {
        margin-top: 24px !important;
        font-size: 20px !important;
        line-height: 1.45 !important;
    }

    .hero-note {
        margin-top: 28px !important;
        font-size: 15px !important;
        padding-left: 16px !important;
    }

    .hero-showcase {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .showcase-card {
        min-height: 180px !important;
        padding: 24px !important;
        border-radius: 26px !important;
    }

    .showcase-title {
        font-size: 34px !important;
    }

    /* списки книг/альбомов */
    .book-grid,
    .album-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .book-card img,
    .album-card img,
    .work-card img {
        border-radius: 24px !important;
    }

    .book-card h2,
    .album-card h2,
    .work-card h2 {
        font-size: 26px !important;
    }

    /* детальная книги */
    .book-compact-page {
        padding: 28px 18px 120px !important;
    }

    .book-compact-sidebar {
        width: 100% !important;
        margin-bottom: 34px !important;
    }

    .book-compact-info {
        border-radius: 24px !important;
        padding: 22px !important;
    }

    .book-compact-info h1 {
        font-size: 34px !important;
    }

    .book-compact-meta {
        grid-template-columns: 1fr !important;
    }

    .book-pdf-meta-button {
        width: 100% !important;
    }

    .book-compact-list {
        columns: 1 !important;
        column-gap: 0 !important;
    }

    .book-compact-row {
        height: auto !important;
        min-height: 52px !important;

        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;

        padding: 10px 0 !important;
    }

    .book-compact-title {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        font-size: 17px !important;
    }

    /* стихотворение */
    .poem-detail,
    .poem-page {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        font-size: clamp(36px, 12vw, 54px) !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 19px !important;
        line-height: 1.75 !important;
    }

    /* детальная альбома */
    .album-detail-page {
        padding: 28px 18px 140px !important;
    }

    .album-detail-sidebar {
        width: 100% !important;
        margin-bottom: 34px !important;
    }

    .album-main-cover {
        border-radius: 24px !important;
    }

    .album-thumb-carousel {
        width: 100% !important;
        height: 76px !important;
        padding-left: 38px !important;
        padding-right: 38px !important;
    }

    .album-thumb {
        height: 68px !important;
        border-radius: 14px !important;
    }

    .album-thumb-prev,
    .album-thumb-next {
        width: 30px !important;
        height: 30px !important;
    }

    .album-detail-info {
        border-radius: 24px !important;
        padding: 22px !important;
    }

    .album-detail-info h1 {
        font-size: 36px !important;
    }

    .album-track-row {
        grid-template-columns: 34px 36px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: 58px !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
    }

    .album-track-duration {
        display: none !important;
    }

    .album-track-title {
        font-size: 16px !important;
    }

    /* fullscreen gallery */
    .album-lightbox-close {
        top: 18px !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }

    .album-lightbox-counter {
        top: 30px !important;
        font-size: 16px !important;
    }

    .album-lightbox-swiper .swiper-slide {
        padding: 76px 18px 72px !important;
    }

    .album-lightbox-swiper img {
        max-width: 94vw !important;
        max-height: 76vh !important;
        border-radius: 12px !important;
    }

    .album-lightbox-prev,
    .album-lightbox-next {
        width: 52px !important;
        height: 52px !important;
    }

    .album-lightbox-prev {
        left: 12px !important;
    }

    .album-lightbox-next {
        right: 12px !important;
    }

    .album-lightbox-pagination,
    .album-lightbox .swiper-pagination {
        bottom: 28px !important;
    }
}


/* =========================================================
   6. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 430px) {
    .hero-author h1 {
        font-size: 50px !important;
    }

    .hero-author .hero-subtitle {
        font-size: 18px !important;
    }

    .showcase-title {
        font-size: 30px !important;
    }

    .album-detail-info h1,
    .book-compact-info h1 {
        font-size: 30px !important;
    }

    .album-track-row {
        grid-template-columns: 30px 34px minmax(0, 1fr) !important;
    }

    .album-track-number {
        font-size: 12px !important;
    }

    .global-player {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;

        grid-template-columns: 52px minmax(0, 1fr) !important;
        grid-template-areas:
            "cover text"
            "progress progress"
            "actions actions" !important;

        padding: 12px !important;
        gap: 10px !important;
        border-radius: 24px !important;
    }

    .global-player-cover {
        grid-area: cover !important;
        width: 52px !important;
        height: 52px !important;
    }

    .global-player-content {
        grid-area: text !important;
        min-width: 0 !important;
    }

    .global-player-progress-wrap {
        grid-area: progress !important;
    }

    .global-player-actions {
        grid-area: actions !important;
        justify-content: center !important;
    }

    .global-player-title {
        font-size: 16px !important;
    }

    .global-player-album {
        font-size: 13px !important;
    }

    .global-player-side-button {
        width: 38px !important;
        height: 38px !important;
    }

    .global-player-main-button {
        width: 50px !important;
        height: 50px !important;
    }

    .global-volume-popup {
        bottom: calc(100% + 8px) !important;
        height: 170px !important;
    }

    .global-volume-range {
        width: 125px !important;
    }
}
/* =========================================================
   FIX ALBUM DETAIL FOR NOTEBOOKS
   ========================================================= */

@media (min-width: 901px) and (max-width: 1500px) {
    .album-detail-page {
        max-width: 1360px !important;
        grid-template-columns: 420px minmax(0, 1fr) !important;
        gap: 56px !important;

        padding-left: 72px !important;
        padding-right: 72px !important;
        padding-top: 52px !important;
        padding-bottom: 150px !important;

        align-items: start !important;
    }

    .album-detail-sidebar {
        width: 420px !important;
        max-width: 420px !important;

        position: sticky !important;
        top: 112px !important;
    }

    .album-gallery {
        width: 420px !important;
        max-width: 420px !important;
    }

    .album-main-cover {
        width: 420px !important;
        height: 420px !important;
        aspect-ratio: 1 / 1 !important;

        border-radius: 30px !important;
    }

    .album-main-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .album-thumb-carousel {
        width: 420px !important;
        max-width: 420px !important;

        height: 84px !important;
        margin-top: 14px !important;

        padding-left: 44px !important;
        padding-right: 44px !important;

        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .album-thumb {
        height: 72px !important;
        border-radius: 15px !important;
    }

    .album-thumb-prev,
    .album-thumb-next {
        width: 32px !important;
        height: 32px !important;
    }

    .album-thumb-prev {
        left: 2px !important;
    }

    .album-thumb-next {
        right: 2px !important;
    }

    .album-detail-info {
        width: 420px !important;
        max-width: 420px !important;

        margin-top: 16px !important;
        padding: 24px 26px !important;
    }

    .album-detail-info h1 {
        font-size: 38px !important;
    }

    .album-detail-content {
        min-width: 0 !important;
        padding-top: 20px !important;
    }

    .album-track-list {
        width: 100% !important;
        max-width: 720px !important;
    }

    .album-track-row {
        min-height: 64px !important;
        padding: 14px 20px !important;

        grid-template-columns: 42px 42px minmax(0, 1fr) auto !important;
    }
}
/* =========================================================
   LOW HEIGHT NOTEBOOKS: 1366x768 / 1440x800
   ========================================================= */

@media (min-width: 901px) and (max-height: 820px) {
    .album-detail-page {
        padding-top: 42px !important;
        grid-template-columns: 390px minmax(0, 1fr) !important;
        gap: 52px !important;
    }

    .album-detail-sidebar,
    .album-gallery,
    .album-detail-info {
        width: 390px !important;
        max-width: 390px !important;
    }

    .album-main-cover {
        width: 390px !important;
        height: 390px !important;
    }

    .album-thumb-carousel {
        width: 390px !important;
        max-width: 390px !important;

        height: 76px !important;
        margin-top: 12px !important;

        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .album-thumb {
        height: 64px !important;
        border-radius: 14px !important;
    }

    .album-detail-info {
        margin-top: 14px !important;
        padding: 22px 24px !important;
    }

    .album-detail-info h1 {
        font-size: 34px !important;
    }

    .album-detail-meta {
        margin-top: 14px !important;
    }

    .album-detail-meta span {
        min-height: 36px !important;
        font-size: 13px !important;
    }

    .album-track-row {
        min-height: 58px !important;
        padding: 12px 18px !important;
    }

    .album-track-title {
        font-size: 18px !important;
    }
}
/* Не даём карусели выходить за левую колонку */
.album-gallery,
.album-thumb-carousel,
.album-thumb-carousel .swiper-wrapper {
    max-width: 100% !important;
}

.album-thumb-carousel {
    box-sizing: border-box !important;
}

.album-thumb-carousel .swiper-slide {
    flex-shrink: 0 !important;
}
/* =========================================================
   POEM DETAIL: NOTEBOOK / 1440x900 FIX
   ========================================================= */

@media (min-width: 901px) and (max-width: 1500px) {
    .poem-detail,
    .poem-page,
    .poem-detail-page {
        padding-top: 34px !important;
        padding-bottom: 90px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .poem-container,
    .poem-card,
    .poem-reading-card {
        max-width: 760px !important;
        width: min(760px, calc(100vw - 64px)) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 48px 64px 56px !important;
        border-radius: 30px !important;
    }

    .breadcrumbs,
    .poem-breadcrumbs {
        max-width: 760px !important;
        width: min(760px, calc(100vw - 64px)) !important;

        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 22px !important;

        font-size: 13px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        margin-top: 12px !important;
        margin-bottom: 28px !important;

        font-size: 46px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.045em !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 21px !important;
        line-height: 1.65 !important;
        letter-spacing: -0.005em !important;
    }

    .poem-text p,
    .poem-body p,
    .poem-content p {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }
}
/* =========================================================
   POEM DETAIL FINAL RESPONSIVE
   ========================================================= */

/* базовая защита */
.poem-detail,
.poem-page,
.poem-detail-page {
    width: 100%;
    overflow-x: hidden;
}

/* общий вид карточки */
.poem-container,
.poem-card,
.poem-reading-card {
    box-sizing: border-box !important;
}

/* =========================================================
   LARGE DESKTOP: 1600+
   ========================================================= */

@media (min-width: 1501px) {
    .poem-detail,
    .poem-page,
    .poem-detail-page {
        padding: 56px 32px 120px !important;
    }

    .breadcrumbs,
    .poem-breadcrumbs {
        max-width: 920px !important;
        margin: 0 auto 28px !important;
        font-size: 14px !important;
    }

    .poem-container,
    .poem-card,
    .poem-reading-card {
        width: min(920px, calc(100vw - 64px)) !important;
        max-width: 920px !important;

        margin: 0 auto !important;
        padding: 64px 88px 76px !important;

        border-radius: 34px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        margin: 18px 0 38px !important;

        font-size: 56px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.055em !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 23px !important;
        line-height: 1.72 !important;
    }
}


/* =========================================================
   NORMAL NOTEBOOKS: 1200–1500
   например 1440x900
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1500px) {
    .poem-detail,
    .poem-page,
    .poem-detail-page {
        padding: 34px 32px 96px !important;
    }

    .breadcrumbs,
    .poem-breadcrumbs {
        width: min(760px, calc(100vw - 64px)) !important;
        max-width: 760px !important;

        margin: 0 auto 20px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .poem-container,
    .poem-card,
    .poem-reading-card {
        width: min(760px, calc(100vw - 64px)) !important;
        max-width: 760px !important;

        margin: 0 auto !important;
        padding: 42px 58px 52px !important;

        border-radius: 30px !important;
    }

    .poem-detail .eyebrow,
    .poem-page .eyebrow,
    .poem-card .eyebrow,
    .poem-reading-card .eyebrow {
        font-size: 12px !important;
        letter-spacing: 0.11em !important;
        margin-bottom: 16px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        margin: 10px 0 30px !important;

        font-size: 42px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.045em !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 20px !important;
        line-height: 1.62 !important;
        letter-spacing: 0 !important;
    }

    .poem-text p,
    .poem-body p,
    .poem-content p {
        margin: 0 0 22px !important;
    }
}


/* =========================================================
   LOW HEIGHT NOTEBOOKS: 1366x768 / 1440x800
   ========================================================= */

@media (min-width: 901px) and (max-height: 820px) {
    .poem-detail,
    .poem-page,
    .poem-detail-page {
        padding-top: 26px !important;
        padding-bottom: 80px !important;
    }

    .breadcrumbs,
    .poem-breadcrumbs {
        width: min(720px, calc(100vw - 64px)) !important;
        max-width: 720px !important;

        margin-bottom: 16px !important;
        font-size: 12px !important;
    }

    .poem-container,
    .poem-card,
    .poem-reading-card {
        width: min(720px, calc(100vw - 64px)) !important;
        max-width: 720px !important;

        padding: 34px 52px 42px !important;
        border-radius: 28px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        margin: 8px 0 24px !important;

        font-size: 38px !important;
        line-height: 1.08 !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 19px !important;
        line-height: 1.55 !important;
    }

    .poem-text p,
    .poem-body p,
    .poem-content p {
        margin-bottom: 18px !important;
    }
}


/* =========================================================
   SMALL NOTEBOOKS / TABLETS: 901–1199
   ========================================================= */

@media (min-width: 901px) and (max-width: 1199px) {
    .poem-detail,
    .poem-page,
    .poem-detail-page {
        padding: 30px 28px 90px !important;
    }

    .breadcrumbs,
    .poem-breadcrumbs {
        width: min(700px, calc(100vw - 56px)) !important;
        max-width: 700px !important;

        margin: 0 auto 18px !important;
        font-size: 12px !important;
    }

    .poem-container,
    .poem-card,
    .poem-reading-card {
        width: min(700px, calc(100vw - 56px)) !important;
        max-width: 700px !important;

        margin: 0 auto !important;
        padding: 36px 48px 46px !important;

        border-radius: 28px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        margin: 8px 0 26px !important;

        font-size: 38px !important;
        line-height: 1.08 !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 19px !important;
        line-height: 1.58 !important;
    }
}


/* =========================================================
   TABLETS: до 900
   ========================================================= */

@media (max-width: 900px) {
    .poem-detail,
    .poem-page,
    .poem-detail-page {
        padding: 28px 24px 110px !important;
    }

    .breadcrumbs,
    .poem-breadcrumbs {
        width: 100% !important;
        max-width: 680px !important;

        margin: 0 auto 18px !important;
        font-size: 12px !important;
    }

    .poem-container,
    .poem-card,
    .poem-reading-card {
        width: 100% !important;
        max-width: 680px !important;

        margin: 0 auto !important;
        padding: 34px 36px 42px !important;

        border-radius: 26px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        margin: 8px 0 24px !important;

        font-size: clamp(34px, 7vw, 44px) !important;
        line-height: 1.08 !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 19px !important;
        line-height: 1.6 !important;
    }
}


/* =========================================================
   PHONES: до 700
   ========================================================= */

@media (max-width: 700px) {
    .poem-detail,
    .poem-page,
    .poem-detail-page {
        padding: 22px 16px 120px !important;
    }

    .breadcrumbs,
    .poem-breadcrumbs {
        margin-bottom: 14px !important;
        font-size: 12px !important;
    }

    .poem-container,
    .poem-card,
    .poem-reading-card {
        padding: 28px 22px 34px !important;
        border-radius: 24px !important;
    }

    .poem-detail .eyebrow,
    .poem-page .eyebrow,
    .poem-card .eyebrow,
    .poem-reading-card .eyebrow {
        font-size: 11px !important;
        margin-bottom: 12px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        margin: 6px 0 22px !important;

        font-size: clamp(32px, 10vw, 42px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 18px !important;
        line-height: 1.62 !important;
    }

    .poem-text p,
    .poem-body p,
    .poem-content p {
        margin-bottom: 18px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES: до 430
   ========================================================= */

@media (max-width: 430px) {
    .poem-detail,
    .poem-page,
    .poem-detail-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .poem-container,
    .poem-card,
    .poem-reading-card {
        padding: 24px 18px 30px !important;
        border-radius: 22px !important;
    }

    .poem-detail h1,
    .poem-page h1,
    .poem-title {
        font-size: 31px !important;
    }

    .poem-text,
    .poem-body,
    .poem-content {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }
}
/* =========================================================
   CARD IMAGES STABILITY FIX
   ========================================================= */

.book-card img,
.album-card img,
.work-card img,
.card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.book-card,
.album-card,
.work-card {
    overflow: visible !important;
}

.book-card-cover,
.album-card-cover,
.work-card-cover {
    overflow: hidden !important;
    border-radius: inherit !important;
}

/* если где-то картинки остаются прозрачными после Turbo-перехода */
.book-card img,
.album-card img,
.work-card img {
    opacity: 1 !important;
    visibility: visible !important;
}
/* =========================================================
   SWIPER / TURBO IMAGE STABILITY FIX
   ========================================================= */

.album-gallery,
.album-main-cover,
.album-thumb-carousel {
    max-width: 100% !important;
}

.album-thumb-carousel {
    overflow: hidden !important;
}

.album-thumb-carousel .swiper-wrapper {
    align-items: center !important;
}

.album-thumb-carousel .swiper-slide {
    flex-shrink: 0 !important;
    width: auto;
}

.album-main-cover img,
.album-thumb img {
    display: block !important;
}

/* Миниатюры можно оставить с cover, чтобы они были красивыми */
.album-thumb img {
    object-fit: cover !important;
}

/* =========================================================
   FINAL ALBUM DETAIL STABLE LAYOUT
   ========================================================= */

.album-detail-page {
    align-items: flex-start !important;
}

.album-detail-sidebar {
    min-width: 0 !important;
}

.album-gallery {
    width: 420px !important;
    max-width: 420px !important;
    overflow: visible !important;
}

.album-main-cover {
    width: 420px !important;
    height: 420px !important;
    aspect-ratio: 1 / 1 !important;

    display: block !important;
    overflow: hidden !important;

    border-radius: 32px !important;
    background: #f7f3ec !important;
}

.album-main-cover img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;
}

.album-thumb-carousel {
    width: 420px !important;
    max-width: 420px !important;

    height: 86px !important;
    margin-top: 18px !important;

    padding-left: 48px !important;
    padding-right: 48px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.album-thumb-carousel .swiper-wrapper {
    align-items: center !important;
}

.album-thumb-carousel .swiper-slide {
    width: 74px !important;
    height: 74px !important;
    flex-shrink: 0 !important;
}

.album-thumb {
    width: 74px !important;
    height: 74px !important;

    display: block !important;

    overflow: hidden !important;
    border-radius: 16px !important;

    background: transparent !important;
    border: 0 !important;
}

.album-thumb img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;
}

.album-thumb-prev,
.album-thumb-next {
    position: absolute !important;
    top: 50% !important;

    width: 36px !important;
    height: 36px !important;

    transform: translateY(-50%) !important;

    z-index: 20 !important;
}

.album-thumb-prev {
    left: 4px !important;
}

.album-thumb-next {
    right: 4px !important;
}


/* ---------- notebook ---------- */

@media (min-width: 901px) and (max-width: 1500px) {
    .album-detail-page {
        grid-template-columns: 420px minmax(0, 1fr) !important;
        gap: 56px !important;

        max-width: 1380px !important;

        padding-top: 56px !important;
        padding-left: 72px !important;
        padding-right: 72px !important;
    }

    .album-detail-sidebar,
    .album-gallery,
    .album-main-cover,
    .album-detail-info,
    .album-thumb-carousel {
        width: 420px !important;
        max-width: 420px !important;
    }

    .album-main-cover {
        height: 420px !important;
    }

    .album-track-list {
        max-width: 760px !important;
    }
}


/* ---------- low height notebooks ---------- */

@media (min-width: 901px) and (max-height: 820px) {
    .album-detail-page {
        grid-template-columns: 380px minmax(0, 1fr) !important;
        gap: 54px !important;

        padding-top: 42px !important;
    }

    .album-detail-sidebar,
    .album-gallery,
    .album-main-cover,
    .album-detail-info,
    .album-thumb-carousel {
        width: 380px !important;
        max-width: 380px !important;
    }

    .album-main-cover {
        height: 380px !important;
    }

    .album-thumb-carousel {
        height: 78px !important;
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    .album-thumb-carousel .swiper-slide,
    .album-thumb {
        width: 64px !important;
        height: 64px !important;
    }
}


/* ---------- tablet / phone ---------- */

@media (max-width: 900px) {
    .album-detail-sidebar,
    .album-gallery,
    .album-main-cover,
    .album-detail-info,
    .album-thumb-carousel {
        width: 100% !important;
        max-width: 430px !important;
    }

    .album-main-cover {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .album-thumb-carousel {
        height: 78px !important;
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    .album-thumb-carousel .swiper-slide,
    .album-thumb {
        width: 64px !important;
        height: 64px !important;
    }
}
/* =========================================================
   ALBUM GALLERY CLICK FIX
   ========================================================= */

.album-main-cover,
.album-thumb,
.album-thumb-prev,
.album-thumb-next,
.album-lightbox-close,
.album-lightbox-prev,
.album-lightbox-next {
    pointer-events: auto !important;
}

.album-main-cover {
    cursor: pointer !important;
}

.album-main-cover::after {
    pointer-events: none !important;
}

.album-thumb-carousel {
    position: relative !important;
}

.album-thumb-prev,
.album-thumb-next {
    z-index: 50 !important;
}

.album-lightbox {
    z-index: 99999 !important;
}

.album-lightbox.is-open {
    display: block !important;
}

body.gallery-open {
    overflow: hidden !important;
}
/* =========================================================
   MOBILE FINAL HARD FIX
   ========================================================= */

@media (max-width: 700px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        font-size: 16px !important;
    }

    .site-header {
        height: auto !important;
        min-height: 82px !important;
        padding: 18px 20px !important;

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

    .logo {
        font-size: 25px !important;
        line-height: 1.1 !important;
        letter-spacing: -0.04em !important;
        max-width: 220px !important;
    }

    .menu-toggle {
        width: auto !important;
        min-width: 116px !important;
        height: 58px !important;
        padding: 0 26px !important;

        border-radius: 999px !important;

        font-size: 22px !important;
        font-weight: 500 !important;
    }

    main {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .section {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}


/* =========================================================
   MOBILE HOME / ABOUT FIX
   ========================================================= */

@media (max-width: 700px) {
    .home-about-section {
        padding: 34px 18px 120px !important;
    }

    .home-about-card {
        width: 100% !important;
        max-width: none !important;

        padding: 38px 36px !important;
        border-radius: 34px !important;
    }

    .home-about-card .eyebrow {
        font-size: 14px !important;
        margin-bottom: 32px !important;
    }

    .home-about-text {
        margin-top: 0 !important;

        font-size: 28px !important;
        line-height: 1.55 !important;
        letter-spacing: -0.035em !important;
    }

    .home-about-text p {
        margin-bottom: 34px !important;
    }
}

@media (max-width: 430px) {
    .home-about-card {
        padding: 34px 34px !important;
    }

    .home-about-text {
        font-size: 26px !important;
        line-height: 1.55 !important;
    }
}


/* =========================================================
   MOBILE ALBUM DETAIL FIX
   ========================================================= */

@media (max-width: 700px) {
    .album-detail-page {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 34px 18px 180px !important;
        margin: 0 !important;
    }

    .album-detail-sidebar {
        position: static !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 0 42px !important;
    }

    .album-gallery {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .album-main-cover {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;

        border-radius: 28px !important;
        overflow: hidden !important;
    }

    .album-main-cover img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

    .album-thumb-carousel {
        width: 100% !important;
        max-width: 100% !important;

        height: 82px !important;
        margin-top: 18px !important;

        padding-left: 46px !important;
        padding-right: 46px !important;

        overflow: hidden !important;
        background: transparent !important;
    }

    .album-thumb-carousel .swiper-wrapper {
        align-items: center !important;
    }

    .album-thumb-carousel .swiper-slide,
    .album-thumb {
        width: 88px !important;
        height: 70px !important;
        min-width: 88px !important;

        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .album-thumb img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

    .album-thumb-prev,
    .album-thumb-next {
        width: 38px !important;
        height: 38px !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

        z-index: 80 !important;
    }

    .album-thumb-prev {
        left: 0 !important;
    }

    .album-thumb-next {
        right: 0 !important;
    }

    .album-detail-info {
        width: 100% !important;
        max-width: none !important;

        margin-top: 28px !important;
        padding: 34px 34px !important;

        border-radius: 34px !important;
    }

    .album-detail-info .eyebrow {
        font-size: 15px !important;
        margin-bottom: 28px !important;
    }

    .album-detail-info h1 {
        font-size: 48px !important;
        line-height: 1 !important;
        letter-spacing: -0.055em !important;
    }

    .album-detail-meta {
        margin-top: 28px !important;
    }

    .album-detail-meta span {
        min-height: 58px !important;
        padding: 0 28px !important;

        font-size: 24px !important;
        border-radius: 999px !important;
    }

    .album-detail-content {
        width: 100% !important;
        padding-top: 0 !important;
    }

    .album-detail-head .eyebrow {
        font-size: 16px !important;
        margin-bottom: 22px !important;
    }

    .album-track-list {
        width: 100% !important;
        max-width: none !important;

        display: grid !important;
        gap: 18px !important;
    }

    .album-track-row {
        width: 100% !important;
        min-height: 88px !important;

        display: grid !important;
        grid-template-columns: 52px 58px minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: center !important;

        padding: 18px 24px !important;
        border-radius: 28px !important;
    }

    .album-track-number {
        font-size: 20px !important;
    }

    .album-track-play {
        width: 54px !important;
        height: 54px !important;

        font-size: 15px !important;
    }

    .album-track-title {
        font-size: 26px !important;
        line-height: 1.15 !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .album-track-duration {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .album-detail-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .album-detail-info {
        padding: 30px 30px !important;
    }

    .album-detail-info h1 {
        font-size: 44px !important;
    }

    .album-track-row {
        min-height: 82px !important;
        grid-template-columns: 48px 54px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 16px 20px !important;
    }

    .album-track-title {
        font-size: 24px !important;
    }
}


/* =========================================================
   MOBILE BOOK DETAIL FIX
   ========================================================= */

@media (max-width: 700px) {
    .book-compact-page {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 34px 18px 180px !important;
        margin: 0 !important;
    }

    .book-compact-sidebar {
        position: static !important;

        width: 100% !important;
        max-width: none !important;

        display: block !important;
        margin: 0 0 44px !important;
    }

    .book-compact-cover {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        aspect-ratio: 3 / 4 !important;

        margin: 0 auto 24px !important;

        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .book-compact-cover img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;

        display: block !important;
        border-radius: 28px !important;
    }

    .book-compact-info {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 32px 30px !important;

        border-radius: 32px !important;
    }

    .book-compact-info .eyebrow {
        font-size: 14px !important;
        margin-bottom: 22px !important;
    }

    .book-compact-info h1 {
        font-size: 42px !important;
        line-height: 1.02 !important;
        letter-spacing: -0.055em !important;
    }

    .book-compact-meta {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        margin-top: 24px !important;
    }

    .book-compact-meta span,
    .book-pdf-meta-button {
        width: 100% !important;
        min-height: 54px !important;

        font-size: 22px !important;
        border-radius: 999px !important;
    }

    .book-pdf-meta-button {
        padding: 0 22px !important;
    }

    .book-compact-content {
        width: 100% !important;
        padding-top: 0 !important;
    }

    .book-compact-head .eyebrow {
        font-size: 16px !important;
        margin-bottom: 22px !important;
    }

    .book-compact-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        columns: auto !important;

        gap: 18px !important;
    }

    .book-compact-row {
        width: 100% !important;
        min-height: 82px !important;

        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: center !important;

        padding: 18px 0 !important;

        border-radius: 24px !important;
        background: rgba(255, 255, 255, 0.58) !important;
        border: 1px solid rgba(255, 255, 255, 0.74) !important;
        box-shadow: 0 12px 32px rgba(40, 32, 22, 0.045) !important;
    }

    .book-compact-number {
        padding-left: 20px !important;

        font-size: 20px !important;
    }

    .book-compact-title {
        display: block !important;

        font-size: 27px !important;
        line-height: 1.15 !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        -webkit-line-clamp: unset !important;
    }
}

@media (max-width: 430px) {
    .book-compact-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .book-compact-info h1 {
        font-size: 39px !important;
    }

    .book-compact-row {
        grid-template-columns: 58px minmax(0, 1fr) !important;
    }

    .book-compact-title {
        font-size: 25px !important;
    }
}


/* =========================================================
   MOBILE PLAYER FIX
   ========================================================= */

@media (max-width: 700px) {
    .global-player {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        min-height: 92px !important;

        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) 44px !important;
        grid-template-areas:
            "cover content close"
            "actions actions actions" !important;

        gap: 12px !important;

        padding: 12px !important;
        border-radius: 28px !important;

        transform: translateY(120%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .global-player.visible {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .global-player-cover {
        grid-area: cover !important;

        width: 58px !important;
        height: 58px !important;

        border-radius: 18px !important;
    }

    .global-player-content {
        grid-area: content !important;
        min-width: 0 !important;
    }

    .global-player-top {
        margin-bottom: 8px !important;
    }

    .global-player-title {
        font-size: 16px !important;
        line-height: 1.1 !important;
    }

    .global-player-album {
        font-size: 13px !important;
    }

    .global-player-close {
        grid-area: close !important;

        position: static !important;

        width: 38px !important;
        height: 38px !important;

        font-size: 26px !important;
        justify-self: end !important;
    }

    .global-player-progress-wrap {
        grid-template-columns: 36px minmax(0, 1fr) 36px !important;
        gap: 8px !important;
    }

    .global-player-actions {
        grid-area: actions !important;

        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;

        margin-top: 4px !important;
    }

    .global-player-side-button {
        width: 42px !important;
        height: 42px !important;

        font-size: 18px !important;
    }

    .global-player-main-button {
        width: 52px !important;
        height: 52px !important;

        font-size: 18px !important;
    }

    .global-volume-popup {
        bottom: calc(100% + 10px) !important;
        height: 170px !important;
    }

    .global-volume-range {
        width: 125px !important;
    }

    body:has(.global-player.visible) {
        padding-bottom: 170px !important;
    }
}

@media (max-width: 430px) {
    .global-player {
        left: 10px !important;
        right: 10px !important;

        grid-template-columns: 54px minmax(0, 1fr) 38px !important;
        border-radius: 26px !important;
    }

    .global-player-cover {
        width: 54px !important;
        height: 54px !important;
    }

    .global-player-side-button {
        width: 40px !important;
        height: 40px !important;
    }

    .global-player-main-button {
        width: 50px !important;
        height: 50px !important;
    }
}
/* =========================================================
   MOBILE MENU BUTTON + PLAYER FINAL FIX
   СТАВИТЬ В САМЫЙ КОНЕЦ main.css
   ========================================================= */

@media (max-width: 700px) {
    /* ---------- кнопка "Меню" ---------- */

    .menu-toggle {
        height: 56px !important;
        min-height: 56px !important;
        min-width: 116px !important;

        padding: 0 24px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        line-height: 1 !important;
        text-align: center !important;

        border: 0 !important;
        border-radius: 999px !important;

        font-size: 22px !important;
        font-weight: 500 !important;

        background: rgba(255, 255, 255, 0.86) !important;
        color: #1d1d1f !important;

        box-shadow: 0 14px 34px rgba(40, 32, 22, 0.10) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .site-header {
        min-height: 88px !important;
        padding: 18px 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .logo {
        display: flex !important;
        align-items: center !important;

        font-size: 25px !important;
        line-height: 1.1 !important;
    }


    /* ---------- чтобы контент не прятался под плеером ---------- */

    body {
        padding-bottom: 190px !important;
    }

    .site-footer {
        padding-bottom: 190px !important;
    }


    /* ---------- полностью пересобираем мобильный плеер ---------- */

    .global-player {
        position: fixed !important;

        left: 12px !important;
        right: 12px !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;

        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) 40px !important;
        grid-template-areas:
            "cover info close"
            "progress progress progress"
            "actions actions actions" !important;

        gap: 10px 12px !important;

        padding: 12px !important;
        border-radius: 28px !important;

        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(255, 255, 255, 0.92) !important;

        box-shadow:
            0 24px 70px rgba(40, 32, 22, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;

        backdrop-filter: blur(26px) !important;
        -webkit-backdrop-filter: blur(26px) !important;

        opacity: 0 !important;
        pointer-events: none !important;

        transform: translateY(calc(100% + 40px)) !important;
        transition:
            opacity .28s ease,
            transform .28s ease !important;

        z-index: 9999 !important;
    }

    .global-player.visible {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .global-player::before {
        display: none !important;
    }


    /* ---------- обложка ---------- */

    .global-player-cover {
        grid-area: cover !important;

        width: 58px !important;
        height: 58px !important;

        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .global-player-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* ---------- текст ---------- */

    .global-player-content {
        grid-area: info !important;

        min-width: 0 !important;
        width: 100% !important;

        display: block !important;
    }

    .global-player-top {
        margin: 0 !important;
        display: block !important;
    }

    .global-player-text {
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    .global-player-title {
        display: block !important;

        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .global-player-album {
        margin-top: 4px !important;

        font-size: 13px !important;
        line-height: 1.15 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* ---------- крестик ---------- */

    .global-player-close {
        grid-area: close !important;

        position: static !important;

        width: 38px !important;
        height: 38px !important;

        align-self: start !important;
        justify-self: end !important;

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

        margin: 0 !important;

        font-size: 26px !important;
        line-height: 1 !important;
    }


    /* ---------- прогресс ---------- */

    .global-player-progress-wrap {
        grid-area: progress !important;

        width: 100% !important;

        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 38px !important;
        gap: 8px !important;
        align-items: center !important;

        margin: 0 !important;
    }

    .global-player-time {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .global-player-progress {
        width: 100% !important;
        min-width: 0 !important;
        height: 6px !important;
    }


    /* ---------- кнопки управления ---------- */

    .global-player-actions {
        grid-area: actions !important;

        width: 100% !important;

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

        gap: 12px !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
    }

    .global-player-side-button {
        width: 42px !important;
        height: 42px !important;

        flex: 0 0 42px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 18px !important;
        line-height: 1 !important;
    }

    .global-player-main-button {
        width: 52px !important;
        height: 52px !important;

        flex: 0 0 52px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 18px !important;
        line-height: 1 !important;
    }


    /* ---------- громкость ---------- */

    .global-volume {
        flex: 0 0 42px !important;
    }

    .global-volume-popup {
        bottom: calc(100% + 12px) !important;
        height: 168px !important;
    }

    .global-volume-range {
        width: 124px !important;
    }
}


/* совсем маленькие экраны */
@media (max-width: 430px) {
    .site-header {
        min-height: 82px !important;
        padding: 16px 18px !important;
    }

    .logo {
        font-size: 23px !important;
        max-width: 210px !important;
    }

    .menu-toggle {
        min-width: 104px !important;
        height: 52px !important;
        min-height: 52px !important;

        padding: 0 20px !important;

        font-size: 21px !important;
    }

    .global-player {
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;

        grid-template-columns: 54px minmax(0, 1fr) 36px !important;
        gap: 9px 10px !important;

        padding: 10px !important;
        border-radius: 26px !important;
    }

    .global-player-cover {
        width: 54px !important;
        height: 54px !important;
        border-radius: 17px !important;
    }

    .global-player-title {
        font-size: 15px !important;
    }

    .global-player-album {
        font-size: 12px !important;
    }

    .global-player-close {
        width: 36px !important;
        height: 36px !important;
    }

    .global-player-side-button {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    .global-player-main-button {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
    }
}