/* ========================================================================
   YATSUNA MOBILE CLEAN
   Load AFTER the main style.css.
   Class names and JavaScript states are preserved.
   Main cleanup: global overflow guard, grouped sections, safer modals,
   final aligned footer without old duplicates.
   ======================================================================== */

/* ========================================================================
   GLOBAL SAFETY LAYER
   ======================================================================== */

@media(max-width: 1180px) {
  html,
  body {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: clip;
  }

  body {
    min-inline-size: 320px;
  }

  img,
  svg,
  video,
  canvas {
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  textarea,
  select,
  button {
    max-inline-size: 100%;
    font: inherit;
  }

  section,
.container,
.carousel-container,
.custom-carousel,
.carousel-track {
    min-inline-size: 0;
  }

  p,
li,
a,
button,
input,
textarea,
select,
.card-title,
.announcement-card h3,
.review__text {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* ========================================================================
   SMALL FOOTER NAV DEFAULTS
   ======================================================================== */

@media(max-width: 768px) {
  .nav-footer ul {
    justify-items: center;
    text-align: center;
    margin-block-start: 1rem;
  }

  .nav-footer a {
    text-align: center;
  }
}

/* ========================================================================
   HERO — JS-CONTROLLED RESPONSIVE COMPOSITION
   ======================================================================== */

@media(max-width: 1180px) {
  .hero {
    /*
      Initial values mirror main.js. They are available before deferred
      JavaScript runs, so the first painted frame already uses the final
      composition instead of briefly showing an older pen position.
    */
    --hero-auto-height: 505px;
    --hero-auto-bg: var(
      --hero-desktop-bg,
      url("../images/bghiro-optimized.webp")
    );
    --hero-text-y: calc(41.5% + 8px);
    --hero-text-size: clamp(3.4rem, 5vw, 5.15rem);
    --hero-link-y: calc(64% - 18px);
    --hero-mask-x: 5%;
    --hero-mask-y: 70px;
    --hero-mask-size: 190px;
    --hero-compass-x: 4.5%;
    --hero-compass-y: 30px;
    --hero-compass-size: 94px;
    --hero-pen-x: 56%;
    --hero-pen-y: calc(91% + 18px);
    --hero-pen-size: clamp(730px, 46.3vw, 872px);
    --hero-pen-rotate: -84deg;
    --hero-bottle-x: 25%;
    --hero-bottle-y: 430px;
    --hero-bottle-size: 92px;

    min-block-size: 0 !important;
    block-size: var(--hero-auto-height, 505px) !important;
    aspect-ratio: auto !important;
    background-image: var(
      --hero-auto-bg,
      url("../images/bghiro-optimized.webp")
    ) !important;
    background-size: 100% var(--hero-auto-height, 505px) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #222222 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .composition {
    position: absolute !important;
    inset: 0 !important;
    inline-size: 100% !important;
    block-size: var(--hero-auto-height, 505px) !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .hero::before {
    opacity: 0 !important;
    background: none !important;
  }

  .hero-text {
    inset-inline-start: 50% !important;
    inset-block-start: var(--hero-text-y, 250px) !important;
    transform: translate(-50%, -50%) !important;
    font-size: var(--hero-text-size, clamp(3rem, 5vw, 4.6rem)) !important;
    max-inline-size: min(92vw, 720px) !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .hero .mask,
  .mask {
    inset-inline-start: var(--hero-mask-x, 5%) !important;
    inset-block-start: var(--hero-mask-y, 70px) !important;
    inline-size: var(--hero-mask-size, 190px) !important;
    max-inline-size: min(100vw, 100%) !important;
    block-size: auto !important;
    transform: rotate(var(--hero-mask-rotate, -5deg)) !important;
    transform-origin: 50% 50% !important;
  }

  .hero .compass,
  .compass {
    inset-inline-end: var(--hero-compass-x, 3%) !important;
    inset-block-start: var(--hero-compass-y, 18px) !important;
    inline-size: var(--hero-compass-size, 100px) !important;
    max-inline-size: min(100vw, 100%) !important;
    block-size: auto !important;
    transform: rotate(var(--hero-compass-rotate, -6deg)) !important;
    transform-origin: 50% 50% !important;
  }

  .hero .pen,
  .pen {
    inset-inline-start: var(--hero-pen-x, 50%) !important;
    inset-block-start: var(--hero-pen-y, 390px) !important;
    inline-size: auto !important;
    block-size: var(--hero-pen-size, 300px) !important;
    max-inline-size: none !important;
    max-block-size: none !important;
    transform:
      translate(-50%, -50%)
      rotate(var(--hero-pen-rotate, -84deg)) !important;
    transform-origin: 50% 50% !important;
  }

  .hero .bottle,
  .bottle {
    inset-inline-start: var(--hero-bottle-x, 25%) !important;
    inset-block-start: var(--hero-bottle-y, 430px) !important;
    inline-size: var(--hero-bottle-size, 92px) !important;
    max-inline-size: min(100vw, 100%) !important;
    block-size: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* PHONE PORTRAIT — initial values match the first main.js calculation. */
@media(max-width: 600px) and (orientation: portrait) {
  .hero {
    --hero-auto-height: clamp(505px, 122.6vw, 560px);
    --hero-auto-bg: var(
      --hero-mobile-bg,
      url("../images/bghiro-5-optimized.webp")
    );
    --hero-text-y: calc(47.5% - 12px);
    --hero-text-size: clamp(2.55rem, 10.2vw, 3.15rem);
    --hero-text-line-height: 0.98;
    --hero-link-y: calc(64% - 38px);
    --hero-mask-x: -1%;
    --hero-mask-y: 5.5%;
    --hero-mask-size: clamp(102px, 31.04vw, 134px);
    --hero-compass-x: 4.5%;
    --hero-compass-y: 3%;
    --hero-compass-size: clamp(49px, 14.86vw, 67px);
    --hero-pen-x: 55%;
    --hero-pen-y: calc(100% - 10px);
    --hero-pen-size: clamp(248px, 71.8vw, 299px);
    --hero-bottle-x: 13%;
    --hero-bottle-y: calc(
      100% - clamp(17.92px, 5.04vw, 22.96px)
    );
    --hero-bottle-size: clamp(64px, 18vw, 82px);
  }
}

/* PHONE LANDSCAPE */
@media(max-width: 900px) and (orientation: landscape) {
  .hero {
    --hero-auto-height: clamp(300px, calc(100dvh - 82px), 360px);
    --hero-text-width: auto;
    --hero-text-y: calc(44% + 8px);
    --hero-text-size: clamp(2.05rem, 4.3vw, 3.1rem);
    --hero-link-y: calc(62% - 18px);
    --hero-mask-x: 5%;
    --hero-mask-y: 9%;
    --hero-mask-size: clamp(116px, 17.46vw, 150px);
    --hero-compass-x: 4.5%;
    --hero-compass-y: 5%;
    --hero-compass-size: clamp(51px, 7.43vw, 63px);
    --hero-pen-x: 56%;
    --hero-pen-y: 94%;
    --hero-pen-size: clamp(280px, 48vw, 350px);
    --hero-bottle-x: 25%;
    --hero-bottle-y: 91%;
    --hero-bottle-size: clamp(68px, 9vw, 84px);
  }
}

/* TABLET PORTRAIT */
@media(min-width: 601px) and (max-width: 1180px) and (orientation: portrait) {
  .hero {
    --hero-auto-height: clamp(560px, 58vw, 690px);
    --hero-text-y: calc(50% - 20px);
    --hero-text-size: clamp(3.6rem, 6.4vw, 5.35rem);
    --hero-text-line-height: 1.1;
    --hero-link-y: calc(65% - 46px);
    --hero-mask-x: 3%;
    --hero-mask-y: 3.5%;
    --hero-mask-size: clamp(152px, 18.8vw, 216px);
    --hero-compass-x: 5%;
    --hero-compass-y: 4.5%;
    --hero-compass-size: calc(var(--hero-mask-size) * 0.45);
    --hero-pen-x: 56%;
    --hero-pen-y: calc(100% - 10px);
    --hero-pen-size: clamp(485px, 63vw, 685px);
    --hero-bottle-x: 14%;
    --hero-bottle-y: calc(
      100% - clamp(26.88px, 3.36vw, 36.96px)
    );
    --hero-bottle-size: clamp(96px, 12vw, 132px);
  }
}

/* Вертикальні планшети, зокрема iPad mini: компактніші відступи HERO. */
@media(min-width: 601px) and (max-width: 1180px) and (orientation: portrait) {
  .hero {
    --hero-mask-y: calc(3.5% + 18px);
    --hero-link-y: calc(65% - 64px);
  }
}

/* iPAD AIR LANDSCAPE */
@media(min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  .hero {
    --hero-auto-height: clamp(470px, 43vw, 540px);
    --hero-text-y: calc(49% + 8px - 22px);
    --hero-text-size: clamp(3.15rem, 5vw, 5rem);
    --hero-link-y: calc(63% - 18px);
    --hero-mask-x: 4%;
    --hero-mask-y: 11%;
    --hero-mask-size: clamp(170px, 17vw, 220px);
    --hero-compass-x: 4.5%;
    --hero-compass-y: 5.5%;
    --hero-compass-size: clamp(85px, 7.99vw, 113px);
    --hero-pen-x: 55%;
    --hero-pen-y: calc(91% + 18px);
    --hero-pen-size: clamp(463px, 49.8vw, 605px);
    --hero-bottle-x: 25%;
    --hero-bottle-y: 90%;
    --hero-bottle-size: clamp(82px, 8vw, 105px);
  }
}

/* iPAD PRO LANDSCAPE */


/* ========================================================================
   HERO — PHONE COMPOSITION
   На телефоні ручка лежить горизонтально вздовж нижнього краю папірусу.
   Заголовок, підзаголовок і золота кнопка утворюють компактний центр.
   ======================================================================== */

@media(max-width: 600px) {
  .hero-text {
    inline-size: min(74vw, 330px) !important;
    max-inline-size: min(74vw, 330px) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-books-link {
    inline-size: min(88vw, 430px) !important;
    max-inline-size: calc(100% - 2rem) !important;
    gap: clamp(0.72rem, 3.1vw, 0.9rem) !important;
  }

  .hero-books-link__text {
    max-inline-size: 100% !important;
    font-size: clamp(1.05rem, 4.4vw, 1.3rem) !important;
    line-height: 1.15 !important;
    text-wrap: balance;
  }
}

/* ========================================================================
   HERO — TABLET PORTRAIT COMPOSITION
   Широкий папірус, заголовок у два рядки та горизонтальна ручка.
   ======================================================================== */

@media(min-width: 601px) and (max-width: 1180px) and (orientation: portrait) {
  .hero-text {
    inline-size: var(--hero-text-width, min(68vw, 9em)) !important;
    max-inline-size: var(--hero-text-width, min(68vw, 9em)) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-books-link {
    inline-size: min(72vw, 760px) !important;
    max-inline-size: calc(100% - 3rem) !important;
    gap: clamp(0.8rem, 1.8vw, 1.15rem) !important;
  }

  .hero-books-link__text {
    font-size: clamp(1.35rem, 2.55vw, 2rem) !important;
    line-height: 1.15 !important;
    text-wrap: balance;
  }
}

/* ========================================================================
   ABOUT — IPAD PRO SPACING
   ======================================================================== */

@media(min-width: 1000px) and (max-width: 1180px) and (orientation: portrait) {
  .about {
    margin-block-start: -40px !important;
  }
}

/* ========================================================================
   ABOUT — MOBILE/TABLET
   ======================================================================== */

@media(max-width: 980px) {
  .about {
    padding: 2.8rem 1rem 3.4rem;
  }

  .about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-text {
    max-inline-size: 62ch;
    margin-inline: auto;
    text-align: left;
  }

  .about-carousel-container,
  .about-media {
    order: -1;
    inline-size: min(100%, 560px);
    margin-inline: auto;
  }

  .about-carousel-container {
    padding: 14px 14px 18px;
  }

  .about-carousel .carousel-item {
    padding: 8px 12px 14px;
  }

  .about-carousel .carousel-item .about-photo-frame,
  .about-media .about-photo-frame {
    inline-size: min(100%, 390px);
  }
}

@media(max-width: 640px) {
  .about-note {
    padding: 1rem 1rem 1rem 1.2rem;
    border-radius: 16px;
  }

  .about-note::before {
    inset-inline-start: 0.85rem;
  }

  .about-note p {
    padding-inline-start: 0.9rem;
  }

  .about-carousel .carousel-item .about-photo-frame,
  .about-media .about-photo-frame {
    inline-size: min(100%, 340px);
  }

  .about-corners {
    inset: 8px;
    background:
      linear-gradient(var(--color-yellow) 0 0, var(--color-yellow) 0 0) left 0 top 0 / 24px 1.5px
        no-repeat,
      linear-gradient(var(--color-yellow) 0 0, var(--color-yellow) 0 0) left 0 top 0 / 1.5px 24px
        no-repeat,
      linear-gradient(var(--color-yellow) 0 0, var(--color-yellow) 0 0) right 0 top 0 / 24px 1.5px
        no-repeat,
      linear-gradient(var(--color-yellow) 0 0, var(--color-yellow) 0 0) right 0 top 0 / 1.5px 24px
        no-repeat,
      linear-gradient(var(--color-yellow) 0 0, var(--color-yellow) 0 0) left 0 bottom 0 / 24px 1.5px
        no-repeat,
      linear-gradient(var(--color-yellow) 0 0, var(--color-yellow) 0 0) left 0 bottom 0 / 1.5px 24px
        no-repeat,
      linear-gradient(var(--color-yellow) 0 0, var(--color-yellow) 0 0) right 0 bottom 0 / 24px 1.5px
        no-repeat,
      linear-gradient(var(--color-yellow) 0 0, var(--color-yellow) 0 0) right 0 bottom 0 / 1.5px 24px
        no-repeat;
  }
}

@media(max-width: 768px) {
  .about-carousel-container {
    padding: 10px 0 14px;
  }

  .about-carousel .carousel-item {
    padding: 8px 0 12px;
  }

  .about-carousel .carousel-item .about-photo-frame,
  .about-media .about-photo-frame {
    inline-size: min(100%, 290px);
    margin-inline: auto;
  }
}

@media(max-width: 600px) and (orientation: portrait) {
  .about {
    /* Трохи компактніший перехід від ручки до заголовка секції. */
    margin-block-start: -15px;
    padding-block-start: 2rem;
  }
}

@media(min-width: 769px) and (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  .about {
    margin-block-start: -25px;
  }
}

/* ========================================================================
   BOOKS — MOBILE CAROUSEL
   ======================================================================== */

@media(max-width: 768px) {
  .books {
    padding: 2.4rem 0 3.6rem;
    min-block-size: 92svh;
    overflow-x: clip;
    overflow-y: hidden;
    scroll-margin-block-start: 86px;
  }

  .books .container {
    padding-inline: 0;
    min-inline-size: 0;
  }

  .books h2 {
    margin: 1.8rem 0 1.6rem;
    font-size: clamp(2.7rem, 11vw, 4.2rem);
    line-height: 1;
    position: relative;
    z-index: 2;
  }

  .books::before {
    background-image: url("../images/balduin-on-horseback-mobile.webp");
    left: -12%;
    top: 80px;
    width: 44%;
    height: 28%;
    opacity: 0.45;
    background-position: left top;
    z-index: 1;
  }

  .books::after {
    background-image: url("../images/castle-mobile.webp");
    right: -6%;
    bottom: 2%;
    width: 55%;
    height: 22%;
    opacity: 0.45;
    z-index: 1;
  }

  .books .carousel-container {
    inline-size: 100%;
    block-size: auto;
    min-block-size: 0;
    margin-inline: auto;
    padding: 0 0 3.4rem;
    overflow: clip;
  }

  .books .js-books-carousel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    block-size: auto;
    min-inline-size: 0;
  }

  .books .carousel-item {
    flex: 0 0 100%;
    min-inline-size: 0;
    block-size: auto;
    min-block-size: 0;
    padding-block-start: clamp(118px, 28vw, 136px);
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
  }

  .books .book-media {
    position: relative;
    display: inline-block;
    max-inline-size: 100%;
  }

  .books .carousel-item img,
  .books .book-cover {
    inline-size: min(56vw, 250px);
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.16));
  }

  .books .book-info-trigger {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 26px;
    inline-size: 26px;
    block-size: 26px;
    font-size: 14px;
    z-index: 5;
  }

  .books .book-info-trigger span {
    font-size: 0.95rem;
  }

  .books .carousel-button {
    display: none !important;
  }

  .books .carousel-pagination {
    position: static;
    margin-block-start: 1.4rem;
    justify-content: center;
    gap: 10px;
    z-index: 3;
  }

  .books .carousel-dot {
    inline-size: 12px;
    block-size: 12px;
  }

  .books .book-overlay {
    inset-block-start: 58%;
    inline-size: min(82vw, 320px);
    max-inline-size: calc(100% - 1.25rem);
  }
}

@media(max-width: 600px) {
  .book-overlay {
    backdrop-filter: blur(2px);
  }
}

/* ========================================================================
   BOOKS — TABLET PORTRAIT
   ======================================================================== */

@media(min-width: 769px) and (max-width: 900px) and (orientation: portrait) {
  .books {
    padding: 2.6rem 0 4.2rem;
    min-block-size: 100svh;
    overflow-x: clip;
    overflow-y: hidden;
    scroll-margin-block-start: 90px;
  }

  .books .container {
    padding-inline: 0;
    min-inline-size: 0;
  }

  .books h2 {
    margin: 2.2rem 0 1.7rem;
    font-size: clamp(4rem, 7vw, 5.2rem);
    line-height: 1;
    position: relative;
    z-index: 2;
  }

  .books::before {
    background-image: url("../images/balduin-on-horseback-mobile.webp");
    left: -10%;
    top: 110px;
    width: 36%;
    height: 26%;
    opacity: 0.5;
    background-size: contain;
    background-position: left top;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .books::after {
    background-image: url("../images/castle-mobile.webp");
    right: -2%;
    bottom: 3%;
    width: 34%;
    height: 16%;
    opacity: 0.5;
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .books .carousel-container {
    inline-size: 100%;
    block-size: auto;
    min-block-size: 0;
    margin-inline: auto;
    padding: 1.4rem 0 3.6rem;
    overflow: clip;
  }

  .books .js-books-carousel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    block-size: auto;
    min-inline-size: 0;
  }

  .books .carousel-item {
    flex: 0 0 100%;
    min-inline-size: 0;
    block-size: auto;
    min-block-size: 0;
    padding: clamp(5.5rem, 10.8vw, 6.1rem) 0 0;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2;
  }

  .books .book-media {
    position: relative;
    display: inline-block;
    max-inline-size: 100%;
  }

  .books .carousel-item img,
  .books .book-cover {
    inline-size: min(42vw, 360px);
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.16));
  }

  .books .book-info-trigger {
    inset-block-start: 18px;
    inset-inline-start: 12px;
    inline-size: 28px;
    block-size: 28px;
    z-index: 5;
  }

  .books .book-info-trigger span {
    font-size: 1.1rem;
  }

  .books .carousel-button {
    display: none !important;
  }

  .books .carousel-pagination {
    position: static;
    margin-block-start: 1.7rem;
    justify-content: center;
    gap: 10px;
    z-index: 3;
  }

  .books .carousel-dot {
    inline-size: 12px;
    block-size: 12px;
  }

  .books .book-overlay {
    inset-block-start: 58%;
    inline-size: min(62vw, 360px);
    max-inline-size: calc(100% - 1.5rem);
  }
}

/* ========================================================================
   ANNOUNCEMENTS — TABLET CAROUSEL
   ======================================================================== */

@media(min-width: 769px) and (max-width: 1023px) {
  .announcements .custom-carousel {
    max-inline-size: min(980px, 100%);
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    column-gap: 14px;
  }

  .announcements .carousel-track {
    gap: 14px;
    min-inline-size: 0;
  }

  .announcements .carousel-item {
    flex: 0 0 calc((100% - 14px) / 2);
    max-inline-size: calc((100% - 14px) / 2);
    min-inline-size: 0;
  }

  .announcement-card {
    min-block-size: 500px;
  }
}

/* ========================================================================
   ANNOUNCEMENTS — MOBILE CAROUSEL
   ======================================================================== */

@media(max-width: 768px) {
  .announcements {
    padding: 3.5rem 1rem 2.75rem;
    overflow-x: clip;
  }

  .announcements .custom-carousel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "track track track" "prev dots next";
    column-gap: 18px;
    row-gap: 16px;
    inline-size: 100%;
    max-inline-size: 430px;
    margin-inline: auto;
    padding-inline: 0;
    overflow: visible;
  }

  .announcements .carousel-track {
    grid-area: track;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-inline-size: 0;
    justify-content: stretch;
  }

  .announcements .carousel-item {
    display: block;
    flex: 0 0 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .announcements .carousel-item[hidden] {
    display: none !important;
  }

  .announcements .carousel-button {
    position: static;
    inline-size: 54px;
    block-size: 54px;
    transform: none !important;
  }

  .announcements .carousel-button.prev {
    grid-area: prev;
    justify-self: start;
    align-self: center;
  }

  .announcements .carousel-button.next {
    grid-area: next;
    justify-self: end;
    align-self: center;
  }

  .announcements .carousel-pagination {
    grid-area: dots;
    justify-self: center;
    margin: 0;
    gap: 10px;
  }

  .announcements .carousel-dot {
    inline-size: 12px;
    block-size: 12px;
  }

  .announcement-card {
    max-inline-size: 100%;
    min-block-size: auto;
    padding: 1.3rem 1.2rem 1.45rem;
    border-radius: 28px;
    overflow-wrap: anywhere;
  }

  .announcement-card .card-media img {
    inline-size: 100%;
    block-size: 190px;
    object-fit: cover;
    border-radius: 18px;
  }

  .announcement-card .card-excerpt {
    max-block-size: none;
    overflow: visible;
    font-size: 1.04rem;
    line-height: 1.68;
  }

  .announcement-card .card-more {
    inline-size: min(100%, 280px);
    min-block-size: 54px;
    margin-top: 8px;
  }
}

/* ========================================================================
   REVIEWS — TABLET STACKING
   ======================================================================== */

@media(max-width: 1024px) {
  .reviews__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "prev" "list" "more" "form" "stats";
  }

  .review-form {
    position: static;
    max-inline-size: 520px;
    justify-self: center;
  }

  .reviews__stats {
    max-width: 560px;
    margin-inline: auto;
  }

  .reviews__prev {
    margin: 0 auto 14px;
  }

  .reviews__more {
    margin: 14px auto 6px;
  }
}

/* ========================================================================
   REVIEWS — PHONE LAYOUT
   ======================================================================== */

@media(max-width: 768px) {
  .reviews {
    padding: 48px 0 72px;
  }

  .reviews h2 {
    margin-bottom: 14px;
  }

  .reviews__grid {
    display: flex;
    flex-direction: column;
    
    gap: 0;
  }

  .reviews__list-col {
    order: 1;
    width: 100%;
    min-width: 0;
  }

  .reviews__more {
    order: 2;
  }

  .reviews__stats {
    order: 3;
  }

  .review-form {
    order: 4;
  }

  .reviews__filters {

    margin-bottom: 14px;
    
  }

  .review-list {
    display: grid;
    gap: 14px;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .review {
    min-height: 0;
    height: auto;
    
    border-radius: 18px;
  }

  .review__head {
    gap: 0.2rem 0.8rem;
  }

  .review__date {
    font-size: 0.82rem;
  }

  .review__rating {
    font-size: 1rem;
    letter-spacing: 1px;
  }

  .review__book {
    margin-top: 0.7rem;
    font-size: 0.94rem;
    line-height: 1.3;
  }

  .review__text {
    margin-top: 0.9rem;
    margin-bottom: 0.45rem;
    font-size: 1rem;
    line-height: 1.55;
    text-align: left;
  }

  .review__signature {
    font-size: 0.92rem;
  }

  .reviews__prev {
    display: inline-flex;
    justify-self: center;
    align-self: center;
    
    inline-size: 46px;
    block-size: 46px;
    position: static;
    z-index: auto;
  }

  .reviews__more {
    display: inline-flex;
    justify-self: center;
    align-self: center;
    
    inline-size: 46px;
    block-size: 46px;
    position: static;
    z-index: auto;
  }

  .reviews__stats {
    display: grid;

    width: 100%;
    max-width: 100%;
    
    position: static;
    z-index: auto;
  }

  .stat {
    min-height: 104px;
    padding: 16px 8px;
    border-radius: 16px;
  }

  .stat__value {
    font-size: 1.35rem;
    margin-bottom: 6px;
  }

  .stat__label {
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .review-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1rem;
    border-radius: 22px;
    position: static;
    top: auto;
    justify-self: stretch;
    z-index: auto;
  }

  .review-form__title {
    margin-bottom: 0.85rem;
  }

  .field {
    margin-bottom: 0.75rem;
  }

  .field__label {
    margin-bottom: 0.38rem;
    text-align: center;
  }

  .field__control,
  .review-form select,
  .review-form textarea {
    min-height: 46px;
    padding: 0.75rem 0.95rem;
  }

  .field__control--textarea,
  .review-form textarea {
    min-height: 120px;
  }

  .rating {
    margin-bottom: 0.8rem;
  }

  .rating__stars {
    justify-content: center;
    gap: 6px;
  }

  .rating__stars .star {
    inline-size: 28px;
    block-size: 28px;
    font-size: 1rem;
  }

  .review-form__submit,
  .btn--primary {
    min-width: 150px;
    min-height: 48px;
    margin-top: 0.5rem;
  }
}

/* ========================================================================
   REVIEWS — SMALL PHONE
   ======================================================================== */

@media(max-width: 480px) {
  .reviews {
    padding: 44px 0 76px;
  }

  .reviews__stats {
    gap: 10px;
    margin-bottom: 30px;
  }

  .stat {
    min-height: 98px;
    padding: 14px 8px;
  }

  .stat__value {
    font-size: 1.25rem;
  }

  .stat__label {
    font-size: 0.76rem;
  }

  .review-form {
    padding: 0.95rem;
  }
}

/* ========================================================================
   REVIEWS — TABLET FINAL ORDER
   ======================================================================== */

@media(min-width: 769px) and (max-width: 1024px) {
  .reviews__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .reviews__prev {
    order: 1;
  }

  .reviews__list-col {
    order: 2;
  }

  .reviews__more {
    order: 3;
  }

  .reviews__stats {
    order: 4;
  }

  .review-form {
    order: 5;
  }

  .reviews__prev,
  .reviews__more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto;
  }

  .review-list {
    max-height: none;
    overflow: visible;
  }

  .reviews__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 720px;
    width: 100%;
    margin: 24px auto;
  }

  .review-form {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }
}

/* ========================================================================
   CONTACT FORM — PHONE / TABLET
   ======================================================================== */

@media(max-width: 767px) {
  .contacts::before {
    background-image: url("../images/tree-left-mobi.webp");
  }

  .contacts::after {
    background-image: url("../images/tree-right-mobi.webp");
  }

  .contact-form {
    inline-size: 100%;
    min-block-size: 0;
    padding: clamp(18px, 5vw, 26px);
    border-radius: 20px;
  }

  .contact-form h3 {
    margin-block-end: 20px;
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .contact-form form {
    gap: 14px;
  }

  .contact-form .form-group label {
    font-size: 1rem;
  }

  .contact-form .form-group :is(input, textarea) {
    padding: 0.82rem 1rem;
    border-radius: 16px;
    font-size: 16px;
  }

  .contact-form .form-group textarea {
    min-block-size: 112px;
  }

  .contact-form button {
    inline-size: min(100%, 240px);
    min-block-size: 48px;
  }
}

/* ========================================================================
   CONTACTS — SMALL PHONE BACKGROUND
   ======================================================================== */

@media(max-width: 480px) {
  .contact-form {
    position: relative;
    z-index: 2;
  }

  .contacts {
    position: relative;
    overflow: hidden;
  }

  .contacts::before,
  .contacts::after {
    content: "";
    position: absolute;
    inset-block-start: auto;
    inset-block-end: -10%;
    block-size: 85%;
    inline-size: 50%;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
  }

  .contacts::before {
    inset-inline-start: 0;
  }

  .contacts::after {
    inset-inline-end: 0;
  }
}

/* ========================================================================
   CONTACTS — LOW LANDSCAPE BACKGROUND
   ======================================================================== */

@media(max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  .contacts {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .contacts-container {
    position: relative;
    z-index: 2;
  }

  .contact-form {
    position: relative;
    z-index: 3;
    background: var(--contact-card-bg);
  }

  .contacts::before,
  .contacts::after {
    inset-block-start: auto !important;
    inset-block-end: -8% !important;
    block-size: 88% !important;
    inline-size: 38% !important;
    background-position: bottom center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    opacity: 0.42;
  }

  .contacts::before {
    background-image: url("../images/tree-left-mobi.webp");
    inset-inline-start: 0 !important;
  }

  .contacts::after {
    background-image: url("../images/tree-right-mobi.webp");
    inset-inline-end: 0 !important;
  }
}

/* ========================================================================
   MODALS — SHARED RESPONSIVE SYSTEM
   ======================================================================== */

/* ========================================================================
   CHAPTERS MODAL — PHONE PORTRAIT SUPPLEMENT
   ======================================================================== */

/* ========================================================================
   MODALS — LOW LANDSCAPE
   ======================================================================== */

/* ========================================================================
   ANNOUNCEMENT MODAL — TABLET / MOBILE LANDSCAPE WITHOUT A COVER
   At 901–1180px JavaScript moves up to three metadata fields into the status
   row. The original left column can then be removed, allowing the text and
   CTA to use one centered, readable column. Four or more metadata fields keep
   the normal two-column layout so no information disappears.
   ======================================================================== */

/* ========================================================================
   FALLBACK — OLD IN-APP BROWSERS WITHOUT DVH
   ======================================================================== */

/* ========================================================================
   HEADER — SHARED LOGO LOOK
   ======================================================================== */

@media(max-width: 1180px) {
  .header-container {
    box-sizing: border-box !important;
  }

  .brand-group {
    grid-area: logo !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(7px, 1.2vw, 14px) !important;
    min-inline-size: 0 !important;
  }

  .logo {
    display: inline-flex !important;
    align-items: center !important;
    min-inline-size: 0 !important;
  }

  .logo-img {
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  .logo-title {
    position: relative !important;
    display: inline-block !important;
    padding-block-end: 4px !important;
    font-family: var(--ff-decor) !important;
    font-weight: 400 !important;
    line-height: 0.95 !important;
    color: #f7ecd8 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
  }

}

@media(max-width: 768px), (min-width: 769px) and (max-width: 900px) and (orientation: portrait) {
  .header {
    --header-offset: clamp(70px, 10vw, 86px) !important
  ;
    /* Хедер завжди має бути вище декору hero під час прокручування. */
    z-index: 100 !important;
  }

  .header,
  .header.header--hidden,
  .header.header--compact,
  .header.is-open,
  .header.is-open.header--hidden,
  .header.is-open.header--compact {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .header-container {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "logo navwrap" !important;
    align-items: center !important;
    min-block-size: var(--header-offset) !important;
    padding-block: clamp(6px, 1.3vw, 10px) !important;
    padding-inline: clamp(12px, 3vw, 24px) !important;
    column-gap: clamp(10px, 2.4vw, 18px) !important;
  }

  .logo {
    grid-area: logo !important;
    gap: clamp(8px, 1.7vw, 12px) !important;
    max-inline-size: min(54vw, 300px) !important;
  }

  .logo-img {
    inline-size: clamp(44px, 6.4vw, 58px) !important;
    block-size: clamp(44px, 6.4vw, 58px) !important;
  }

  .logo-title {
    font-size: clamp(1.55rem, 5.8vw, 2.55rem) !important;
  }

  .nav-wrapper {
    grid-area: navwrap !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 1.6vw, 12px) !important;
    min-inline-size: 0 !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(6px, 1.5vw, 10px) !important;
    min-inline-size: 0 !important;
  }

  .header-language-switcher {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    z-index: 3101 !important;
  }

  .telegram-button,
  .menu-toggle {
    inline-size: clamp(44px, 6.2vw, 58px) !important;
    block-size: clamp(44px, 6.2vw, 58px) !important;
    min-inline-size: clamp(44px, 6.2vw, 58px) !important;
  }

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

  .js-nav {
    position: fixed !important;
    inset-inline: 0 !important;
    inset-block-start: var(--header-offset) !important;
    z-index: 2999 !important;
    max-block-size: calc(100dvh - var(--header-offset)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff8e1 !important;
    border-top: 1px solid color-mix(in oklab, #000 12%, #fff 88%) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
    transform-origin: top center !important;
    transform: scaleY(0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease,
      visibility 0s linear 0.24s !important;
  }

  .js-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 1.2rem 1rem 1.6rem !important;
    list-style: none !important;
  }

  .js-nav a {
    color: #2b1b00 !important;
    font-weight: 700 !important;
  }

  .header.is-open {
    position: fixed !important;
    inset-block-start: 0 !important;
    inset-inline: 0 !important;
    width: 100% !important;
    z-index: 3000 !important;
  }

  .header.is-open .js-nav {
    transform: scaleY(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease !important;
  }

  .header.is-open .menu-lines {
    background: transparent !important;
  }

  .header.is-open .menu-lines::before {
    transform: translateY(6px) rotate(45deg) !important;
  }

  .header.is-open .menu-lines::after {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  body.mobile-menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 12, 8, 0.46) !important;
    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    z-index: 2500 !important;
    pointer-events: none !important;
  }
}

/* ========================================================================
   HEADER — VERY SMALL PHONES
   ======================================================================== */

@media(max-width: 380px) {

  .logo-img {
    inline-size: 40px !important;
    block-size: 40px !important;
  }

  .telegram-button,
  .menu-toggle {
    inline-size: 40px !important;
    block-size: 40px !important;
    min-inline-size: 40px !important;
  }
}

/* ========================================================================
   HEADER — NO-BURGER TABLET/LANDSCAPE
   ======================================================================== */

@media(min-width: 769px) and (max-width: 1180px) and (orientation: landscape), (min-width: 901px) and (max-width: 1060px) and (min-height: 1000px) and (orientation: portrait) {
  .header {
    --header-offset: clamp(78px, 7vw, 100px) !important
  ;
  }

  .header-container {
    display: grid !important;
    grid-template-columns: minmax(clamp(300px, 33vw, 480px), 1.05fr) minmax(
        0,
        1.55fr
      ) !important;
    grid-template-areas: "logo navwrap" !important;
    align-items: center !important;
    inline-size: min(100%, var(--container-max)) !important;
    margin-inline: auto !important;
    min-block-size: clamp(78px, 7vw, 100px) !important;
    padding-block: clamp(6px, 0.8vw, 10px) !important;
    padding-inline: clamp(18px, 3vw, 42px) !important;
    column-gap: clamp(22px, 3.5vw, 72px) !important;
  }

  .logo {
    justify-self: start !important;
    gap: clamp(11px, 1.25vw, 17px) !important;
    inline-size: max-content !important;
    max-inline-size: 100% !important;
  }

  .logo-img {
    inline-size: clamp(52px, 5.2vw, 74px) !important;
    block-size: clamp(52px, 5.2vw, 74px) !important;
    flex: 0 0 clamp(52px, 5.2vw, 74px) !important;
  }

  .logo-title {
    font-size: clamp(2.1rem, 3vw, 3.35rem) !important;
    line-height: 0.9 !important;
    padding-block-end: 5px !important;
  }

  .nav-wrapper {
    grid-area: navwrap !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(18px, 2vw, 34px) !important;
    margin-inline-start: 0 !important;
    min-inline-size: 0 !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, 1vw, 14px) !important;
    min-inline-size: 0 !important;
  }

  .js-nav {
    position: static !important;
    inset: auto !important;
    display: block !important;
    justify-self: end !important;
    inline-size: auto !important;
    max-inline-size: 100% !important;
    max-block-size: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  .js-nav ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(12px, 1.45vw, 30px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    min-inline-size: 0 !important;
  }

  .js-nav a {
    position: relative !important;
    display: inline-block !important;
    padding-block: 4px 9px !important;
    font-size: clamp(0.86rem, 0.78vw + 0.56rem, 1.16rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    color: #f7ecd8 !important;
    white-space: nowrap !important;
  }

  .telegram-button {
    justify-self: end !important;
    inline-size: clamp(42px, 4.15vw, 58px) !important;
    block-size: clamp(42px, 4.15vw, 58px) !important;
    min-inline-size: clamp(42px, 4.15vw, 58px) !important;
    flex: 0 0 clamp(42px, 4.15vw, 58px) !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  .telegram-button img,
  .telegram-button svg {
    inline-size: 54% !important;
    block-size: 54% !important;
  }

  .menu-toggle {
    display: none !important;
  }

  body.mobile-menu-open::before {
    display: none !important;
  }
}

@media(min-width: 901px) and (max-width: 1060px) and (min-height: 1000px) and (orientation: portrait) {
  .header-container {
    grid-template-columns: minmax(330px, 1.05fr) minmax(0, 1.55fr) !important;
    padding-inline: 18px !important;
    column-gap: clamp(20px, 3vw, 46px) !important;
  }

  .logo-img {
    inline-size: clamp(52px, 5.4vw, 68px) !important;
    block-size: clamp(52px, 5.4vw, 68px) !important;
    flex-basis: clamp(52px, 5.4vw, 68px) !important;
  }

  .logo-title {
    font-size: clamp(2.1rem, 3.1vw, 3rem) !important;
  }

  .nav-wrapper {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: clamp(18px, 2.25vw, 24px) !important;
  }

  .js-nav ul {
    gap: clamp(12px, 1.55vw, 18px) !important;
  }

  .js-nav a {
    font-size: clamp(0.86rem, 1.18vw, 0.98rem) !important;
  }

  .telegram-button {
    inline-size: 40px !important;
    block-size: 40px !important;
    min-inline-size: 40px !important;
    min-block-size: 40px !important;
    flex-basis: 40px !important;
  }
}

/* ========================================================================
   HEADER — ENGLISH RESPONSIVE NAVIGATION
   1181–1400px: компактніше повне меню.
   769–1180px: англійські довгі назви переходять у бургер раніше.
   Українські правила не змінюються.
   ======================================================================== */



@media(min-width: 769px) and (max-width: 1180px) {
  html[lang^="en"] .header {
    --header-offset: clamp(74px, 8.5vw, 88px) !important;
    z-index: 100 !important;
  }

  html[lang^="en"] .header-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "logo navwrap" !important;
    align-items: center !important;
    min-block-size: var(--header-offset) !important;
    padding-block: 6px !important;
    padding-inline: clamp(12px, 2vw, 22px) !important;
    column-gap: clamp(8px, 1.5vw, 14px) !important;
  }

  html[lang^="en"] .brand-group {
    grid-area: logo !important;
    gap: clamp(6px, 1vw, 10px) !important;
    min-inline-size: 0 !important;
  }

  html[lang^="en"] .logo {
    gap: clamp(8px, 1.2vw, 12px) !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
  }

  html[lang^="en"] .logo-img {
    inline-size: clamp(48px, 5vw, 60px) !important;
    block-size: clamp(48px, 5vw, 60px) !important;
    flex-basis: clamp(48px, 5vw, 60px) !important;
  }

  html[lang^="en"] .logo-title {
    font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
  }

  html[lang^="en"] .nav-wrapper {
    grid-area: navwrap !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(7px, 1vw, 10px) !important;
    margin-inline-start: 0 !important;
    min-inline-size: 0 !important;
  }

  html[lang^="en"] .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: clamp(7px, 1vw, 10px) !important;
  }

  html[lang^="en"] .telegram-button,
  html[lang^="en"] .menu-toggle {
    inline-size: clamp(42px, 5vw, 52px) !important;
    block-size: clamp(42px, 5vw, 52px) !important;
    min-inline-size: clamp(42px, 5vw, 52px) !important;
    flex-basis: clamp(42px, 5vw, 52px) !important;
  }

  html[lang^="en"] .menu-toggle {
    display: inline-flex !important;
  }

  html[lang^="en"] .js-nav {
    position: fixed !important;
    inset-inline: 0 !important;
    inset-block-start: var(--header-offset) !important;
    z-index: 2999 !important;
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    max-block-size: calc(100dvh - var(--header-offset)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    background: #fff8e1 !important;
    border-top: 1px solid color-mix(in oklab, #000 12%, #fff 88%) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
    transform-origin: top center !important;
    transform: scaleY(0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease,
      visibility 0s linear 0.24s !important;
  }

  html[lang^="en"] .js-nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 1.2rem 1rem 1.6rem !important;
    list-style: none !important;
  }

  html[lang^="en"] .js-nav a {
    padding-block: 4px 9px !important;
    font-size: 1rem !important;
    color: #2b1b00 !important;
    white-space: nowrap !important;
  }

  html[lang^="en"] .header.is-open {
    position: fixed !important;
    inset-block-start: 0 !important;
    inset-inline: 0 !important;
    inline-size: 100% !important;
    z-index: 3000 !important;
  }

  html[lang^="en"] .header.is-open .js-nav {
    transform: scaleY(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease !important;
  }

  html[lang^="en"] .header.is-open .menu-lines {
    background: transparent !important;
  }

  html[lang^="en"] .header.is-open .menu-lines::before {
    transform: translateY(6px) rotate(45deg) !important;
  }

  html[lang^="en"] .header.is-open .menu-lines::after {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  html[lang^="en"].mobile-menu-open,
  html[lang^="en"] body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  html[lang^="en"] body.mobile-menu-open::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 12, 8, 0.46) !important;
    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    z-index: 2500 !important;
    pointer-events: none !important;
  }
}

/* ========================================================================
   FOOTER — RESPONSIVE FINAL CLEAN STRUCTURE
   ======================================================================== */

@media(max-width: 1180px) {
  .footer-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr) minmax(0, 1.18fr) !important;
    align-items: start !important;
    justify-items: stretch !important;
    column-gap: clamp(16px, 3.4vw, 34px) !important;
    row-gap: 0 !important;
    padding-inline: clamp(14px, 2.8vw, 30px) !important;
  }

  .footer-brand,
  .footer-section {
    min-inline-size: 0 !important;
    max-inline-size: none !important;
  }

  .footer-brand,
  .footer-brand p,
  .footer-section,
  .footer-section p,
  .footer-section a,
  .nav-footer a {
    text-align: center !important;
  }

  .footer-brand__top {

    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 0 0.72rem !important;
  }

  .footer-brand__logo {
    inline-size: clamp(42px, 5.8vw, 58px) !important;
    block-size: clamp(42px, 5.8vw, 58px) !important;
    flex: 0 0 clamp(42px, 5.8vw, 58px) !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  .footer-brand__title,
  .footer-brand__title a,
  .footer-section h3 {
    margin: 0 !important;
    font-family: var(--ff-decor) !important;
    font-size: clamp(1.5rem, 3vw, 2.08rem) !important;
    line-height: 1.05 !important;
    font-weight: 400 !important;
    white-space: normal !important;
  }

  .footer-section h3 {
    padding-block-end: 0.5rem !important;
    margin-block-end: 0.45rem !important;
    text-align: center !important;
  }

.nav-footer ul {
    display: grid !important;

    gap: 0.42rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-content > .footer-section:last-child {
    display: grid !important;
    grid-template-columns: max-content !important;
    justify-content: center !important;
    justify-items: start !important;
    align-content: start !important;
    
  }

  /* Third footer heading alignment only; underline size/color come from style.css. */
  .footer-content > .footer-section:last-child h3 {

    align-self: start !important;
    
  }

.footer-contact-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    inline-size: max-content !important;
    max-inline-size: 100% !important;
    margin: 0.5rem 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .footer-contact-row br {
    display: none !important;
  }

  .footer-contact-row .ico {
    inline-size: 15px !important;
    block-size: 15px !important;
    min-inline-size: 15px !important;
    flex: 0 0 15px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--footer-accent-ink, var(--color-border-brown)) !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
  }

  .footer-contact-row a,
  .footer-contact-row span:not(.ico) {
    min-inline-size: 0 !important;
    max-inline-size: calc(100% - 22px) !important;
    display: inline-block !important;
    font-size: clamp(0.76rem, 1.42vw, 0.92rem) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: left !important;
  }

  .footer-social {
    inline-size: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0.44rem 0 0 !important;
  }

  .footer-social__list {
    inline-size: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .footer-social__hint {
    display: block !important;
    inline-size: min(100%, 180px) !important;
    max-inline-size: 180px !important;
    margin: 0.62rem auto 0 !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: clamp(0.88rem, 1.7vw, 1rem) !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
  }
}

/* ========================================================================
   FOOTER — NARROW MOBILE WIDTH
   ======================================================================== */

@media(max-width: 520px) {
  .footer-content {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 0.72fr) minmax(0, 1.22fr) !important;
    column-gap: 12px !important;
    padding-inline: 12px !important;
  }

  .footer-brand__top {
    gap: 7px !important;
  }

  .footer-brand__logo {
    inline-size: 38px !important;
    block-size: 38px !important;
    flex-basis: 38px !important;
  }

  .footer-brand__title,
  .footer-brand__title a,
  .footer-section h3 {
    font-size: clamp(1.32rem, 4.6vw, 1.72rem) !important;
  }

  .footer-brand p {
    font-size: clamp(0.82rem, 2.8vw, 0.92rem) !important;
    line-height: 1.45 !important;
  }

  .nav-footer a {
    font-size: clamp(0.82rem, 2.9vw, 0.94rem) !important;
    line-height: 1.25 !important;
  }

  .footer-contact-row {
    gap: 5px !important;
  }

  .footer-contact-row .ico {
    inline-size: 14px !important;
    block-size: 14px !important;
    min-inline-size: 14px !important;
    flex-basis: 14px !important;
  }

  .footer-contact-row a,
  .footer-contact-row span:not(.ico) {
    font-size: clamp(0.7rem, 2.35vw, 0.78rem) !important;
    max-inline-size: calc(100% - 19px) !important;
  }

  .footer-social {
    margin: 0.36rem 0 0 !important;
  }

  .footer-social__list {
    gap: 10px !important;
  }

  .footer-social__hint {
    font-size: clamp(0.78rem, 2.55vw, 0.9rem) !important;
    max-inline-size: 155px !important;
    line-height: 1.25 !important;
    margin-top: 0.55rem !important;
  }
}

/* ========================================================================
   SECTION SEAM FIX — REVIEWS TO CONTACTS
   ======================================================================== */

@media(max-width: 768px) {
  .reviews {
    margin-block-end: -2px !important;
    padding-block-end: 56px !important;
    background:
      radial-gradient(
        1200px 600px at 50% -120px,
        rgba(255, 255, 255, 0),
        transparent 70%
      ),
      radial-gradient(
        800px 400px at 85% 45%,
        rgba(255, 215, 130, 0),
        transparent 60%
      ),
      linear-gradient(180deg, #f0cf97 0%, #f7e4bf 60%, #fff5e6 100%) !important;
  }

  .contacts {
    margin-block-start: -2px !important;
    padding-block-start: 48px !important;
    background:
      radial-gradient(
        1200px 600px at 50% -120px,
        rgba(255, 255, 255, 0),
        transparent 70%
      ),
      radial-gradient(
        800px 400px at 85% 45%,
        rgba(255, 215, 130, 0),
        transparent 60%
      ),
      linear-gradient(180deg, #fff5e6 0%, #f7e4bf 40%, #f0cf97 100%) !important;
  }

  .reviews + .contacts,
  #reviews + #contacts {
    border-block-start: 0 !important;
  }
}

/* ========================================================================
   MODALS — REMOVE FADE WHEN TOGGLE IS HIDDEN
   ======================================================================== */

/* ========================================================================
   FOCUS STATES — ANNOUNCEMENT CARD ONLY
   ======================================================================== */

@media(max-width: 768px) {
  .announcement-card .card-more:focus,
  .announcement-card .card-more:active {
    outline: none !important;
    box-shadow:
      0 0 0 3px rgba(201, 161, 41, 0.26),
      0 8px 18px rgba(0, 0, 0, 0.12) !important;
  }

  .announcement-card .card-more:focus-visible {
    outline: 2px solid rgba(201, 161, 41, 0.82) !important;
    outline-offset: 3px !important;
    box-shadow:
      0 0 0 4px rgba(201, 161, 41, 0.2),
      0 8px 18px rgba(0, 0, 0, 0.12) !important;
  }

  .books .book-info-trigger:focus,
  .books .book-info-trigger:active {
    outline: none !important;
  }

  /* Touch screens do not have a dependable hover state. Give the info
     button the same warm colour as desktop while it is being pressed. */
  .books .book-info-trigger:active {
    background: #f1e0b3 !important;
    border-color: var(--color-border-brown) !important;
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
  }
}

/* ========================================================================
   VERTICAL MODALS — PHONE FULL-HEIGHT FINAL
   ======================================================================== */

/* ========================================================================
   VERTICAL MODALS — SHORT PHONE / LARGE ZOOM
   ======================================================================== */

/* ========================================================================
   FOOTER — MOBILE/TABLET COLUMN CENTERING ONLY
   Тільки вирівнювання колонок футера; лінії беруть стиль зі style.css.
   ======================================================================== */

@media(max-width: 1180px) {
  .footer-brand__top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .footer-brand__title {
    grid-column: 2 !important;
  }

  .footer-brand__title,
  .footer-section h3 {
    inline-size: max-content !important;
    max-inline-size: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .footer-brand__title::after,
  .footer-section h3::after {
    margin-inline: auto !important;
  }

  .nav-footer {
    inline-size: max-content !important;
    max-inline-size: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .nav-footer ul {
    justify-items: center !important;
    text-align: center !important;
  }

  .footer-content > .footer-section:last-child {
    inline-size: max-content !important;
    max-inline-size: 100% !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .footer-content > .footer-section:last-child h3 {
    margin-inline: auto !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .footer-content > .footer-section:last-child .footer-contact-row {
    justify-content: center !important;
    margin-inline: auto !important;
  }
}

/* ========================================================================
   HERO — TABLET PORTRAIT LINE HEIGHT
   Для Asus Zenbook Fold / tablet portrait. Без зміни структури.
   ======================================================================== */

@media(min-width: 601px) and (max-width: 1180px) and (orientation: portrait) {
  .hero-text {
    line-height: var(--hero-text-line-height, 1.15) !important;
  }
}

/* ========================================================================
   BOOKS — MOBILE CAPTION ONLY
   Тільки назва + іконка + "Читати онлайн" + стрілка під книжкою.
   Desktop, розмір книжки, заголовок, кольори, стрілки та пагінацію не чіпає.
   ======================================================================== */

@media(max-width: 768px) {
  .books .book-caption {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    inline-size: min(92vw, 360px) !important;
    max-inline-size: 100% !important;
    margin: 0.85rem auto 0 !important;
    padding-inline: 1rem !important;
    display: grid !important;
    justify-items: center !important;
    gap: 0.32rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .books .book-caption__title {
    margin: 0 !important;
    font-family: var(--ff-serif, "Tinos", serif) !important;
    font-size: clamp(1.45rem, 6.4vw, 2rem) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    color: #2b1b00 !important;
  }

  .books .book-read-online {
    max-inline-size: 100% !important;
    min-block-size: 32px !important;
    padding: 0.05rem 0.35rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--color-link-brown) !important;
    font-family: var(--ff-serif, "Tinos", serif) !important;
    font-size: clamp(1.05rem, 4.6vw, 1.3rem) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
}

@media(min-width: 769px) and (max-width: 900px) and (orientation: portrait) {
  .books .book-caption {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    inline-size: min(92vw, 520px) !important;
    max-inline-size: 100% !important;
    margin: 0.9rem auto 0 !important;
    padding-inline: 1rem !important;
    display: grid !important;
    justify-items: center !important;
    gap: 0.36rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .books .book-caption__title {
    font-size: clamp(1.65rem, 3.4vw, 2.25rem) !important;
    line-height: 1.12 !important;
  }

  .books .book-read-online {
    font-size: clamp(1.14rem, 2.35vw, 1.38rem) !important;
  }
}

/* ========================================================================
   FOOTER — SMALL SCREENS FINAL CLEAN
   Маленькі екрани: футер в одну колонку, по центру, без дублів.
   ======================================================================== */

@media(max-width: 700px) {
  .footer-content {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: start !important;
    row-gap: clamp(20px, 5vw, 28px) !important;
    column-gap: 0 !important;
    padding-inline: clamp(18px, 5vw, 26px) !important;
    text-align: center !important;
  }

  .footer-brand,
  .footer-section {
    inline-size: 100% !important;
    max-inline-size: 420px !important;
    justify-self: center !important;
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .footer-brand__top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 9px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .footer-brand__logo {
    inline-size: clamp(56px, 16vw, 72px) !important;
    block-size: clamp(56px, 16vw, 72px) !important;
    flex-basis: auto !important;
    margin-inline: auto !important;
    object-fit: contain !important;
  }

  .footer-brand__title,
  .footer-brand__title a,
  .footer-section h3 {
    grid-column: auto !important;
    justify-self: center !important;
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(1.72rem, 6.4vw, 2.22rem) !important;
    line-height: 1.05 !important;
  }

  .footer-brand p {
    max-inline-size: 32ch !important;
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(1rem, 3.8vw, 1.14rem) !important;
    line-height: 1.55 !important;
  }

  .footer-platforms {
    inline-size: min(100%, 360px) !important;
    margin-block-start: 1rem !important;
  }

  .footer-platforms__title {
    margin-block-end: .72rem !important;
    text-align: center !important;
    font-size: clamp(.98rem, 3.6vw, 1.08rem) !important;
  }

  .footer-platforms__list {
    inline-size: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-content: center !important;
  }

  .footer-platforms__link {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 46px !important;
    padding-inline: clamp(.62rem, 3vw, .82rem) !important;
  }

  .nav-footer {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .nav-footer ul {
    inline-size: 100% !important;
    max-inline-size: 340px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto) !important;
    grid-auto-flow: column !important;
    justify-items: center !important;
    column-gap: clamp(24px, 10vw, 54px) !important;
    row-gap: .72rem !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .nav-footer a {
    text-align: center !important;
    font-size: clamp(1.04rem, 3.8vw, 1.18rem) !important;
    line-height: 1.45 !important;
  }

  .footer-content > .footer-section:last-child {
    inline-size: 100% !important;
    max-inline-size: 420px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .footer-content > .footer-section:last-child h3 {
    justify-self: center !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .footer-contact-row {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    justify-content: center !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .footer-contact-row a,
  .footer-contact-row span:not(.ico) {
    max-inline-size: calc(100% - 24px) !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(1rem, 3.8vw, 1.14rem) !important;
    line-height: 1.45 !important;
  }

  .footer-contact-row .ico {
    font-size: 0.95rem !important;
  }

  .footer-social {
    align-items: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }

  .footer-social__list {
    justify-content: center !important;
    margin-inline: auto !important;
  }

  .footer-social__hint {
    
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(0.98rem, 3.6vw, 1.08rem) !important;
    line-height: 1.32 !important;
  }
}

@media(max-width: 380px) {
  .footer-platforms__list {
    grid-template-columns: 1fr !important;
    max-inline-size: 220px !important;
    margin-inline: auto !important;
  }
}

/* Точне дворядкове вирівнювання підпису над соціальними мережами. */
@media(max-width: 700px) {
  .footer-social__hint {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  .footer-social__hint-line--1 {
    white-space: nowrap !important;
  }
}

/* Mobile: та сама логіка каруселей без зміни кольорів. */

/* ========================================================================
   REVIEWS — EQUAL PHONE WIDTH
   Відгук, статистика та форма мають одну ширину й одну вісь.
   Кнопки фільтра залишаються компактними та стоять зліва.
   Десктопні стилі та кольори не змінюються.
   ======================================================================== */

@media(max-width: 768px) {
  .reviews .container {
    inline-size: 100%;
    max-inline-size: 100%;
    padding-inline: 16px;
  }

  .reviews__grid {
    inline-size: 100%;
    max-inline-size: 100%;
    align-items: stretch;
  }

  /*
   * У десктопних стилях ця колонка має align-self: start.
   * На телефоні скасовуємо стискання й розтягуємо її до ширини форми.
   */
  .reviews__content-col {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin-inline: auto;
    align-self: stretch;
  }

  .reviews__list-col,
  .review-list,
  .review,
  .reviews__stats,
  .review-form {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
  }

  /* Повертаємо компактні мобільні фільтри й вирівнюємо їх зліва. */
  .reviews__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    inline-size: 100%;
    max-inline-size: 100%;
    gap: 10px;
    margin: 0 auto 16px;
  }

  .reviews__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    inline-size: auto;
    min-block-size: 44px;
    padding: 9px 13px;
    font-size: 0.9rem;
    text-align: center;
  }

  /*
   * Коли сторінок стане більше однієї, стрілки матимуть
   * гарантовані проміжки до фільтрів, карток і статистики.
   */
  .reviews__prev {
    margin: 6px auto 12px;
  }

  .reviews__more {
    margin: 18px auto;
  }

  .review {
    padding: 17px 16px;
  }

  /* Відокремлюємо статистику від картки, не змінюючи три колонки. */
  .reviews__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 20px auto 30px;
  }

  .review-form {
    margin-inline: auto;
    align-self: stretch;
  }
}

@media(max-width: 380px) {
  .reviews .container {
    padding-inline: 12px;
  }

  .reviews__filter {
    padding-inline: 11px;
    font-size: 0.86rem;
  }
}

/* ========================================================================
   MODAL HEADERS — MOBILE / TABLET FINAL ALIGNMENT
   Заголовок залишається зліва, але трохи наближається до середини.
   По вертикалі заголовок і хрестик стоять точно посередині рядка.
   ======================================================================== */

/* ========================================================================
   MODAL TITLES + CHAPTER ACTIONS — FINAL RESPONSIVE SIZES
   Верхні заголовки модалок більші, а дві кнопки розділу завжди рівні.
   ======================================================================== */

/* ========================================================================
   CHAPTERS MODAL — FINAL PHONE FLOW
   Portrait only:
   - the modal itself scrolls naturally with a finger;
   - the EXISTING action block stays sticky at the bottom;
   - a soft cream fade separates actions from text;
   - no duplicated buttons and no nested content scroll.
   ======================================================================== */

/* ========================================================================
   HEADER — MOBILE LOGO + TELEGRAM SIZE ONLY
   Перемикач мови, бургер, назва сайта та інші елементи НЕ змінюються.
   ======================================================================== */

@media(max-width: 768px) {
  .logo-img {
    inline-size: 54px !important;
    block-size: 54px !important;
    min-inline-size: 54px !important;
    flex: 0 0 54px !important;
  }

  .telegram-button {
    inline-size: 38px !important;
    block-size: 38px !important;
    min-inline-size: 38px !important;
    min-block-size: 38px !important;
    flex: 0 0 38px !important;
  }

  .telegram-button img,
  .telegram-button svg {
    inline-size: 56% !important;
    block-size: 56% !important;
  }
}

/* ========================================================================
   HEADER — MOBILE TITLE SIZE + SPACING
   Додаємо тільки розмір назви сайта та відступи.
   Перемикач мови не змінюємо.
   ======================================================================== */

@media(max-width: 768px) {
  .header-container {
    padding-block: 8px !important;
    padding-inline: 10px !important;
    column-gap: 8px !important;
  }

  .brand-group {
    gap: 8px !important;
  }

  .logo {
    gap: 7px !important;
  }

  .logo-title {
    font-size: clamp(1.72rem, 6vw, 2rem) !important;
  }

  .nav-wrapper {
    gap: 8px !important;
  }

  .header-actions {
    gap: 8px !important;
  }
}

@media(max-width: 380px) {
  .header-container {
    padding-inline: 8px !important;
    column-gap: 6px !important;
  }

  .brand-group {
    gap: 6px !important;
  }

  .logo {
    gap: 6px !important;
  }

  .logo-title {
    font-size: 1.6rem !important;
  }

  .nav-wrapper,
  .header-actions {
    gap: 6px !important;
  }
}

/* ========================================================================
   HEADER — MOBILE TITLE VERTICAL CENTERING
   Назва сайта вирівняна по центру рядка разом з логотипом і кнопками.
   Перемикач мови не змінюємо. Підкреслення лишається поточним.
   ======================================================================== */

@media(max-width: 768px) {
  .logo {
    align-items: center !important;
  }

}

/* ========================================================================
   HEADER — TITLE TRUE VERTICAL CENTER + UNDERLINE BELOW
   Сам текст Yatsyna Books стоїть точно по центру рядка.
   Підкреслення винесене в absolute, тому воно більше не піднімає текст.
   Його поточні ширина, товщина та колір зі style.css збережені.
   ======================================================================== */

@media(max-width: 768px) {
  .logo-title {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    block-size: 54px !important;
    min-block-size: 54px !important;
    margin: 0 !important;
    padding-block-end: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  .logo-title::after {
    position: absolute !important;
    inset-inline-start: 50% !important;
    inset-block-end: 1px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
}

@media(max-width: 380px) {
  .logo-title {
    block-size: 54px !important;
    min-block-size: 54px !important;
  }
}

/* ========================================================================
   HEADER — LANGUAGE SWITCHER NO-OVERLAP FIX
   Резервуємо окрему ширину для перемикача мови, щоб під час зміни
   UK/EN він не розширювався в бік кнопки Telegram.
   Візуальний стиль самого перемикача НЕ змінюємо.
   ======================================================================== */

@media(max-width: 768px) {
  .header-container {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .brand-group {

    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }

  .logo {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }

  .header-language-switcher {

    justify-self: end !important;
    box-sizing: border-box !important;
  }

  .header-language-switcher > * {

    box-sizing: border-box !important;
  }

  .nav-wrapper,
  .header-actions {
    min-inline-size: max-content !important;
    flex-shrink: 0 !important;
  }

  .telegram-button {
    position: relative !important;
    z-index: 5 !important;
    flex-shrink: 0 !important;
  }
}

/* ========================================================================
   HEADER — COMPACT LANGUAGE SPACE
   Зменшуємо зарезервоване місце для перемикача, щоб хедер не розтягувався.
   Сам вигляд перемикача не змінюємо.
   ======================================================================== */

@media(max-width: 380px) {
  .brand-group {
    grid-template-columns: minmax(0, 1fr) 52px !important;
  }

}

/* ========================================================================
   REVIEWS — MOBILE LANDSCAPE CENTERED
   У горизонтальному мобільному режимі:
   відгук + статистика стоять по центру секції,
   а форма йде нижче на тій самій центральній осі.
   ======================================================================== */

@media(max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  .reviews .container {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    padding-inline: 18px !important;
  }

  .reviews__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  .reviews__content-col {
    order: 1 !important;
    inline-size: min(100%, 620px) !important;
    max-inline-size: 620px !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
    align-self: center !important;
  }

  .reviews__list-col,
  .review-list,
  .review {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .reviews__stats {
    inline-size: 100% !important;
    max-inline-size: 620px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 22px auto 30px !important;
    align-self: center !important;
  }

  .review-form {
    order: 2 !important;
    inline-size: min(100%, 620px) !important;
    max-inline-size: 620px !important;
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
    position: static !important;
  }
}

/* ========================================================================
   CONTACT FORM — MOBILE LANDSCAPE BACKGROUND
   У горизонтальному мобільному режимі фон форми такий самий,
   як у вертикальній мобільній версії та на desktop.
   ======================================================================== */

@media(max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  .contact-form {
    background: #fff8e9 !important;
  }
}

/* ========================================================================
   HEADER — REMOVE EXTRA LANGUAGE SWITCHER SPACE
   Прибираємо додатково зарезервовану ширину/відступи для перемикача мов.
   Сам перемикач повертається до природної ширини свого контенту.
   Інші останні правки хедера не змінюються.
   ======================================================================== */

@media(max-width: 768px) {
  .brand-group {
    display: flex !important;
    align-items: center !important;
    grid-template-columns: none !important;
  }

  .header-language-switcher {
    inline-size: auto !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .header-language-switcher > * {
    inline-size: auto !important;
    max-inline-size: none !important;
  }
}

@media(max-width: 380px) {
  .header-language-switcher {
    inline-size: auto !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
    flex-basis: auto !important;
  }
}

/* ========================================================================
   HEADER — PORTRAIT MOBILE: A LITTLE MORE SPACE FOR LANGUAGE SWITCHER
   Даємо перемикачу лише кілька додаткових пікселів по боках,
   без великого фіксованого резерву. Усі елементи залишаються в одному рядку.
   ======================================================================== */

@media(max-width: 768px) and (orientation: portrait) {

  .brand-group {
    
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-inline-size: 0 !important;
  }

  .logo {
    flex: 1 1 auto !important;
    
  }

  .logo-title {
    white-space: nowrap !important;
  }

  .nav-wrapper,
  .header-actions {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }

}

/* ========================================================================
   HEADER — PORTRAIT MOBILE: SWITCHER IN ITS OWN GRID COLUMN
   Виправлення реального конфлікту: перемикач більше не ділить місце
   з логотипом/назвою і не може залазити на Telegram.
   ======================================================================== */

@media(max-width: 768px) and (orientation: portrait) {

  /* Діти brand-group стають безпосередніми grid-елементами header-container. */

  .logo {

    gap: 6px !important;
  }

  .header-language-switcher {

    padding-inline: 0 !important;

    z-index: 4 !important;
  }

  .nav-wrapper {

    flex-shrink: 0 !important;
  }

}

/* На Pixel-подібній ширині трохи ущільнюємо тільки назву,
   щоб усі 5 елементів гарантовано залишалися в одному рядку. */
@media(max-width: 440px) and (orientation: portrait) {
  .header-container {
    
    column-gap: 5px !important;
  }

  .logo {
    gap: 5px !important;
  }

  .header-actions {
    gap: 5px !important;
  }
}

/* ========================================================================
   HEADER — PORTRAIT MOBILE: SWITCHER CLOSER TO SITE TITLE
   Перемикач лишається у своїй окремій колонці, але стоїть ближче
   до назви сайта. Від Telegram зберігаємо окремий безпечний проміжок.
   ======================================================================== */

@media(max-width: 768px) and (orientation: portrait) {

  .header-language-switcher {
    
    margin-inline-start: -2px !important;
    margin-inline-end: 7px !important;
  }
}

@media(max-width: 440px) and (orientation: portrait) {
  .header-language-switcher {
    margin-inline-start: -3px !important;
    margin-inline-end: 6px !important;
  }
}

/* ========================================================================
   HEADER — PORTRAIT MOBILE: SWITCHER DIRECTLY NEXT TO SITE TITLE
   Логотип + назва → 6px → перемикач → вільний простір → Telegram → бургер.
   Усе залишається в одному рядку.
   ======================================================================== */

@media(max-width: 768px) and (orientation: portrait) {
  .header-container {
    display: grid !important;
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content !important;
    grid-template-areas: "logo lang . navwrap" !important;
    align-items: center !important;
    column-gap: 0 !important;
  }

  .brand-group {
    display: contents !important;
  }

  .logo {
    grid-area: logo !important;
    inline-size: max-content !important;
    max-inline-size: none !important;
    min-inline-size: 0 !important;
    margin: 0 6px 0 0 !important;
  }

  .header-language-switcher {
    grid-area: lang !important;
    justify-self: start !important;
    inline-size: max-content !important;
    min-inline-size: 0 !important;
    max-inline-size: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  .header-language-switcher > * {
    inline-size: auto !important;
    max-inline-size: max-content !important;
    margin: 0 !important;
  }

  .nav-wrapper {
    grid-area: navwrap !important;
    justify-self: end !important;
    min-inline-size: max-content !important;
    margin: 0 !important;
  }

  .header-actions {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-inline-size: max-content !important;
  }

  .telegram-button,
  .menu-toggle {
    flex-shrink: 0 !important;
  }
}

@media(max-width: 440px) and (orientation: portrait) {
  .header-container {
    padding-inline: 8px !important;
  }

  .logo {
    margin-inline-end: 5px !important;
  }

  .logo-title {
    font-size: clamp(1.38rem, 5.25vw, 1.58rem) !important;
    white-space: nowrap !important;
  }
}

@media(max-width: 380px) and (orientation: portrait) {
  .logo {
    margin-inline-end: 4px !important;
  }

  .logo-title {
    font-size: 1.34rem !important;
  }
}

/* ========================================================================
   HEADER — LANDSCAPE 769–1180px: BURGER FOR BOTH LANGUAGES
   На горизонтальних мобільних/невеликих планшетах повне меню не показуємо.
   Однакова поведінка для української та англійської версій.
   ======================================================================== */

@media(min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
  .header {
    --header-offset: clamp(72px, 8vw, 86px) !important;
    z-index: 100 !important;
  }

  .header-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "logo navwrap" !important;
    align-items: center !important;
    min-block-size: var(--header-offset) !important;
    padding-block: 6px !important;
    padding-inline: clamp(12px, 2vw, 22px) !important;
    column-gap: clamp(8px, 1.5vw, 14px) !important;
  }

  .brand-group {
    grid-area: logo !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(6px, 1vw, 10px) !important;
    min-inline-size: 0 !important;
  }

  .logo {
    gap: clamp(8px, 1.2vw, 12px) !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
  }

  .logo-img {
    inline-size: clamp(48px, 5vw, 60px) !important;
    block-size: clamp(48px, 5vw, 60px) !important;
    flex-basis: clamp(48px, 5vw, 60px) !important;
  }

  .logo-title {
    font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
  }

  .nav-wrapper {
    grid-area: navwrap !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(7px, 1vw, 10px) !important;
    margin-inline-start: 0 !important;
    min-inline-size: 0 !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: clamp(7px, 1vw, 10px) !important;
    min-inline-size: max-content !important;
  }

  .telegram-button,
  .menu-toggle {
    inline-size: clamp(42px, 5vw, 52px) !important;
    block-size: clamp(42px, 5vw, 52px) !important;
    min-inline-size: clamp(42px, 5vw, 52px) !important;
    min-block-size: clamp(42px, 5vw, 52px) !important;
    flex-basis: clamp(42px, 5vw, 52px) !important;
  }

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

  .js-nav {
    position: fixed !important;
    inset-inline: 0 !important;
    inset-block-start: var(--header-offset) !important;
    z-index: 2999 !important;
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    max-block-size: calc(100dvh - var(--header-offset)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    background: #fff8e1 !important;
    border-top: 1px solid color-mix(in oklab, #000 12%, #fff 88%) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
    transform-origin: top center !important;
    transform: scaleY(0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease,
      visibility 0s linear 0.24s !important;
  }

  .js-nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 1.2rem 1rem 1.6rem !important;
    list-style: none !important;
  }

  .js-nav a {
    padding-block: 4px 9px !important;
    font-size: 1rem !important;
    color: #2b1b00 !important;
    white-space: nowrap !important;
  }

  .header.is-open {
    position: fixed !important;
    inset-block-start: 0 !important;
    inset-inline: 0 !important;
    inline-size: 100% !important;
    z-index: 3000 !important;
  }

  .header.is-open .js-nav {
    transform: scaleY(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease !important;
  }

  .header.is-open .menu-lines {
    background: transparent !important;
  }

  .header.is-open .menu-lines::before {
    transform: translateY(6px) rotate(45deg) !important;
  }

  .header.is-open .menu-lines::after {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  body.mobile-menu-open::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 12, 8, 0.46) !important;
    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    z-index: 2500 !important;
    pointer-events: none !important;
  }
}

/* ========================================================================
   HEADER — LANDSCAPE: SMALL SAFE GAP AFTER SITE TITLE
   Додаємо трохи повітря між Yatsyna Books і перемикачем мов,
   щоб перемикач не торкався останньої літери.
   Інші елементи та розміри не змінюються.
   ======================================================================== */

@media(min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
  .header-language-switcher {
    margin-inline-start: 7px !important;
  }
}

/* ========================================================================
   NEWSLETTER — MOBILE
   ======================================================================== */

@media(max-width: 768px) {
  .newsletter-signup {
    inline-size: min(100%, 400px);
    margin-block-start: 28px;
    padding: 23px 17px 21px;
    border-radius: 22px;
  }

  .newsletter-signup__title {
    font-size: clamp(1.85rem, 7.4vw, 2.35rem);
    line-height: 1.06;
  }

  .newsletter-signup__intro {
    margin-block: 12px 16px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .newsletter-signup__form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .newsletter-signup__email,
  .newsletter-signup__button {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 48px;
  }

  .newsletter-signup__email {
    padding-inline: 1rem;
    font-size: 16px;
  }

  .newsletter-signup__privacy {
    margin-block-start: 12px;
    font-size: .8rem;
  }

  .newsletter-signup__message {
    margin-block-end: 14px;
    padding: 9px 12px;
    font-size: .92rem;
  }
}

@media(max-width: 380px) {
  .newsletter-signup {
    padding-inline: 15px;
  }
}

/* ========================================================================
   MAILPOET SERVICE PAGES — MOBILE
   ======================================================================== */
@media(max-width: 768px) {
  .mailpoet-service-page {
    min-block-size: 64svh;
    padding: 34px 14px 42px;
  }

  .mailpoet-service-card {
    inline-size: min(100%, 520px);
    padding: 25px 18px 23px;
    border-radius: 20px;
  }

  .mailpoet-service-card__eyebrow {
    font-size: .82rem;
  }

  .mailpoet-service-card__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .mailpoet-service-card__title span {
    display: block;
  }

  .mailpoet-service-card__title .mailpoet-service-card__divider {
    display: block;
    margin: .08em 0;
    font-family: var(--ff-serif);
    font-size: .55em;
  }

  .mailpoet-service-card__copy {
    font-size: .98rem;
    line-height: 1.55;
  }

  .mailpoet-service-card__dynamic {
    margin-block-start: 1.35rem;
    padding-block-start: 1.1rem;
  }

  .mailpoet-service-card__dynamic input[type="submit"],
  .mailpoet-service-card__dynamic button,
  .mailpoet-service-card__home {
    inline-size: 100%;
  }

  .mailpoet-service-card__home {
    margin-block-start: 1.35rem;
  }
}

/* ========================================================================
   ANNOUNCEMENT CARDS — GREAT VIBES TITLES ON MOBILE
   ======================================================================== */
@media(max-width: 768px) {
  .announcement-card h3,
  .announcement-card .card-title {
    font-family: var(--ff-decor, "Great Vibes", cursive) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: clamp(1.7rem, 6.3vw, 1.82rem) !important;
    line-height: 1.13 !important;
  }
}

/* English news titles: 5% smaller than the existing mobile size. */
@media(max-width: 768px) {
  html:lang(en) .announcement-card h3,
  html:lang(en) .announcement-card .card-title {
    font-size: clamp(1.615rem, 5.985vw, 1.729rem) !important;
  }
}

/* ==========================================================================
   BOOK MODAL — READ PLATFORM CHOOSER ON MOBILE
   Keeps "Читати" and "Завантажити" aligned as before.
   ========================================================================== */

/* ========================================================================
   MOBILE — download dropdowns match the mobile “Читати” menu
   ======================================================================== */

/* ========================================================================
   MOBILE DOWNLOAD MENU — KEEP FULLY INSIDE MODAL
   Align the dropdown to the right edge of its Download button instead of
   centering the wider menu over the button.
   ======================================================================== */

/* ========================================================================
   ANNOUNCEMENT MODAL — PHONE LANDSCAPE COMPACT METADATA
   Same compact logic as desktop:
   - no image + 1–3 metadata fields -> beside publication status
   - 4+ fields or any publication with an image -> existing layout unchanged
   Portrait remains unchanged.
   ======================================================================== */

/* ========================================================================
   ANNOUNCEMENT MODAL — LANDSCAPE CENTERED TEXT COLUMN
   Keep the paragraph left-aligned, but center the whole text column,
   matching the desktop treatment.
   ======================================================================== */

/* ========================================================================
   BOOK INFO BUTTON — PHONE LANDSCAPE
   Move the info button closer to the visual top-left corner of the cover
   and make it slightly smaller so it does not cover the first letter
   of the book title.
   Portrait is unchanged.
   ======================================================================== */
@media(max-width: 1180px) and (max-height: 620px) and (orientation: landscape) {
  .books .book-info-trigger {
    inset-block-start: 14px !important;
    inset-inline-start: 28px !important;
    inline-size: 24px !important;
    block-size: 24px !important;
    font-size: 13px !important;
  }

  .books .book-info-trigger span {
    font-size: 0.9rem !important;
  }
}

/* Мобільні сторінки та узгоджена ширина форм. */
@media(max-width: 900px) {
  .modal--details.is-visible .book-download {
    inline-size: 100%;
    min-inline-size: 0;
  }
}@media(max-width: 600px) {
  .site-page {
    padding-block: 1rem 2rem;
  }

  .site-page__card {
    padding: 1.35rem 1rem 1.6rem;
    border-radius: 18px;
  }

  .site-page__title {
    margin-block-end: 1.7rem;
    padding-block-end: .9rem;
    font-size: clamp(2.25rem, 12vw, 3rem);
  }

  .site-page__title::after {
    inline-size: 60px;
  }

  .site-page__content {
    font-size: 1rem;
    line-height: 1.68;
  }

  .site-page__content h2 {
    margin-block-start: 1.8em;
  }

  .site-page__content h3 {
    margin-block-start: 1.75em;
    padding-inline-start: .7rem;
    font-size: 1.18rem;
  }

  .site-page__content ol {
    padding: .9rem .85rem .9rem 2.35rem;
    border-radius: 14px;
  }
}@media(max-width: 1180px) and (orientation: portrait) {.reviews__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }.review-form,
.contact-form {
    inline-size: min(100%, var(--contact-card-max), calc(100vw - 4rem)) !important;
    max-inline-size: var(--contact-card-max) !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    align-self: center !important;
    justify-self: center !important;
  }.review-form {
    position: static !important;
  }}

/* Модалки: адаптація телефонів і планшетів. Десктоп оформлено у style.css. */
@media(max-width: 1180px) {
/* ========================================================================
   MODALS — ONE RESPONSIVE LAYOUT
   Content sets the height on tablets and desktop; only portrait phones use
   a full-height dialog. Existing classes, fonts and interaction hooks stay.
   ======================================================================== */
.modal--details.is-visible,
.modal--chapters.is-visible,
.ann-modal.is-visible {
  --modal-vh: 100vh;
  --modal-edge: 20px;
  --modal-pad: clamp(16px, 2.5vw, 28px);
  --modal-gap: 24px;
  --modal-button-height: 52px;
  --modal-room: calc(var(--modal-vh) - 2 * var(--modal-edge) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(var(--modal-edge), env(safe-area-inset-top)) max(var(--modal-edge), env(safe-area-inset-right)) max(var(--modal-edge), env(safe-area-inset-bottom)) max(var(--modal-edge), env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  z-index: 5000;
  box-sizing: border-box;
}
@supports (height: 100dvh) {
  .modal--details.is-visible, .modal--chapters.is-visible, .ann-modal.is-visible { --modal-vh: 100dvh; }
}
.modal--details.is-visible .modal__dialog,
.modal--chapters.is-visible .modal__dialog,
.ann-modal.is-visible .ann-modal__dialog {
  display: flex !important;
  flex-direction: column !important;
  inline-size: min(1060px, 100%) !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  max-block-size: var(--modal-room) !important;
  max-height: var(--modal-room) !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
.ann-modal.is-visible .ann-modal__dialog { inline-size: min(900px, 100%) !important; }
.modal--details.is-visible .modal__header,
.modal--chapters.is-visible .modal__header,
.ann-modal.is-visible .modal__header {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: start !important;
  min-block-size: 0 !important;
  gap: 16px !important;
  padding: 16px var(--modal-pad) !important;
}
.modal--details.is-visible .modal__title,
.modal--chapters.is-visible .modal__title,
.ann-modal.is-visible .modal__title {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ff-decor, "Great Vibes", cursive) !important;
  font-size: clamp(30px, 2.5vw, 38px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-align: start !important;
  text-indent: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
  max-block-size: calc(var(--modal-vh) * .3);
  overflow: auto;
  scrollbar-width: none;
}
.modal--details.is-visible .modal__title::-webkit-scrollbar,
.modal--chapters.is-visible .modal__title::-webkit-scrollbar,
.ann-modal.is-visible .modal__title::-webkit-scrollbar { display: none; }
.modal--details.is-visible .modal__close,
.modal--chapters.is-visible .modal__close,
.ann-modal.is-visible .modal__close {
  position: static !important;
  inset: auto !important;
  align-self: start !important;
  inline-size: 44px !important;
  block-size: 44px !important;
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
  margin: 0 !important;
  transform: none !important;
}
.modal--details.is-visible .modal__close::before,
.modal--chapters.is-visible .modal__close::before,
.ann-modal.is-visible .modal__close::before { display: none !important; }
.modal--details.is-visible .modal__body,
.modal--chapters.is-visible .modal__body,
.ann-modal.is-visible .ann-modal__body {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  min-inline-size: 0;
  gap: var(--modal-gap) !important;
  padding: 20px var(--modal-pad) 16px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.modal--details.is-visible .modal__cover {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  max-block-size: min(450px, calc(var(--modal-vh) * .56)) !important;
  min-block-size: 0;
  margin: auto !important;
  object-fit: contain !important;
}
.modal--details.is-visible .modal__content,
.ann-modal.is-visible .ann-modal__right {
  display: flex !important;
  flex-direction: column !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  block-size: auto !important;
  gap: var(--modal-gap) !important;
  overflow: visible !important;
}
.modal--details.is-visible .modal__text,
.ann-modal.is-visible .ann-modal__desc {
  flex: 1 1 auto;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  max-inline-size: 65ch !important;
  max-block-size: min(224px, max(50px, calc(var(--modal-room) - 260px))) !important;
  margin: 0 auto !important;
  padding: 0 6px 0 0 !important;
  font: 400 clamp(16px, 1.4vw, 18px)/1.55 var(--ff-serif, "Tinos", serif) !important;
  text-align: start !important;
  white-space: pre-line;
  overflow-wrap: anywhere;
  overflow: hidden !important;
  scrollbar-width: thin !important;
  transition: none !important;
}
.modal--details.is-visible .modal__text.is-expanded,
.ann-modal.is-visible .ann-modal__desc.is-expanded {
  max-block-size: min(440px, max(80px, calc(var(--modal-room) - 220px))) !important;
  overflow-y: auto !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.modal--details.is-visible .desc-toggle,
.ann-modal.is-visible .desc-toggle {
  flex: 0 0 44px;
  inline-size: 44px !important;
  block-size: 44px !important;
  min-block-size: 44px;
  margin: 0 auto !important;
}
.modal--details.is-visible .modal__cta,
.ann-modal.is-visible .modal__cta,
.modal--chapters.is-visible .preview-actions {
  flex: 0 0 auto !important;
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  inline-size: min(100%, 560px) !important;
  max-inline-size: 560px !important;
  min-inline-size: 0 !important;
  margin: auto auto 0 !important;
  padding: 0 !important;
  background: none !important;
  overflow: visible !important;
}
.modal--details.is-visible .modal__cta > *,
.ann-modal.is-visible .modal__cta > *,
.modal--chapters.is-visible .preview-actions > * {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.modal--details.is-visible .modal__cta :is(.btn, .btn-ghost),
.ann-modal.is-visible .modal__cta :is(.btn, .btn-ghost),
.modal--chapters.is-visible .preview-actions .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  block-size: var(--modal-button-height) !important;
  min-block-size: var(--modal-button-height) !important;
  max-block-size: var(--modal-button-height) !important;
  padding: 6px 10px !important;
  font-size: clamp(14px, 1.3vw, 18px) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
.modal--details.is-visible :is(.book-read-choice, .book-download),
.modal--chapters.is-visible .chapter-download { display: block !important; min-inline-size: 0 !important; }
.modal--details.is-visible .book-read-menu {
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  transform: translateY(7px) !important;
}
.modal--details.is-visible .book-read-choice.is-open .book-read-menu { transform: none !important; }
.modal--details.is-visible .book-download__formats,
.modal--chapters.is-visible .chapter-download__formats {
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
  transform: translateY(7px) !important;
}
.modal--details.is-visible .book-download.is-open .book-download__formats,
.modal--chapters.is-visible .chapter-download.is-open .chapter-download__formats { transform: none !important; }
.modal--details.is-visible :is(.book-read-menu, .book-download__formats),
.modal--chapters.is-visible .chapter-download__formats {
  max-block-size: none !important;
  overflow: visible !important;
}
.ann-modal.is-visible .ann-modal__left {
  display: flex !important;
  flex-direction: column !important;
  align-self: start;
  min-inline-size: 0;
  min-block-size: 0 !important;
  block-size: auto !important;
  gap: 16px !important;
  overflow: visible !important;
}
.ann-modal.is-visible .ann-modal__media:not([hidden]) {
  display: block !important;
  inline-size: 100% !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  margin: 0 !important;
}
.ann-modal.is-visible .ann-modal__cover {
  inline-size: 100% !important;
  block-size: auto !important;
  max-block-size: min(420px, calc(var(--modal-vh) * .52)) !important;
  margin: 0 !important;
  object-fit: contain !important;
}
.ann-modal.is-visible .ann-modal__status { flex: 0 0 auto; margin: 12px 0 0 !important; }
.ann-modal.is-visible .ann-status--pill { margin-inline-start: var(--modal-pad) !important; }
.ann-modal.is-visible .ann-meta:empty { display: none !important; }
.ann-modal.is-visible.ann-modal--no-media .ann-modal__body {
  grid-template-columns: minmax(0, 1fr) !important;
}
.ann-modal.is-visible.ann-modal--no-media:not(.ann-modal--meta-none):not(.ann-modal--meta-single) .ann-modal__body {
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr) !important;
}
.ann-modal.is-visible.ann-modal--no-media:is(.ann-modal--meta-none, .ann-modal--meta-single) .ann-modal__left { display: none !important; }
.ann-modal.is-visible.ann-modal--no-media .ann-modal__right {
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin-inline: 0 !important;
}
.ann-modal.is-visible.ann-modal--no-media .ann-modal__desc {
  max-inline-size: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}
.ann-modal.is-visible.ann-modal--meta-single .ann-meta { display: none !important; }
.ann-modal.is-visible.ann-modal--meta-single .ann-modal__status {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 8px 12px;
  padding-inline: var(--modal-pad) !important;
}
.ann-modal.is-visible.ann-modal--meta-single .ann-modal__status .ann-status--pill {
  margin: 0 !important;
  flex: 0 0 auto;
}
.ann-modal.is-visible.ann-modal--meta-single .ann-modal__single-meta {
  flex: 0 1 auto;
  min-inline-size: 0;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex !important; flex-wrap: wrap; gap: 4px 8px; padding: 6px 10px;
  max-inline-size: 100%; border: 1px solid #e6d4ac; border-radius: 11px; background: #fffaf2;
  font: 400 14px/1.4 var(--ff-serif); overflow-wrap: anywhere;
}
.modal--chapters.is-visible .modal__body { grid-template-columns: minmax(0, 27%) minmax(0, 1fr) !important; }
.modal--chapters.is-visible .chapter-col { min-inline-size: 0; min-block-size: 0 !important; gap: 12px !important; }
.modal--chapters.is-visible .chapter-col h4 { margin: 0 !important; }
.modal--chapters.is-visible .chapter-picker { display: none !important; }
.modal--chapters.is-visible .chapter-list { display: grid !important; align-content: start; max-block-size: min(400px, calc(var(--modal-room) - 170px)) !important; }
.modal--chapters.is-visible .chapter-btn { min-inline-size: 0; min-block-size: 44px; font: 400 16px/1.35 var(--ff-serif); white-space: normal; overflow-wrap: anywhere; }
.modal--chapters.is-visible .preview-col { display: flex !important; flex-direction: column; min-inline-size: 0; min-block-size: 0; gap: var(--modal-gap) !important; }
.modal--chapters.is-visible .preview-title { margin: 0 !important; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; overflow-wrap: anywhere; }
.modal--chapters.is-visible .preview-scroll { min-block-size: 0; max-block-size: min(360px, calc(var(--modal-room) - 260px)) !important; overflow: auto !important; overscroll-behavior: contain; }
.modal--chapters.is-visible .preview-actions { margin-block-start: auto !important; }
.modal--chapters.is-visible .chapter-select { inline-size: 100%; min-inline-size: 0; min-block-size: 48px; font: 400 16px/1.4 var(--ff-serif); border: 1px solid color-mix(in oklab, var(--m-accent) 70%, #000 30%); border-radius: 12px; padding: 10px 36px 10px 12px; color: var(--m-ink); background-color: color-mix(in oklab, var(--m-accent) 18%, #fff 82%); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--m-accent) 50%, #fff 50%); }
@media (max-width: 600px) and (orientation: portrait) {
  .modal--details.is-visible, .modal--chapters.is-visible, .ann-modal.is-visible { --modal-edge: 0px; --modal-pad: 16px; padding: 0 !important; }
  .modal--details.is-visible .modal__dialog, .modal--chapters.is-visible .modal__dialog, .ann-modal.is-visible .ann-modal__dialog {
    inline-size: 100% !important; block-size: var(--modal-vh) !important; max-block-size: var(--modal-vh) !important; max-height: var(--modal-vh) !important; border-radius: 0 !important;
  }
  .modal--details.is-visible .modal__header, .modal--chapters.is-visible .modal__header, .ann-modal.is-visible .modal__header { padding: max(12px, env(safe-area-inset-top)) 20px 12px !important; gap: 12px !important; }
  .modal--details.is-visible .modal__title, .modal--chapters.is-visible .modal__title, .ann-modal.is-visible .modal__title { font-size: 30px !important; }
  .modal--details.is-visible .modal__body, .modal--chapters.is-visible .modal__body, .ann-modal.is-visible .ann-modal__body, .ann-modal.is-visible.ann-modal--no-media:not(.ann-modal--meta-none):not(.ann-modal--meta-single) .ann-modal__body {
    grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(160px, 1fr) !important; padding: 16px var(--modal-pad) max(12px, env(safe-area-inset-bottom)) !important;
  }
  .ann-modal.is-visible.ann-modal--no-media:is(.ann-modal--meta-none, .ann-modal--meta-single) .ann-modal__body { grid-template-rows: minmax(160px, 1fr) !important; }
  .ann-modal.is-visible.ann-modal--no-media:not(.ann-modal--meta-none):not(.ann-modal--meta-single) .ann-modal__body {
    grid-template-rows: minmax(0, 1fr) minmax(160px, 1fr) !important;
  }
  .ann-modal.is-visible.ann-modal--no-media:not(.ann-modal--meta-none):not(.ann-modal--meta-single) .ann-modal__left {
    align-self: stretch !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .modal--details.is-visible .modal__cover, .ann-modal.is-visible .ann-modal__cover { max-block-size: min(300px, calc(var(--modal-vh) * .34)) !important; }
  .ann-modal.is-visible .ann-modal__media:not([hidden]) { inline-size: 85% !important; margin-inline: auto !important; }
  /* Спочатку короткий опис; решта доступна лише після натискання. */
  .modal--details.is-visible .modal__text, .ann-modal.is-visible .ann-modal__desc { max-block-size: min(180px, calc(var(--modal-vh) * .22)) !important; overflow: hidden !important; }
  .modal--details.is-visible .modal__text.is-expanded, .ann-modal.is-visible .ann-modal__desc.is-expanded { max-block-size: none !important; overflow-y: auto !important; }
  .modal--details.is-visible .modal__content, .ann-modal.is-visible .ann-modal__right { min-block-size: 160px !important; }
  .modal--details.is-visible .modal__cta :is(.btn, .btn-ghost), .ann-modal.is-visible .modal__cta :is(.btn, .btn-ghost), .modal--chapters.is-visible .preview-actions .btn { font-size: 14px !important; }
  .modal--chapters.is-visible .chapter-col { border: 0 !important; padding: 0 !important; gap: 16px !important; }
  .modal--chapters.is-visible .chapter-picker { display: block !important; }
  .modal--chapters.is-visible .chapter-list { display: none !important; }
  .modal--chapters.is-visible .preview-scroll { flex: 1 1 auto; max-block-size: none !important; }
}
@media (max-height: 620px) and (orientation: landscape) {
  .ann-modal.is-visible.ann-modal--meta-single .ann-modal__status {
    max-block-size: min(160px, max(40px, calc(var(--modal-room) - 250px)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal--details.is-visible, .modal--chapters.is-visible, .ann-modal.is-visible { --modal-edge: 8px; --modal-pad: 16px; --modal-gap: 32px; --modal-button-height: 48px; }
  .modal--details.is-visible .modal__dialog, .modal--chapters.is-visible .modal__dialog, .ann-modal.is-visible .ann-modal__dialog { block-size: var(--modal-room) !important; }
  .modal--details.is-visible .modal__header, .modal--chapters.is-visible .modal__header, .ann-modal.is-visible .modal__header { padding-block: 8px !important; }
  .modal--details.is-visible .modal__title, .modal--chapters.is-visible .modal__title, .ann-modal.is-visible .modal__title { font-size: 28px !important; line-height: 1.2 !important; }
  .modal--details.is-visible .modal__body, .modal--chapters.is-visible .modal__body, .ann-modal.is-visible .ann-modal__body { flex: 1 1 0% !important; padding-block: 12px !important; gap: 20px !important; overflow: hidden !important; }
  .modal--details.is-visible .modal__cover, .ann-modal.is-visible .ann-modal__cover { block-size: 100% !important; max-block-size: 100% !important; object-fit: contain !important; }
  .ann-modal.is-visible .ann-modal__left { block-size: 100% !important; overflow-y: auto !important; }
  .ann-modal.is-visible .ann-modal__media:not([hidden]) { flex: 1 1 0%; block-size: 100% !important; }
  /* Кругла кнопка залишається доступною й на низькому екрані. */
  .modal--details.is-visible .modal__content, .ann-modal.is-visible .ann-modal__right { gap: 8px !important; }
  .modal--details.is-visible .modal__text, .ann-modal.is-visible .ann-modal__desc { max-block-size: 80px !important; overflow: hidden !important; }
  .modal--details.is-visible .modal__text { max-block-size: min(180px, max(60px, calc(var(--modal-room) - 220px))) !important; }
  .modal--details.is-visible .modal__text.is-expanded, .ann-modal.is-visible .ann-modal__desc.is-expanded { max-block-size: none !important; overflow-y: auto !important; }
  .modal--chapters.is-visible .preview-scroll { max-block-size: max(40px, calc(var(--modal-room) - 220px)) !important; }
  .modal--details.is-visible .modal__text { margin-block: auto !important; }
}

/* Останні два видимі рядки плавно згасають, лише якщо нижче ще є текст. */
.modal--details.is-visible .modal__content .modal__text.has-more-below:not(.is-full-fit),
.ann-modal.is-visible .ann-modal__right .ann-modal__desc.has-more-below:not(.is-full-fit),
.modal--chapters.is-visible .preview-col .preview-scroll.has-more-below,
.modal--details.is-visible .modal__header .modal__title.has-more-below,
.modal--chapters.is-visible .modal__header .modal__title.has-more-below,
.ann-modal.is-visible .modal__header .modal__title.has-more-below {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2lh), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2lh), transparent 100%) !important;
}

/* Якщо весь опис уміщується, використовуємо доступне місце без згортання. */
.modal--details.is-visible .modal__text.is-full-fit,
.ann-modal.is-visible .ann-modal__desc.is-full-fit {
  max-block-size: none !important;
  overflow: hidden !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* У вертикальній модалці книги розгорнутий опис отримує місце кнопок.
   Перевірка повного вміщення тексту враховує місце з видимими кнопками. */
@media (orientation: portrait) {
  .modal--details.is-visible .modal__content:has(.modal__text.is-expanded:not(.is-full-fit)) .modal__cta {
    display: none !important;
  }
}


/* Restore the original mobile download dropdown design. */
@media (max-width: 900px) {
  .modal--details.is-visible .book-download,
  .modal--chapters.is-visible .chapter-download {
    position: relative !important;
    display: block !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    overflow: visible !important;
    z-index: 12 !important;
  }

  .modal--details.is-visible .book-download > .btn,
  .modal--chapters.is-visible .chapter-download > .btn,
  .modal--details.is-visible [data-action="download-book"],
  .modal--chapters.is-visible [data-action="download-chapter"] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .72rem !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    padding-inline: 1.35rem 3rem !important;
  }

  .modal--details.is-visible [data-action="download-book"]::after,
  .modal--chapters.is-visible [data-action="download-chapter"]::after {
    content: "";
    inline-size: 9px;
    block-size: 9px;
    flex: 0 0 9px;
    border-inline-end: 1.7px solid currentColor;
    border-block-end: 1.7px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }

  .modal--details.is-visible .book-download.is-open [data-action="download-book"]::after,
  .modal--chapters.is-visible .chapter-download.is-open [data-action="download-chapter"]::after {
    transform: translateY(2px) rotate(225deg);
  }

  .modal--details.is-visible .book-download__formats,
  .modal--chapters.is-visible .chapter-download__formats {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    inset-block-end: calc(100% + 10px) !important;
    z-index: 40 !important;
    display: block !important;
    inline-size: min(272px, calc(100vw - 42px)) !important;
    min-inline-size: min(272px, calc(100vw - 42px)) !important;
    max-inline-size: min(272px, calc(100vw - 42px)) !important;
    padding: 6px !important;
    border: 1px solid rgba(142, 111, 34, .42) !important;
    border-radius: 15px !important;
    background: #fffaf2 !important;
    color: #2b1b00 !important;
    box-shadow:
      0 16px 34px rgba(65, 43, 8, .17),
      inset 0 1px 0 rgba(255, 255, 255, .92) !important;
    transform: translateY(7px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility .18s ease !important;
    box-sizing: border-box !important;
  }

  .modal--details.is-visible .book-download__formats[hidden],
  .modal--chapters.is-visible .chapter-download__formats[hidden] {
    display: block !important;
  }

  .modal--details.is-visible .book-download.is-open .book-download__formats,
  .modal--chapters.is-visible .chapter-download.is-open .chapter-download__formats {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .modal--details.is-visible .book-download__formats::after,
  .modal--chapters.is-visible .chapter-download__formats::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 100%;
    inline-size: 12px;
    block-size: 12px;
    background: #fffaf2;
    border-inline-end: 1px solid rgba(142, 111, 34, .42);
    border-block-end: 1px solid rgba(142, 111, 34, .42);
    transform: translate(-50%, -6px) rotate(45deg);
  }

  .modal--details.is-visible .book-download__format,
  .modal--chapters.is-visible .chapter-download__format {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    column-gap: 8px;
    inline-size: 100%;
    min-block-size: 43px;
    padding: 7px 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #3d2d12;
    font-family: var(--ff-serif, "Tinos", serif);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.18;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color .18s ease,
      color .18s ease,
      transform .18s ease;
    box-sizing: border-box;
  }

  .modal--details.is-visible .book-download__format + .book-download__format,
  .modal--chapters.is-visible .chapter-download__format + .chapter-download__format {
    border-block-start: 1px solid rgba(142, 111, 34, .15);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  .modal--details.is-visible .book-download__format:hover,
  .modal--details.is-visible .book-download__format:focus-visible,
  .modal--chapters.is-visible .chapter-download__format:hover,
  .modal--chapters.is-visible .chapter-download__format:focus-visible {
    background: #fff2d1;
    color: #6f5315;
    outline: none;
    transform: translateX(1px);
    box-shadow: none;
  }

  .modal--details.is-visible .book-download__format::before,
  .modal--chapters.is-visible .chapter-download__format::before {
    content: "" !important;
    display: block !important;
    inline-size: 22px;
    block-size: 22px;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4' fill='none' stroke='%238a650e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 21h12' fill='none' stroke='%238a650e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
    -webkit-mask: none !important;
            mask: none !important;
  }

  .modal--details.is-visible .book-download__format::after,
  .modal--chapters.is-visible .chapter-download__format::after {
    content: "";
    justify-self: end;
    inline-size: 18px;
    block-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%238a650e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .modal--details.is-visible .book-download__format > span,
  .modal--chapters.is-visible .chapter-download__format > span {
    min-inline-size: 0;
    text-align: left;
  }
}

.modal--details.is-visible .book-download__format.has-inline-download-icon::before,
.modal--chapters.is-visible .chapter-download__format.has-inline-download-icon::before {
  content: none !important;
  display: none !important;
}
.modal--details.is-visible .book-download__format,
.modal--chapters.is-visible .chapter-download__format { block-size: auto; }

.modal--details.is-visible .book-download__formats::after,
.modal--chapters.is-visible .chapter-download__formats::after {
  inset-inline-start: auto;
  inset-inline-end: calc(var(--download-anchor, 90px) - 6px);
  transform: translateY(-6px) rotate(45deg);
}

/* Книжки на великих екранах: 8 рядків, далі повний опис без внутрішньої прокрутки. */
@media (min-width: 601px) and (min-height: 621px) {
  .modal--details.is-visible .modal__content .modal__text {
    flex: 0 0 auto;
    max-block-size: 8lh !important;
  }
  .modal--details.is-visible .modal__content .modal__text.is-full-fit {
    max-block-size: none !important;
  }
  .modal--details.is-visible:has(.modal__text.is-expanded:not(.is-full-fit)) {
    align-items: flex-start !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .modal--details.is-visible:has(.modal__text.is-expanded:not(.is-full-fit)) .modal__dialog {
    flex: 0 0 auto !important;
    max-block-size: none !important;
    max-height: none !important;
    margin-block: auto !important;
  }
  .modal--details.is-visible:has(.modal__text.is-expanded:not(.is-full-fit)) .modal__body {
    flex: 0 0 auto !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
  }
  .modal--details.is-visible .modal__content .modal__text.is-expanded:not(.is-full-fit) {
    max-block-size: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

}

/* Повний опис великого планшета: прихована зовнішня смуга, текст без внутрішньої прокрутки. */
@media(min-width: 601px) and (max-width: 1180px) and (min-height: 621px) {
  .modal--details.is-visible:has(.modal__text.is-expanded:not(.is-full-fit)) { scrollbar-width: none !important; }
  .modal--details.is-visible:has(.modal__text.is-expanded:not(.is-full-fit))::-webkit-scrollbar { display: none !important; }
}


/* ========================================================================
   BOOKS — СПІЛЬНИЙ ВЕРТИКАЛЬНИЙ МАКЕТ, ЗОКРЕМА ШИРОКІ ПЛАНШЕТИ
   Висота за вмістом; розміри декору не залежать від висоти всього екрана.
   ======================================================================== */
@media (min-width: 601px) and (orientation: portrait) {
  .books {
    min-block-size: 0;
    padding: clamp(36px, 4vw, 56px) 0 clamp(48px, 6vw, 72px);
    overflow: hidden;
  }
  .books .container {
    padding-inline: 0;
    min-inline-size: 0;
  }
  .books h2 {
    margin: 0 0 2rem;
    position: relative;
    z-index: 2;
  }
  .books .carousel-container {
    inline-size: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "track" "pager";
    block-size: auto;
    min-block-size: 0;
    padding: 0 0 1rem;
    transform: none;
    overflow: clip;
  }
  .books .js-books-carousel {
    justify-content: flex-start;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    min-inline-size: 0;
  }
  .books .carousel-item {
    flex: 0 0 100%;
    min-inline-size: 0;
    block-size: auto;
    min-block-size: 0;
    padding: 1.5rem 0 0;
    display: grid;
    justify-items: center;
    align-content: start;
    row-gap: 1rem;
    position: relative;
    z-index: 2;
  }
  .books .book-media {
    display: inline-block;
    max-inline-size: 100%;
  }
  .books .carousel-button {
    display: none !important;
  }
  .books .carousel-pagination {
    grid-area: pager;
    position: static;
    margin-block-start: 1.5rem;
    justify-content: center;
  }
  .books::before {
    background-image: url("../images/balduin-on-horseback-mobile.webp");
    left: -7%;
    top: auto;
    bottom: 100px;
    width: clamp(130px, 24vw, 320px);
    height: clamp(150px, 26vw, 320px);
    opacity: 0.45;
    background-position: left bottom;
  }
  .books::after {
    background-image: url("../images/castle-mobile.webp");
    right: -6%;
    top: auto;
    bottom: 24px;
    width: clamp(170px, 36vw, 420px);
    height: clamp(100px, 18vw, 220px);
    opacity: 0.45;
    background-position: right bottom;
  }
}
/* Пропорції з референсу iPad Mini 768x1024, також для Surface Pro 7.
   Масштаб залежить від ширини, а не від висоти екрана. */
@media (min-width: 601px) and (orientation: portrait) {
  .books {
    --books-layout-width: min(100vw, 1180px);
    min-block-size: calc(var(--books-layout-width) * 1.226667);
    padding: calc(var(--books-layout-width) * 0.05) 0 calc(var(--books-layout-width) * 0.075);
    scroll-margin-block-start: 86px;
  }
  .books h2 {
    margin: calc(var(--books-layout-width) * 0.0375) 0 calc(var(--books-layout-width) * 0.033333);
    font-size: calc(var(--books-layout-width) * 0.0875);
    line-height: 1;
  }
  .books .carousel-container {
    padding-block-end: calc(var(--books-layout-width) * 0.07);
  }
  .books .carousel-item {
    padding-block-start: calc(var(--books-layout-width) * 0.07);
    row-gap: calc(var(--books-layout-width) * 0.029);
  }
  .books .carousel-item img,
  .books .book-cover {
    inline-size: max(200px, calc(var(--books-layout-width) * 0.325521));
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.16));
  }
  .books .book-caption {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    inline-size: calc(var(--books-layout-width) * 0.46875) !important;
    max-inline-size: 100% !important;
    margin: calc(var(--books-layout-width) * 0.017708) auto 0 !important;
    padding-inline: 1rem !important;
    display: grid !important;
    justify-items: center !important;
    gap: calc(var(--books-layout-width) * 0.006667) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .books .book-caption__title {
    font-size: calc(var(--books-layout-width) * 0.041667) !important;
    line-height: 1.12 !important;
  }
  .books .book-read-online {
    font-size: calc(var(--books-layout-width) * 0.027083) !important;
    min-block-size: 32px !important;
  }
  .books .book-info-trigger {
    inset-block-start: calc(var(--books-layout-width) * 0.018229);
    inset-inline-start: calc(var(--books-layout-width) * 0.033854);
    inline-size: calc(var(--books-layout-width) * 0.033854);
    block-size: calc(var(--books-layout-width) * 0.033854);
  }
  .books .book-info-trigger span {
    font-size: calc(var(--books-layout-width) * 0.019792);
  }
  .books::before {
    left: -12%;
    top: calc(var(--books-layout-width) * 0.104167);
    bottom: auto;
    width: calc(var(--books-layout-width) * 0.44);
    height: calc(var(--books-layout-width) * 0.343467);
    background-position: left top;
    opacity: 0.45;
  }
  .books::after {
    right: -6%;
    bottom: calc(var(--books-layout-width) * 0.024533);
    width: calc(var(--books-layout-width) * 0.55);
    height: calc(var(--books-layout-width) * 0.269857);
    background-position: right bottom;
    opacity: 0.45;
  }
}

/* Телефони: початкові відступи, висота та декор з макета Pixel.
   Пагінація залишається в нерухомому рядку поза стрічкою книжок. */
@media (max-width: 600px) and (orientation: portrait) {
  .books .carousel-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "track" "pager";
  }
  .books .js-books-carousel {
    inline-size: 100%;
    max-inline-size: 100%;
  }
  .books .carousel-pagination {
    grid-area: pager;
  }
}

/* Компактні дії під відгуком на телефонах. */
@media (max-width:600px) {
  .review__actions { gap:8px; }
  .review__votes { flex:1 1 100%; }
  .review__votes .review__action { flex:1; }
  .review__quote-button { margin-inline-start:0; }
  .review__quote { padding:10px; }
}

/* Цитування по центру під оцінками у вертикальному режимі телефона. */
@media (max-width:600px) and (orientation:portrait) {
  .review__quote-button { margin-inline:auto; }
}

/* Page navigation: compact spacing with 44px touch targets. */
@media (max-width: 1180px), (orientation: portrait) {
  .page-scroll-nav {
    inset-inline-end: max(8px, env(safe-area-inset-right));
    inset-block-end: max(12px, env(safe-area-inset-bottom));
    padding: 3px;
    gap: 2px;
  }
}

/* LITERARY DESK — лише адаптація для мобільних і планшетів. */
@media (max-width:1180px), (orientation:portrait) {
  .literary-site .hero--literary { min-block-size:0; block-size:auto; aspect-ratio:auto; padding:60px 5vw 68px; background:radial-gradient(ellipse at 70% 20%,#493b2b,#24211e 75%); }
  .literary-site .literary-hero-sheet { inline-size:94%; padding:42px 36px; }
  .literary-site .literary-hero-sheet h1 { font-size:clamp(48px,7.5vw,82px); line-height:1.12; }
  .literary-site .literary-pen { right:3%; height:180px; bottom:42px; width:15px; }
  .literary-site .literary-notebook { width:140px;height:190px;right:-45px;top:-20px; }
  .literary-site .books { --track-h:540px; --track-width:96vw; --arrow-inset:0px; }
  .literary-site .books .carousel-container { height:540px; block-size:540px; transform:none; }
  .literary-site .books .carousel-item { grid-template-columns:1fr 1fr; padding:30px 46px 55px; }
  .literary-site .books .carousel-item::before { inset:24px 30px 44px; }
  .literary-site .books .book-cover { inline-size:min(100%,235px); max-block-size:350px; }
  .literary-site .books .book-caption { position:static;inset:auto;transform:none;inline-size:100%;padding:10px 14px 10px 26px;gap:16px; }
  .literary-site .books .book-caption__title { font-size:26px; }
  .literary-site .literary-book-summary { font-size:16px;-webkit-line-clamp:5; }
}
@media (max-width:600px) {
  .literary-site .hero--literary { padding:40px 20px 52px; }
  .literary-site .literary-hero-sheet { inline-size:100%;padding:30px 23px 34px; }
  .literary-site .literary-eyebrow { font-size:11px;letter-spacing:.06em;margin-bottom:20px; }
  .literary-site .literary-hero-sheet h1 { font-size:clamp(44px,11vw,64px);line-height:1.12; }
  .literary-site .literary-hero-subtitle { font-size:19px;line-height:1.4;margin:20px 0;max-inline-size:230px; }
  .literary-site .literary-hero-button { padding:12px 20px;gap:24px; }
  .literary-site .literary-pen { height:105px; width:10px; right:20px; bottom:35px;transform:rotate(-18deg); }
  .literary-site .literary-pen::after { width:9px; height:20px; bottom:-19px; }
  .literary-site .literary-notebook { display:none; }
  .literary-site .about, .literary-site .announcements,
  .literary-site .books, .literary-site .reviews, .literary-site .contacts { padding-block:38px; }
  .literary-site .books { --track-h:650px; }
  .literary-site .books .carousel-container { block-size:650px;height:650px; }
  .literary-site .books .carousel-item { grid-template-columns:1fr;align-content:center;gap:24px;padding:24px 34px 48px; }
  .literary-site .books .carousel-item::before { inset:12px 20px 36px;background:var(--literary-texture); }
  .literary-site .books .book-cover { inline-size:min(62vw,205px); max-block-size:285px; }
  .literary-site .books .book-caption { padding:0 10px;gap:14px;justify-items:center;text-align:center; }
  .literary-site .books .book-caption__title { font-size:24px; }
  .literary-site .literary-book-summary { font-size:16px;line-height:1.4;-webkit-line-clamp:3; }
  .literary-site .books .book-read-online { font-size:16px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .literary-site .hero--literary { padding-block:30px; }
  .literary-site .literary-hero-sheet { padding:24px 36px; }
  .literary-site .literary-hero-sheet h1 { font-size:48px; }
  .literary-site .literary-eyebrow { margin-bottom:10px; }
  .literary-site .literary-hero-subtitle { margin:14px 0; }
}
@media (max-width:1180px), (orientation:portrait) {
  .literary-site .books .carousel-container { grid-template-areas:'track'; grid-template-columns:minmax(0,1fr);padding:0; }
  .literary-site .books .js-books-carousel { block-size:100%; }
  .literary-site .books .carousel-pagination { position:absolute;bottom:4px;margin:0;grid-area:auto; }
  .literary-site .books .book-caption { inline-size:100% !important;max-inline-size:100% !important;margin:0 !important;padding:10px 14px 10px 26px !important;gap:16px !important;text-align:start !important;justify-items:start !important; }
  .literary-site .books .book-caption__title { font-size:26px !important; }
  .literary-site .books .book-read-online { font-size:17px !important;min-block-size:48px !important; }
}
@media (max-width:600px) {
  .literary-site .books .book-caption { padding:0 10px !important;gap:14px !important;justify-items:center !important;text-align:center !important; }
  .literary-site .books .book-caption__title { font-size:24px !important; }
  .literary-site .books .book-read-online { font-size:16px !important; }
}
/* Старий мобільний фон був !important: явно прибираємо його у новому hero. */
@media (max-width:1180px), (orientation:portrait) {
  .literary-site .hero--literary { background:radial-gradient(ellipse at 70% 20%,#493b2b,#24211e 75%) !important; }
  .literary-site .books .book-read-online { background:var(--color-yellow) !important;color:var(--color-brown) !important;padding:12px 20px !important;border-radius:6px !important; }
}

/* Mobile/tablet overrides for the restored rounded design. */
@media (max-width:1180px), (orientation:portrait) {
 .literary-site .hero.hero--literary { block-size:auto !important; overflow:visible !important; }
 .literary-site .literary-hero-button { width:60px;height:60px;min-height:60px;padding:0; }
 .literary-site .books .book-read-online { border-radius:999px !important; }
 .literary-site .about { padding-block-start:100px; }
 .literary-site .literary-crossing-pen { right:12%;width:90px;height:228px;bottom:-110px; }
}
@media (max-width:600px) {
 .literary-site .hero.hero--literary { padding-top:108px; }
 .literary-site .literary-notebook { display:grid; width:100px;height:134px;right:22px;top:10px;transform:rotate(12deg); }
 .literary-site .literary-crossing-pen { width:70px;height:178px;bottom:-86px;right:16%; }
 .literary-site .about { padding-block-start:82px; }

}

@media (max-width:1180px), (orientation:portrait) {
 .literary-site .hero.hero--literary, .literary-site .about { background:var(--literary-desk) !important; }
 .literary-site .literary-inkwell { width:260px;right:0;bottom:-35px; }
}
@media (max-width:600px) {
 .literary-site .literary-inkwell { width:175px;left:4px;right:auto;top:-4px;bottom:auto; }
}

@media (max-width:1180px), (orientation:portrait) {
 .literary-site .books { background:var(--literary-desk) !important; }
 .literary-site .announcements .carousel-track { display:block !important;grid-template-columns:1fr !important;padding:16px 46px 26px; }
 .literary-site .announcements .carousel-item { width:100% !important;max-width:none !important;flex:0 0 100% !important; }
 .literary-site .announcement-card { padding:28px 30px; }
 .literary-site .announcements .carousel-pagination { position:static !important; }
}
@media (max-width:600px) {
 .literary-site .announcements .carousel-track { padding:12px 28px 24px; }
 .literary-site .announcement-card { padding:24px 18px;min-height:340px;border-left-width:8px; }
 .literary-site .books .carousel-item::after { background:linear-gradient(0deg,#222 10%,#222b 40%,transparent); }
}
@media (max-width:1180px), (orientation:portrait) {
 .literary-site .announcements .ann-autoplay { grid-column:1 / -1 !important;grid-row:auto !important;justify-self:center;inline-size:auto !important;max-inline-size:100% !important;width:auto !important; }
}

@media (max-width:1180px), (orientation:portrait) {
 .literary-site .announcements .announcement-card { display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;padding:0 !important;border-left-width:1px;max-inline-size:none !important; }
 .ann-spread-left,.ann-spread-right { padding:26px 22px;gap:15px; }
}
@media (max-width:600px) {
 .literary-site .announcements .carousel-track { padding:12px 4px 26px !important; }
 .literary-site .announcements .announcement-card { min-block-size:360px;min-height:360px; }
 .ann-spread-left,.ann-spread-right { padding:24px 12px;gap:14px; }
 .literary-site .announcements .card-title { font-size:24px !important;line-height:1.15 !important; }
 .literary-site .announcements .card-excerpt { font-size:15px !important;line-height:1.45 !important; }
 .literary-site .announcements .date { font-size:12px !important; }
 .literary-site .announcements .card-more { min-inline-size:0 !important;inline-size:100% !important;padding:10px 6px !important;font-size:14px !important; }
 .literary-site .announcements .card-media img { height:110px; }
}

@media (max-width:1180px), (orientation:portrait) {
 .literary-site .books .carousel-item { grid-template-columns:1fr !important;gap:18px;padding:26px 35px 50px; }
 .literary-site .books .book-caption { padding:0 !important;margin-inline:auto !important;max-inline-size:580px !important;justify-items:center !important;text-align:center !important; }
 .book-illustration { width:34%;height:280px;top:55px; }
}
@media (max-width:600px) {
 .literary-site .books .book-cover { max-block-size:280px;inline-size:min(52vw,190px); }
 .book-illustration { width:42%;height:210px;top:100px; }
 .book-illustration--left { left:-3%; }
 .book-illustration--right { right:-3%; }
}
@media (max-width:1180px), (orientation:portrait) {
 .literary-site .books { --track-width:100%;padding-inline:0; }
 .literary-site .books .carousel-container { inline-size:100% !important;max-inline-size:none !important; }
 .literary-site .books .book-illustration { width:27%;height:280px;opacity:.45;filter:blur(.5px); }
 .literary-site .books .book-illustration--left { left:0; }
 .literary-site .books .book-illustration--right { right:0; }
}
@media (max-width:600px) {
 .literary-site .books .book-illustration { width:23%;height:210px;top:100px;opacity:.42;filter:blur(.35px); }
 .literary-site .books .carousel-item { padding-inline:16px; }
}

@media (max-width:600px) and (orientation:portrait) {
 .literary-site .literary-crossing-pen { left:55%;top:calc(100% - 10px);height:clamp(248px,71.8vw,299px);block-size:clamp(248px,71.8vw,299px); }
 .literary-site .literary-inkwell { width:155px;top:-4px;bottom:auto; }
}
@media (max-width:900px) and (orientation:landscape) {
 .literary-site .literary-crossing-pen { left:56%;top:94%;height:clamp(280px,48vw,350px);block-size:clamp(280px,48vw,350px); }
}
@media (min-width:601px) and (max-width:1180px) and (orientation:portrait) {
 .literary-site .literary-crossing-pen { left:56%;top:calc(100% - 10px);height:clamp(485px,63vw,685px);block-size:clamp(485px,63vw,685px); }
 .literary-site .literary-inkwell { width:230px; }
}
@media (min-width:901px) and (max-width:1180px) and (orientation:landscape) {
 .literary-site .literary-crossing-pen { left:55%;height:clamp(463px,49.8vw,605px);block-size:clamp(463px,49.8vw,605px); }
}

/* 2.0.12 — блокнот на краю аркуша; анонс як одна читабельна картка. */
@media (max-width:1180px), (orientation:portrait) {
 .literary-site .hero.hero--literary { padding:60px 5vw 150px; }
 .literary-site .literary-hero-sheet { inline-size:100%;padding-top:80px; }
 .literary-site .literary-crossing-pen { width:auto;inline-size:auto; }
 .literary-site .literary-inkwell { width:180px;left:auto;right:2vw;top:auto;bottom:20px; }
 .literary-site .literary-notebook { display:grid;z-index:3;width:125px;height:164px;right:7vw;top:5px;transform:rotate(10deg); }
 .literary-site .announcements .carousel-track { padding:16px 12px 26px !important; }
 .literary-site .announcements .announcement-card {
  grid-template-columns:minmax(0,1fr) !important;grid-template-rows:auto auto;
  min-height:0;min-block-size:0;height:auto;block-size:auto;
  border:1px solid #cbb58e;border-radius:14px;
  background:var(--literary-texture),#fff8e9;
  box-shadow:0 4px 0 -1px #e4d5b8,0 12px 24px #0005;
 }
 .literary-site .announcements .ann-spread-left,
 .literary-site .announcements .ann-spread-right { padding:24px;gap:16px;justify-content:flex-start; }
 .literary-site .announcements .ann-spread-right { padding-top:0; }
 .literary-site .announcements .card-title { font-size:clamp(26px,4vw,34px) !important;line-height:1.25 !important;overflow-wrap:break-word; }
 .literary-site .announcements .card-excerpt { font-size:17px !important;line-height:1.55 !important;inline-size:100%;text-align:start; }
 .literary-site .announcements .date { font-size:14px !important; }
 .literary-site .announcements .card-media img { width:100%;height:auto;max-height:300px;object-fit:contain; }
 .literary-site .announcements .card-more { width:auto !important;inline-size:auto !important;min-height:44px;padding:12px 24px !important;font-size:16px !important;margin-top:4px; }
}
@media (max-width:600px) {
 .literary-site .hero.hero--literary { padding:65px 20px 125px; }
 .literary-site .literary-hero-sheet { padding:74px 22px 34px; }
 .literary-site .literary-inkwell { width:125px;left:auto;right:0;top:auto;bottom:18px; }
 .literary-site .literary-notebook { width:94px;height:122px;right:26px;top:2px; }
 .literary-site .announcements .carousel-track { padding-inline:4px !important; }
 .literary-site .announcements .ann-spread-left { padding:24px 18px 18px; }
 .literary-site .announcements .ann-spread-right { padding:0 18px 24px; }
}
@media (max-width:1180px) and (orientation:landscape) {
 .literary-site .hero.hero--literary { padding:40px 5vw 64px; }
 .literary-site .literary-hero-sheet { inline-size:calc(100% - 150px);padding:30px; }
 .literary-site .literary-notebook { width:96px;height:128px;right:28px;top:12px; }
 .literary-site .literary-inkwell { width:165px;left:auto;right:0;top:auto;bottom:38px; }
}

@media (max-width:1180px), (orientation:portrait) {
 .literary-site .literary-hero-sheet { column-gap:16px; }
 .literary-site .literary-paper-illustration { max-height:340px; }
 .literary-site .books .book-illustration--left { top:0;bottom:auto; }
 .literary-site .books .book-illustration--right { top:auto;bottom:0; }
}
@media (max-width:600px) {
 .literary-site .literary-hero-sheet { grid-template-columns:1fr 1fr;grid-template-areas:"eyebrow eyebrow" "title title" "subtitle subtitle" "button art"; }
 .literary-site .literary-paper-illustration { max-height:190px;width:100%;justify-self:end; }
 .literary-site .literary-hero-button { align-self:center; }
}
@media (min-width:601px) and (max-width:900px) and (orientation:landscape) {
 .literary-site .literary-hero-sheet { grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:12px; }
 .literary-site .literary-paper-illustration { max-height:220px; }
}
@media (max-width:1180px), (orientation:portrait) {
 .literary-site .books .book-illustration--right { bottom:40px; }
}

@media (max-width:1180px), (orientation:portrait) {
 .literary-site .announcements .announcement-card { background:var(--literary-card-background); }
 .literary-site .literary-paper-illustration { max-height:272px; }
 .literary-paper-mask { width:80px; }
 .literary-paper-flags { width:160px; }
}
@media (max-width:600px) {
 .literary-site .literary-hero-sheet { grid-template-areas:"flags flags" "eyebrow eyebrow" "title title" "action action" "art art"; }
 .literary-hero-action { justify-self:center; }
 .literary-paper-art { flex-direction:row;justify-content:center;align-items:center;gap:24px;margin-top:20px; }
 .literary-site .literary-paper-illustration { width:48%;max-height:160px; }
 .literary-paper-mask { width:65px;margin:0;align-self:center; }
 .literary-paper-flags { width:140px; }
}
@media (min-width:601px) and (max-width:900px) and (orientation:landscape) {
 .literary-site .literary-paper-illustration { max-height:176px; }
 .literary-paper-mask { width:65px; }
}

@media (max-width:1180px), (orientation:portrait) {
 .literary-site .hero.hero--literary,.literary-site .about,.literary-site .books,.literary-site .announcements { background:var(--literary-desk-background) !important; }
 .literary-site .literary-paper-illustration { width:100%;max-height:330px; }
}
@media (max-width:600px) {
 .literary-site .literary-paper-illustration { width:min(100%,210px);max-height:245px; }
}
@media (min-width:601px) and (max-width:900px) and (orientation:landscape) {
 .literary-site .literary-paper-illustration { max-height:250px; }
}


/* На мобільних прибираємо лише стикову смугу між двома світлими секціями. */
@media (max-width: 768px) {
  .literary-site .reviews { margin-block-end: 0 !important; }
  .literary-site .contacts { margin-block-start: 0 !important; }
}

/* На вузькому блокноті немає центрального згину: чистий папір без текстури. */
@media (max-width: 1180px), (orientation: portrait) {
  .literary-site .announcements .announcement-card {
    background: linear-gradient(180deg, #fffaf0 0%, #fff3df 100%);
  }
}


/* 2026-10-22 — відповідність фонів мобільних секцій десктопу; масштаб книжкових ілюстрацій. */
/* На вузьких екранах старі фонові правила не повинні змінювати палітру
   секцій literary-site. Значення взяті з десктопного style.css. */
@media (max-width: 1180px), (orientation: portrait) {
  .literary-site .header,
  .literary-site .hero.hero--literary,
  .literary-site .about,
  .literary-site .books,
  .literary-site .announcements,
  .literary-site .footer,
  .literary-site .site-footer {
    background: var(--literary-desk-background) !important;
    background-attachment: fixed !important;
    background-position: 0 0 !important;
    background-size: auto !important;
  }
  .literary-site .reviews,
  .literary-site .contacts {
    background:
      radial-gradient(ellipse at 0 5%, rgba(191,140,69,.15), transparent 58%),
      var(--literary-texture),
      var(--literary-paper) !important;
    background-attachment: fixed !important;
    background-position: 0 0 !important;
    background-size: auto !important;
  }
}

/* Ілюстрації прив'язані до окремого слайда книжки. Змінюється тільки
   розмір та розташування; колір заданий у style.css через --literary-heading. */
@media (max-width: 600px) and (orientation: portrait) {
  .literary-site .books .book-illustration--left {
    width: 38%;
    max-width: none;
    height: clamp(195px, 60vw, 260px);
    top: 2px; /* Зображення не обрізається зверху. */
    bottom: auto;
    left: -3%;
  }
  .literary-site .books .book-illustration--right {
    width: 52%;
    max-width: none;
    height: clamp(135px, 42vw, 188px);
    top: auto;
    bottom: 26px;
    right: -2%;
  }
}


/* 2026-10-22 — вертикальний мобільний вигляд: незалежне центрування
   елементів. Не змінюємо HTML, JS, ширину аркуша чи темні фони секцій. */
@media (max-width: 900px) and (orientation: portrait) {
  /* Кожен елемент Hero займає власний рядок; заголовок не заважає прапорам. */
  .literary-site .literary-hero-sheet {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "flags"
      "eyebrow"
      "title"
      "action"
      "art";
    justify-items: center;
  }
  .literary-site .literary-paper-flags {
    display: block;
    justify-self: center;
    margin-inline: auto;
  }
  .literary-site .literary-eyebrow {
    justify-self: center;
    max-inline-size: 100%;
    text-align: center;
  }
  .literary-site .literary-hero-sheet h1 {
    justify-self: center;
    max-inline-size: 100%;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
  .literary-site .literary-hero-action {
    justify-self: center;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .literary-site .literary-hero-action .literary-hero-subtitle {
    max-inline-size: 100%;
    margin-inline: auto;
    text-align: center;
  }
  .literary-site .literary-hero-action .literary-hero-button {
    align-self: center;
    margin-inline: auto;
  }
  .literary-site .literary-paper-art {
    justify-self: center;
    max-inline-size: 100%;
    margin-inline: auto;
  }
  /* Заголовки секцій і карток, без глобальних змін тексту форм. */
  .literary-site .about h2,
  .literary-site .books h2,
  .literary-site .announcements h2,
  .literary-site .reviews h2,
  .literary-site .contacts h2,
  .literary-site .books .book-caption__title {
    text-align: center;
    margin-inline: auto;
  }
  .literary-site .announcements .card-title {
    text-align: center !important;
  }
}


/* Мобільний Hero: цілісний край паперу та декор у межах секції. */
@media (max-width: 900px) and (orientation: portrait) {
  .literary-site .hero.hero--literary {
    --literary-hero-bottom-space: 150px;
    padding-top: 70px;
    padding-bottom: var(--literary-hero-bottom-space);
  }
  .literary-site .literary-notebook {
    top: 18px;
  }

  /* Край трохи заходить на аркуш, тому між ними немає темної щілини. */
  .literary-site .literary-hero-sheet::before,
  .literary-site .literary-hero-sheet::after {
    height: 16px;
    -webkit-mask: none;
    mask: none;
    clip-path: polygon(0 35%, 3% 18%, 7% 40%, 11% 26%, 15% 43%,
      20% 20%, 25% 35%, 30% 15%, 35% 39%, 40% 23%, 45% 42%,
      50% 19%, 55% 34%, 60% 14%, 65% 38%, 70% 22%, 75% 40%,
      80% 18%, 85% 35%, 90% 21%, 95% 39%, 100% 25%, 100% 100%, 0 100%);
  }
  .literary-site .literary-hero-sheet::before {
    top: -12px;
  }
  .literary-site .literary-hero-sheet::after {
    bottom: -12px;
  }

  /* Предмети рахуються від нижнього краю аркуша, а не від висоти екрана. */
  .literary-site .literary-crossing-pen {
    left: 40%;
    right: auto;
    top: calc(100% - var(--literary-hero-bottom-space) + 22px);
    bottom: auto;
    width: auto;
    inline-size: auto;
    height: clamp(248px, 71.8vw, 520px);
    block-size: clamp(248px, 71.8vw, 520px);
    transform: translate(-50%, -50%) rotate(-84deg);
    z-index: 3;
  }
  .literary-site .literary-inkwell {
    width: clamp(80px, 23vw, 145px);
    left: auto;
    right: 3vw;
    top: calc(100% - var(--literary-hero-bottom-space) + 8px);
    bottom: auto;
    z-index: 4;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  .literary-site .hero.hero--literary {
    --literary-hero-bottom-space: 135px;
  }
  .literary-site .literary-hero-sheet {
    padding-top: 84px;
  }
}