/* ========================================================================
   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: 1400px) {
  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,
  .modal__dialog,
  .ann-modal__dialog {
    min-inline-size: 0;
  }

  p,
  li,
  a,
  button,
  input,
  textarea,
  select,
  .modal__title,
  .card-title,
  .announcement-card h3,
  .preview-title,
  .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: 1400px) {
  .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: 3%;
    --hero-compass-y: 18px;
    --hero-compass-size: 100px;
    --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: 3%;
    --hero-compass-y: 1%;
    --hero-compass-size: clamp(52px, 15.81vw, 71px);
    --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-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: 3%;
    --hero-compass-y: 2%;
    --hero-compass-size: clamp(54px, 7.905vw, 67px);
    --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(190px, 23.5vw, 270px);
    --hero-compass-x: 3.5%;
    --hero-compass-y: 2.5%;
    --hero-compass-size: clamp(128px, 17.5vw, 190px);
    --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 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);
    --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: 3%;
    --hero-compass-y: 3%;
    --hero-compass-size: clamp(90px, 8.5vw, 120px);
    --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 */
@media (min-width: 1181px) and (max-width: 1400px) and (orientation: landscape) {
  .hero {
    --hero-auto-height: clamp(500px, 37vw, 540px);
    --hero-text-y: calc(49% + 8px);
    --hero-text-size: clamp(3.3rem, 4.05vw, 5rem);
    --hero-link-y: calc(63% - 18px);
    --hero-mask-x: 5%;
    --hero-mask-y: 12%;
    --hero-mask-size: clamp(190px, 16vw, 250px);
    --hero-compass-x: 3%;
    --hero-compass-y: 3.5%;
    --hero-compass-size: clamp(95px, 8vw, 125px);
    --hero-pen-x: 55%;
    --hero-pen-y: calc(91% + 18px);
    --hero-pen-size: clamp(579px, 49vw, 694px);
    --hero-bottle-x: 25%;
    --hero-bottle-y: 88%;
    --hero-bottle-size: clamp(86px, 7.5vw, 110px);
  }
}

/* ========================================================================
   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: min(76vw, 820px) !important;
    max-inline-size: min(76vw, 820px) !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: 17px;
    inset-inline-start: 34px;
    inline-size: 32px;
    block-size: 32px;
    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: 24px;
    inset-inline-start: 16px;
    inline-size: 42px;
    block-size: 42px;
    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
   ======================================================================== */

@media (max-width: 1180px) {
  .modal:not(.is-visible),
  .modal--details:not(.is-visible),
  .modal--chapters:not(.is-visible),
  .ann-modal:not(.is-visible) {
    pointer-events: none !important;
  }

  .modal.is-visible,
  .modal--details.is-visible,
  .modal--chapters.is-visible,
  .ann-modal.is-visible {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
    background: rgba(22, 18, 12, 0.56) !important;
    box-sizing: border-box !important;
  }

  .modal.is-visible .modal__dialog,
  .modal--details.is-visible .modal__dialog,
  .modal--chapters.is-visible .modal__dialog,
  .ann-modal.is-visible .ann-modal__dialog {
    inline-size: min(92vw, 760px) !important;
    max-inline-size: 760px !important;
    max-block-size: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #fff9ef !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34) !important;
    box-sizing: border-box !important;
  }

  .ann-modal.is-visible .ann-modal__dialog {
    inline-size: min(92vw, 900px) !important;
    max-inline-size: 900px !important;
  }

  .modal.is-visible .modal__header,
  .modal--details.is-visible .modal__header,
  .modal--chapters.is-visible .modal__header,
  .ann-modal.is-visible .modal__header {
    flex: 0 0 auto !important;
    min-block-size: 64px !important;
    padding: 10px 24px !important;
    
    
    
    gap: 14px !important;
    /* Лінію малює ::after зі style.css — як у модалці анонсів. */
    
    box-sizing: border-box !important;
  }

  .modal.is-visible .modal__title,
  .modal--details.is-visible .modal__title,
  .modal--chapters.is-visible .modal__title,
  .ann-modal.is-visible .modal__title {
    
    
    font-family: var(--ff-decor, "Great Vibes", cursive) !important;
    
    
    font-weight: 400 !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  .modal.is-visible .modal__close,
  .modal--details.is-visible .modal__close,
  .modal--chapters.is-visible .modal__close,
  .ann-modal.is-visible .modal__close {
    inline-size: 50px !important;
    block-size: 50px !important;
    min-inline-size: 50px !important;
    min-block-size: 50px !important;
    flex: 0 0 50px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    font-size: 1.35rem !important;
  }

  .modal.is-visible .modal__body,
  .modal--details.is-visible .modal__body,
  .modal--chapters.is-visible .modal__body,
  .ann-modal.is-visible .ann-modal__body {
    flex: 1 1 auto !important;
    min-block-size: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .modal--details.is-visible .modal__body {
    display: grid !important;
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 28px !important;
    padding: 16px 28px 24px !important;
  }

  .modal--details.is-visible .modal__cover {
    inline-size: min(100%, 205px) !important;
    max-inline-size: 205px !important;
    max-block-size: 280px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .modal--details.is-visible .modal__content {
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    block-size: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    row-gap: 12px !important;
    overflow: hidden !important;
  }

  .modal--details.is-visible .modal__text {
    min-block-size: 0 !important;
    margin: 0 !important;
    padding-inline-end: 8px !important;
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-size: clamp(0.98rem, 2vw, 1.06rem) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 80%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 80%,
      transparent 100%
    ) !important;
  }

  .modal--details.is-visible .modal__text.is-expanded {
    max-block-size: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .modal--details.is-visible .modal__content:has(.modal__text.is-expanded) {
    grid-template-rows: minmax(0, 1fr) auto !important;
    row-gap: 14px !important;
  }

  .modal--details.is-visible
    .modal__content:has(.modal__text.is-expanded)
    .modal__cta {
    display: none !important;
  }

  .modal--details.is-visible .modal__content:has(.desc-toggle.is-hidden) {
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  .modal--details.is-visible .desc-toggle.is-hidden {
    display: none !important;
  }

  .ann-modal.is-visible .ann-modal__status {
    flex: 0 0 auto !important;
    padding: 8px 26px 0 !important;
    margin: 0 !important;
  }

  .ann-modal.is-visible .ann-modal__body {
    display: grid !important;
    grid-template-columns: minmax(230px, 38%) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 24px !important;
    padding: 14px 28px 24px !important;
  }

  .ann-modal.is-visible .ann-modal__left,
  .ann-modal.is-visible .ann-modal__right {
    min-block-size: 0 !important;
    overflow: hidden !important;
  }

  .ann-modal.is-visible .ann-modal__media {
    display: none !important;
  }

  .ann-modal.is-visible .ann-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .ann-modal.is-visible .ann-meta__item,
  .ann-modal.is-visible .ann-meta__item:nth-child(1),
  .ann-modal.is-visible .ann-meta__item:nth-child(2),
  .ann-modal.is-visible .ann-meta__item:nth-child(5) {
    grid-column: auto !important;
    min-block-size: 58px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  .ann-modal.is-visible .ann-meta__label,
  .ann-modal.is-visible .ann-meta__value {
    font-size: 0.84rem !important;
    line-height: 1.18 !important;
  }

  .ann-modal.is-visible .ann-modal__right {
    display: grid !important;
    grid-template-rows: minmax(0, auto) auto auto !important;
    align-content: start !important;
    row-gap: 12px !important;
  }

  .ann-modal.is-visible .ann-modal__desc {
    min-block-size: 0 !important;
    margin: 0 !important;
    padding-inline-end: 8px !important;
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-size: clamp(0.98rem, 2vw, 1.06rem) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 80%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 80%,
      transparent 100%
    ) !important;
  }

  .ann-modal.is-visible .ann-modal__desc.is-expanded {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .ann-modal.is-visible .ann-modal__right:has(.ann-modal__desc.is-expanded) {
    grid-template-rows: minmax(0, 1fr) auto !important;
    row-gap: 14px !important;
  }

  .ann-modal.is-visible
    .ann-modal__right:has(.ann-modal__desc.is-expanded)
    .modal__cta {
    display: none !important;
  }

  .ann-modal.is-visible .ann-modal__right:has(.desc-toggle.is-hidden),
  .ann-modal.is-visible .ann-modal__right:has(.desc-toggle--ann.is-hidden) {
    grid-template-rows: minmax(0, auto) auto !important;
    align-content: start !important;
  }

  .ann-modal.is-visible .desc-toggle.is-hidden,
  .ann-modal.is-visible .desc-toggle--ann.is-hidden {
    display: none !important;
  }

  .modal--chapters.is-visible .modal__body {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px 28px 24px !important;
  }

  .modal--chapters.is-visible .chapter-col {
    min-block-size: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .modal--chapters.is-visible .chapter-col h4 {
    margin: 0 0 8px !important;
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .modal--chapters.is-visible .chapter-picker {
    display: block !important;
  }

  .modal--chapters.is-visible .chapter-select {
    inline-size: 100% !important;
    min-block-size: 44px !important;
    border-radius: 14px !important;
    /* Match the stronger original selected chapter state on desktop while
       keeping the native mobile select and its interaction logic unchanged. */
    background: color-mix(
      in oklab,
      var(--m-accent, var(--color-yellow)) 18%,
      #fff 82%
    ) !important;
    color: var(--m-ink, #2b1b00) !important;
    border: 1px solid color-mix(
      in oklab,
      var(--m-accent, var(--color-yellow)) 70%,
      #000 30%
    ) !important;
    box-shadow: inset 0 0 0 2px
      color-mix(
        in oklab,
        var(--m-accent, var(--color-yellow)) 50%,
        #fff 50%
      ) !important;
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  .modal--chapters.is-visible .chapter-select:focus {
    outline: 3px solid
      var(--color-border-brown) !important;
    outline-offset: 2px !important;
  }

  .modal--chapters.is-visible .chapter-select option {
    background: #fffdf9 !important;
    color: var(--m-ink, #2b1b00) !important;
    font-weight: 400 !important;
  }

  .modal--chapters.is-visible .chapter-select option:checked {
    background: color-mix(
      in oklab,
      var(--m-accent, var(--color-yellow)) 18%,
      #fff 82%
    ) !important;
    color: var(--m-ink, #2b1b00) !important;
    font-weight: 800 !important;
  }

  .modal--chapters.is-visible .chapter-list {
    display: none !important;
  }

  .modal--chapters.is-visible .preview-col {
    min-block-size: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    row-gap: 12px !important;
    overflow: hidden !important;
  }

  .modal--chapters.is-visible .preview-title {
    margin: 0 !important;
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-size: clamp(1.45rem, 3.6vw, 2rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }

  .modal--chapters.is-visible .preview-scroll {
    min-block-size: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-inline-end: 8px !important;
    scrollbar-color: var(--color-field-border) transparent !important;
  }

  .modal--details.is-visible .modal__text.is-expanded::-webkit-scrollbar,
  .ann-modal.is-visible .ann-modal__desc.is-expanded::-webkit-scrollbar,
  .modal--chapters.is-visible .preview-scroll::-webkit-scrollbar {
    inline-size: 6px !important;
  }

  .modal--details.is-visible .modal__text.is-expanded::-webkit-scrollbar-track,
  .ann-modal.is-visible .ann-modal__desc.is-expanded::-webkit-scrollbar-track,
  .modal--chapters.is-visible .preview-scroll::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .modal--details.is-visible .modal__text.is-expanded::-webkit-scrollbar-thumb,
  .ann-modal.is-visible .ann-modal__desc.is-expanded::-webkit-scrollbar-thumb {
    background: rgba(120, 90, 35, 0.45) !important;
    border-radius: 999px !important;
  }

  .modal--chapters.is-visible .preview-scroll::-webkit-scrollbar-thumb {
    background: var(--color-field-border) !important;
    border-radius: 999px !important;
  }

  .modal--chapters.is-visible .preview-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-brown) !important;
  }

  .modal--chapters.is-visible .chapter-summary,
  .modal--chapters.is-visible .chapter-excerpt .excerpt-text {
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-size: 0.98rem !important;
    line-height: 1.48 !important;
    text-align: left !important;
  }

  .modal--chapters.is-visible .chapter-excerpt {
    border-radius: 14px !important;
  }

  .modal--details.is-visible .desc-toggle,
  .ann-modal.is-visible .desc-toggle,
  .ann-modal.is-visible .desc-toggle--ann {
    inline-size: 44px !important;
    block-size: 44px !important;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
  }

  .modal--details.is-visible .modal__cta,
  .ann-modal.is-visible .modal__cta,
  .ann-modal.is-visible .ann-modal__right .modal__cta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    inline-size: min(100%, 430px) !important;
    max-inline-size: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .modal--details.is-visible .modal__cta .btn,
  .modal--details.is-visible .modal__cta .btn-ghost,
  .modal--details.is-visible .modal__cta .btn.btn--solid,
  .modal--details.is-visible .modal__cta .btn.btn--ghost,
  .modal--details.is-visible .modal__cta [data-action="read"],
  .modal--details.is-visible .modal__cta [data-action="download"],
  .ann-modal.is-visible .modal__cta .btn,
  .ann-modal.is-visible .modal__cta .btn-ghost,
  .ann-modal.is-visible .modal__cta .ann-signup,
  .ann-modal.is-visible .modal__cta .ann-share {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: min(100vw, 100%) !important;
    block-size: 50px !important;
    min-block-size: 50px !important;
    max-block-size: 50px !important;
    padding: 0 1rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .modal--chapters.is-visible .preview-actions {
    
    justify-content: center !important;
    align-items: center !important;
    
    
    
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .modal--chapters.is-visible .preview-actions .btn,
  .modal--chapters.is-visible .preview-actions .btn--solid,
  .modal--chapters.is-visible [data-action="open-chapter"] {
    inline-size: min(100%, 280px) !important;
    max-inline-size: 280px !important;
    min-inline-size: 0 !important;
    block-size: 48px !important;
    min-block-size: 48px !important;
    max-block-size: 48px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
}

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

@media (max-width: 600px) and (orientation: portrait) {
  .modal--chapters.is-visible .modal__body {
    
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    
    
    min-block-size: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .modal--chapters.is-visible .chapter-col {
    
    
    display: grid !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    
  }

  .modal--chapters.is-visible .chapter-col h4 {
    margin: 0 !important;
    font-family: var(--ff-base, "Tinos", serif) !important;
    font-size: clamp(0.98rem, 3.6vw, 1.06rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .modal--chapters.is-visible .chapter-picker {
    inline-size: 100% !important;
  }

  .modal--chapters.is-visible .chapter-select {
    inline-size: 100% !important;
    min-block-size: 42px !important;
    padding-inline: 14px !important;
    border-radius: 12px !important;
    font-size: clamp(0.9rem, 3.15vw, 0.98rem) !important;
  }

  .modal--chapters.is-visible .preview-col {
    
    
    
    
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    row-gap: clamp(12px, 2.4dvh, 16px) !important;
    
    box-sizing: border-box !important;
  }

  .modal--chapters.is-visible .preview-title {
    
    font-size: clamp(1.5rem, 6.8vw, 2rem) !important;
    line-height: 1.08 !important;
  }

  .modal--chapters.is-visible .preview-scroll {
    
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    box-sizing: border-box !important;
  }

  .modal--chapters.is-visible .chapter-summary,
  .modal--chapters.is-visible .chapter-excerpt .excerpt-text {
    font-size: clamp(0.98rem, 3.55vw, 1.07rem) !important;
    line-height: 1.58 !important;
  }

  .modal--chapters.is-visible .chapter-excerpt {
    margin-block-start: clamp(12px, 2.2dvh, 16px) !important;
    padding: 14px 16px !important;
  }

  

}

@media (max-width: 600px) and (max-height: 760px) and (orientation: portrait) {
  

  .modal--chapters.is-visible .chapter-col {
    gap: 7px !important;
  }

  .modal--chapters.is-visible .preview-col {
    row-gap: 10px !important;
  }

  .modal--chapters.is-visible .preview-title {
    font-size: clamp(1.42rem, 6.4vw, 1.82rem) !important;
  }

  .modal--chapters.is-visible .chapter-summary,
  .modal--chapters.is-visible .chapter-excerpt .excerpt-text {
    font-size: clamp(0.94rem, 3.35vw, 1.02rem) !important;
    line-height: 1.48 !important;
  }

  .modal--chapters.is-visible .chapter-excerpt {
    
    padding: 12px 14px !important;
  }

}

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

@media (max-width: 1180px) and (max-height: 620px) and (orientation: landscape) {
  .modal.is-visible,
  .modal--details.is-visible,
  .modal--chapters.is-visible,
  .ann-modal.is-visible {
    padding: 8px 12px !important;
  }

  .modal.is-visible .modal__dialog,
  .modal--details.is-visible .modal__dialog,
  .modal--chapters.is-visible .modal__dialog,
  .ann-modal.is-visible .ann-modal__dialog {
    inline-size: min(88vw, 980px) !important;
    max-inline-size: 980px !important;
    block-size: auto !important;
    max-block-size: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 24px !important;
  }

  .modal.is-visible .modal__header,
  .modal--details.is-visible .modal__header,
  .modal--chapters.is-visible .modal__header,
  .ann-modal.is-visible .modal__header {
    min-block-size: 52px !important;
    padding: 6px 18px !important;
  }

  .modal.is-visible .modal__title,
  .modal--details.is-visible .modal__title,
  .modal--chapters.is-visible .modal__title,
  .ann-modal.is-visible .modal__title {
    
    line-height: 1.05 !important;
  }

  .modal.is-visible .modal__close,
  .modal--details.is-visible .modal__close,
  .modal--chapters.is-visible .modal__close,
  .ann-modal.is-visible .modal__close {
    inline-size: 42px !important;
    block-size: 42px !important;
    min-inline-size: 42px !important;
    min-block-size: 42px !important;
    flex-basis: 42px !important;
  }

  .modal--details.is-visible .modal__body {
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 10px 22px 14px !important;
  }

  .modal--details.is-visible .modal__cover {
    inline-size: min(100%, 180px) !important;
    max-block-size: 220px !important;
  }

  .modal--details.is-visible .modal__content,
  .ann-modal.is-visible .ann-modal__right {
    grid-template-rows: minmax(0, auto) auto auto !important;
    align-content: start !important;
    row-gap: 8px !important;
  }

  .modal--details.is-visible .modal__content:has(.desc-toggle.is-hidden),
  .ann-modal.is-visible .ann-modal__right:has(.desc-toggle.is-hidden),
  .ann-modal.is-visible .ann-modal__right:has(.desc-toggle--ann.is-hidden) {
    grid-template-rows: minmax(0, auto) auto !important;
  }

  .modal--details.is-visible .modal__content:has(.modal__text.is-expanded),
  .ann-modal.is-visible .ann-modal__right:has(.ann-modal__desc.is-expanded) {
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  .modal--details.is-visible .modal__text,
  .modal--details.is-visible .modal__text.is-expanded,
  .ann-modal.is-visible .ann-modal__desc,
  .ann-modal.is-visible .ann-modal__desc.is-expanded {
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
  }

  .modal--details.is-visible .desc-toggle,
  .ann-modal.is-visible .desc-toggle,
  .ann-modal.is-visible .desc-toggle--ann {
    inline-size: 38px !important;
    block-size: 38px !important;
    min-inline-size: 38px !important;
    min-block-size: 38px !important;
  }

  .modal--details.is-visible .modal__cta,
  .ann-modal.is-visible .modal__cta,
  .ann-modal.is-visible .ann-modal__right .modal__cta {
    column-gap: 12px !important;
  }

  .modal--details.is-visible .modal__cta .btn,
  .modal--details.is-visible .modal__cta .btn-ghost,
  .modal--details.is-visible .modal__cta [data-action="read"],
  .modal--details.is-visible .modal__cta [data-action="download"],
  .ann-modal.is-visible .modal__cta .btn,
  .ann-modal.is-visible .modal__cta .btn-ghost,
  .ann-modal.is-visible .modal__cta .ann-signup,
  .ann-modal.is-visible .modal__cta .ann-share,
  .modal--chapters.is-visible .preview-actions .btn,
  .modal--chapters.is-visible [data-action="open-chapter"] {
    block-size: 44px !important;
    min-block-size: 44px !important;
    max-block-size: 44px !important;
    font-size: 0.86rem !important;
  }

  .ann-modal.is-visible .ann-modal__body {
    grid-template-columns: minmax(210px, 35%) minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 10px 22px 14px !important;
  }

  .ann-modal.is-visible .ann-meta__item {
    min-block-size: 46px !important;
  }

  /* CHAPTERS — LANDSCAPE DESKTOP-STYLE LIST
     Desktop scroll behavior is inherited from style.css.
     Right preview-column scroll is intentionally untouched. */
  .modal--chapters.is-visible .modal__body {
    grid-template-columns: minmax(180px, 30%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  .modal--chapters.is-visible .chapter-col {
    min-block-size: 0 !important;
    padding-inline-end: 14px !important;
    border-inline-end: 1px solid var(--m-divider) !important;
  }

  .modal--chapters.is-visible .chapter-picker {
    display: none !important;
  }

  .modal--chapters.is-visible .chapter-list {
    display: grid !important;
  }

  .modal--chapters.is-visible .chapter-btn {
    min-block-size: 42px !important;
    padding: 8px 10px !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
  }
}

/* ========================================================================
   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.
   ======================================================================== */

@media (min-width: 901px) and (max-width: 1180px) {
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__body,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__body {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }

  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__left,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__left {
    display: none !important;
  }

  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__right,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__right {
    inline-size: min(100%, 720px) !important;
    max-inline-size: 720px !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
  }

  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__desc,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__desc {
    inline-size: 100% !important;
    max-inline-size: none !important;
    padding-inline-end: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) and (max-height: 620px) and (orientation: landscape) {
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__body,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__body {
    gap: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }
}

@media (min-width: 700px) and (max-width: 1180px) and (min-height: 900px) and (orientation: portrait) {
  .modal.is-visible,
  .modal--details.is-visible,
  .modal--chapters.is-visible,
  .ann-modal.is-visible {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
    padding-inline: max(12px, env(safe-area-inset-left))
      max(12px, env(safe-area-inset-right)) !important;
  }

  .modal.is-visible .modal__dialog,
  .modal--details.is-visible .modal__dialog,
  .modal--chapters.is-visible .modal__dialog,
  .ann-modal.is-visible .ann-modal__dialog {
    inline-size: min(84vw, 680px) !important;
    max-inline-size: 680px !important;
    max-block-size: calc(100dvh - 74px) !important;
    max-height: calc(100dvh - 74px) !important;
    margin-top: 0 !important;
    margin-bottom: auto !important;
  }

  .ann-modal.is-visible .ann-modal__dialog {
    inline-size: min(84vw, 760px) !important;
    max-inline-size: 760px !important;
  }

  .modal--details.is-visible .modal__dialog:has(.modal__text.is-expanded),
  .ann-modal.is-visible .ann-modal__dialog:has(.ann-modal__desc.is-expanded) {
    block-size: min(58dvh, 565px) !important;
    max-block-size: calc(100dvh - 172px) !important;
    max-height: calc(100dvh - 172px) !important;
  }
}

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

@supports not (height: 100dvh) {
  @media (max-width: 1180px) {
    .modal.is-visible .modal__dialog,
    .modal--details.is-visible .modal__dialog,
    .modal--chapters.is-visible .modal__dialog,
    .ann-modal.is-visible .ann-modal__dialog {
      max-block-size: calc(100vh - 24px) !important;
      max-height: calc(100vh - 24px) !important;
    }
  }

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

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

@media (max-width: 1400px) {
  .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: 1400px) 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: 1181px) and (max-width: 1400px) {
  html[lang^="en"] .header-container {
    grid-template-columns: minmax(390px, 0.95fr) minmax(0, 1.65fr) !important;
    column-gap: clamp(16px, 1.8vw, 26px) !important;
  }

  html[lang^="en"] .brand-group {
    gap: clamp(8px, 0.9vw, 13px) !important;
  }

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

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

  html[lang^="en"] .nav-wrapper {
    gap: clamp(10px, 1.2vw, 18px) !important;
  }

  html[lang^="en"] .js-nav ul {
    gap: clamp(9px, 1vw, 16px) !important;
  }

  html[lang^="en"] .js-nav a {
    font-size: clamp(0.82rem, 0.78vw, 0.98rem) !important;
  }

  html[lang^="en"] .telegram-button {
    inline-size: clamp(40px, 3.8vw, 50px) !important;
    block-size: clamp(40px, 3.8vw, 50px) !important;
    min-inline-size: clamp(40px, 3.8vw, 50px) !important;
    flex-basis: clamp(40px, 3.8vw, 50px) !important;
  }
}

@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
   ======================================================================== */

@media (max-width: 1180px) {
  .modal--details.is-visible
    .modal__content:has(.desc-toggle.is-hidden)
    .modal__text,
  .modal--details.is-visible
    .modal__content:has(.desc-toggle[hidden])
    .modal__text,
  .ann-modal.is-visible
    .ann-modal__right:has(.desc-toggle.is-hidden)
    .ann-modal__desc,
  .ann-modal.is-visible
    .ann-modal__right:has(.desc-toggle--ann.is-hidden)
    .ann-modal__desc,
  .ann-modal.is-visible
    .ann-modal__right:has(.desc-toggle[hidden])
    .ann-modal__desc,
  .ann-modal.is-visible
    .ann-modal__right:has(.desc-toggle--ann[hidden])
    .ann-modal__desc {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .modal--details.is-visible
    .modal__content:has(.desc-toggle.is-hidden)
    .desc-toggle,
  .modal--details.is-visible
    .modal__content:has(.desc-toggle[hidden])
    .desc-toggle,
  .ann-modal.is-visible
    .ann-modal__right:has(.desc-toggle.is-hidden)
    .desc-toggle,
  .ann-modal.is-visible
    .ann-modal__right:has(.desc-toggle--ann.is-hidden)
    .desc-toggle--ann,
  .ann-modal.is-visible
    .ann-modal__right:has(.desc-toggle[hidden])
    .desc-toggle,
  .ann-modal.is-visible
    .ann-modal__right:has(.desc-toggle--ann[hidden])
    .desc-toggle--ann {
    display: none !important;
  }
}

/* ========================================================================
   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
   ======================================================================== */

@media (max-width: 600px) and (orientation: portrait) {
  .modal.is-visible,
  .modal--details.is-visible,
  .modal--chapters.is-visible,
  .ann-modal.is-visible {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .modal.is-visible .modal__dialog,
  .modal--details.is-visible .modal__dialog,
  .modal--chapters.is-visible .modal__dialog,
  .ann-modal.is-visible .ann-modal__dialog {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    block-size: 100dvh !important;
    min-block-size: 100dvh !important;
    max-block-size: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .modal--details.is-visible .modal__dialog:has(.modal__text.is-expanded),
  .ann-modal.is-visible .ann-modal__dialog:has(.ann-modal__desc.is-expanded) {
    block-size: 100dvh !important;
    min-block-size: 100dvh !important;
    max-block-size: 100dvh !important;
    max-height: 100dvh !important;
  }

  .modal.is-visible .modal__header,
  .modal--details.is-visible .modal__header,
  .modal--chapters.is-visible .modal__header,
  .ann-modal.is-visible .modal__header {
    flex: 0 0 auto !important;
    min-block-size: 58px !important;
    padding: 5px 14px 8px !important;
    align-items: flex-start !important;
  }

  .modal.is-visible .modal__title,
  .modal--details.is-visible .modal__title,
  .modal--chapters.is-visible .modal__title,
  .ann-modal.is-visible .modal__title {
    max-inline-size: calc(100% - 58px) !important;
    margin: 0 !important;
    font-family: var(--ff-decor, "Great Vibes", cursive) !important;
    
    line-height: 1.05 !important;
    font-weight: 400 !important;
    text-align: left !important;
    letter-spacing: 0 !important;
  }

  .modal.is-visible .modal__close,
  .modal--details.is-visible .modal__close,
  .modal--chapters.is-visible .modal__close,
  .ann-modal.is-visible .modal__close {
    inline-size: 44px !important;
    block-size: 44px !important;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
    flex: 0 0 44px !important;
    position: relative !important;
    inset-block-start: -1px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    font-size: 1.25rem !important;
    z-index: 5 !important;
  }

  .modal.is-visible .modal__close:focus,
  .modal--details.is-visible .modal__close:focus,
  .modal--chapters.is-visible .modal__close:focus,
  .ann-modal.is-visible .modal__close:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .modal--details.is-visible .modal__cta .btn:focus,
  .modal--details.is-visible .modal__cta .btn-ghost:focus,
  .modal--details.is-visible .modal__cta [data-action="read"]:focus,
  .modal--details.is-visible .modal__cta [data-action="download"]:focus,
  .ann-modal.is-visible .modal__cta .btn:focus,
  .ann-modal.is-visible .modal__cta .btn-ghost:focus,
  .ann-modal.is-visible .modal__cta .ann-signup:focus,
  .ann-modal.is-visible .modal__cta .ann-share:focus,
  .modal--details.is-visible .desc-toggle:focus,
  .ann-modal.is-visible .desc-toggle:focus,
  .ann-modal.is-visible .desc-toggle--ann:focus {
    outline: none !important;
  }

  .modal--details.is-visible .modal__body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(30px, 5.2dvh, 48px) !important;
    padding: clamp(18px, 2.8dvh, 28px) clamp(18px, 5vw, 24px)
      calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .modal--details.is-visible .modal__cover {
    inline-size: min(40vw, 165px) !important;
    max-inline-size: 165px !important;
    max-block-size: 215px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .modal--details.is-visible .modal__content,
  .modal--details.is-visible .modal__content:has(.desc-toggle.is-hidden),
  .modal--details.is-visible .modal__content:has(.desc-toggle[hidden]) {
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    row-gap: 0 !important;
  }

  .modal--details.is-visible .modal__content:has(.modal__text.is-expanded) {
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  .modal--details.is-visible
    .modal__content:has(.modal__text.is-expanded)
    .modal__cta,
  .ann-modal.is-visible
    .ann-modal__right:has(.ann-modal__desc.is-expanded)
    .modal__cta {
    display: none !important;
  }

  .modal--details.is-visible .modal__text,
  .modal--details.is-visible .modal__text.is-expanded {
    font-size: clamp(1.08rem, 4.35vw, 1.28rem) !important;
    line-height: 1.55 !important;
  }

  .modal--details.is-visible .desc-toggle {
    inline-size: 50px !important;
    block-size: 50px !important;
    min-inline-size: 50px !important;
    min-block-size: 50px !important;
    margin: clamp(28px, 6dvh, 58px) auto 14px !important;
  }

  .modal--details.is-visible .modal__cta {
    column-gap: 14px !important;
  }

  .modal--details.is-visible .modal__cta .btn,
  .modal--details.is-visible .modal__cta .btn-ghost,
  .modal--details.is-visible .modal__cta [data-action="read"],
  .modal--details.is-visible .modal__cta [data-action="download"] {
    block-size: 54px !important;
    min-block-size: 54px !important;
    max-block-size: 54px !important;
    font-size: clamp(0.98rem, 4vw, 1.08rem) !important;
  }

  .ann-modal.is-visible .ann-modal__status {
    padding: 8px 16px 0 !important;
  }

  .ann-modal.is-visible .ann-modal__body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(18px, 3.2dvh, 26px) !important;
    padding: 10px clamp(16px, 4.8vw, 22px)
      calc(24px + env(safe-area-inset-bottom)) !important;
    min-block-size: 0 !important;
    overflow: hidden !important;
  }

  .ann-modal.is-visible .ann-modal__right,
  .ann-modal.is-visible .ann-modal__right:has(.desc-toggle.is-hidden),
  .ann-modal.is-visible .ann-modal__right:has(.desc-toggle--ann.is-hidden),
  .ann-modal.is-visible .ann-modal__right:has(.desc-toggle[hidden]),
  .ann-modal.is-visible .ann-modal__right:has(.desc-toggle--ann[hidden]) {
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    row-gap: 10px !important;
    align-content: stretch !important;
    block-size: 100% !important;
  }

  .ann-modal.is-visible .ann-modal__right:has(.ann-modal__desc.is-expanded) {
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  .ann-modal.is-visible .ann-modal__desc,
  .ann-modal.is-visible .ann-modal__desc.is-expanded {
    font-size: clamp(1.12rem, 4.55vw, 1.32rem) !important;
    line-height: 1.52 !important;
    letter-spacing: 0.005em !important;
  }

  .ann-modal.is-visible .desc-toggle,
  .ann-modal.is-visible .desc-toggle--ann {
    inline-size: 46px !important;
    block-size: 46px !important;
    min-inline-size: 46px !important;
    min-block-size: 46px !important;
  }

  .ann-modal.is-visible .modal__cta,
  .ann-modal.is-visible .ann-modal__right .modal__cta {
    column-gap: 10px !important;
  }

  .ann-modal.is-visible .modal__cta .btn,
  .ann-modal.is-visible .modal__cta .btn-ghost,
  .ann-modal.is-visible .modal__cta .ann-signup,
  .ann-modal.is-visible .modal__cta .ann-share {
    block-size: 46px !important;
    min-block-size: 46px !important;
    max-block-size: 46px !important;
    font-size: clamp(0.9rem, 3.6vw, 1rem) !important;
  }
}

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

@media (max-width: 600px) and (max-height: 760px) and (orientation: portrait) {
  .modal--details.is-visible .modal__body {
    gap: clamp(22px, 4.2dvh, 34px) !important;
    padding-block-start: 14px !important;
    padding-block-end: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  .modal--details.is-visible .modal__cover {
    inline-size: min(36vw, 145px) !important;
    max-inline-size: 145px !important;
    max-block-size: 188px !important;
  }

  .ann-modal.is-visible .ann-modal__body {
    gap: clamp(16px, 3dvh, 24px) !important;
    padding-block-start: 8px !important;
    padding-block-end: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .ann-modal.is-visible .ann-modal__desc,
  .ann-modal.is-visible .ann-modal__desc.is-expanded {
    font-size: clamp(1.08rem, 4.35vw, 1.24rem) !important;
    line-height: 1.48 !important;
  }

  .ann-modal.is-visible .modal__cta .btn,
  .ann-modal.is-visible .modal__cta .btn-ghost,
  .ann-modal.is-visible .modal__cta .ann-signup,
  .ann-modal.is-visible .modal__cta .ann-share {
    block-size: 44px !important;
    min-block-size: 44px !important;
    max-block-size: 44px !important;
    font-size: 0.88rem !important;
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 600px) and (orientation: portrait) {
    .modal.is-visible .modal__dialog,
    .modal--details.is-visible .modal__dialog,
    .modal--chapters.is-visible .modal__dialog,
    .ann-modal.is-visible .ann-modal__dialog {
      block-size: 100vh !important;
      min-block-size: 100vh !important;
      max-block-size: 100vh !important;
      max-height: 100vh !important;
    }
  }
}

/* ========================================================================
   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: та сама логіка каруселей без зміни кольорів. */
.books .carousel-container:has(> .carousel-button.prev:disabled):has(> .carousel-button.next:disabled)
  > .carousel-button,
.announcements .custom-carousel:has(> .carousel-button.prev:disabled):has(> .carousel-button.next:disabled)
  > .carousel-button,
.reviews__prev[hidden],
.reviews__more[hidden],
.reviews__grid:has(> .reviews__prev.disabled):has(> .reviews__more.disabled)
  > :is(.reviews__prev, .reviews__more) {
  display: none !important;
}

/* ========================================================================
   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
   Заголовок залишається зліва, але трохи наближається до середини.
   По вертикалі заголовок і хрестик стоять точно посередині рядка.
   ======================================================================== */

@media (max-width: 1180px) {
  .modal.is-visible .modal__header,
  .modal--details.is-visible .modal__header,
  .modal--chapters.is-visible .modal__header,
  .ann-modal.is-visible .modal__header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-inline: clamp(14px, 3vw, 24px) !important;
    border-bottom: 0 !important;
  }

  .modal.is-visible .modal__title,
  .modal--details.is-visible .modal__title,
  .modal--chapters.is-visible .modal__title,
  .ann-modal.is-visible .modal__title {
    inline-size: auto !important;
    max-inline-size: calc(100% - 72px) !important;
    margin: 0 0 0 clamp(12px, 3vw, 28px) !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .modal.is-visible .modal__close,
  .modal--details.is-visible .modal__close,
  .modal--chapters.is-visible .modal__close,
  .ann-modal.is-visible .modal__close {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}

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

@media (max-width: 1180px) {
  .modal.is-visible .modal__title,
  .modal--details.is-visible .modal__title,
  .modal--chapters.is-visible .modal__title,
  .ann-modal.is-visible .modal__title {
    font-size: clamp(1.85rem, 3.6vw, 2.5rem) !important;
    line-height: 1.08 !important;
  }

  .modal--chapters.is-visible .preview-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    inline-size: min(100%, 580px) !important;
    max-inline-size: 580px !important;
    min-block-size: 50px !important;
    margin-inline: auto !important;
  }

  .modal--chapters.is-visible .preview-actions > .btn,
  .modal--chapters.is-visible .preview-actions > .chapter-download,
  .modal--chapters.is-visible .chapter-download > .btn,
  .modal--chapters.is-visible [data-action="open-chapter"],
  .modal--chapters.is-visible [data-action="download-chapter"] {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: 50px !important;
    min-block-size: 50px !important;
    max-block-size: 50px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .modal--chapters.is-visible .chapter-download {
    display: block !important;
    position: relative !important;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  .modal.is-visible .modal__title,
  .modal--details.is-visible .modal__title,
  .modal--chapters.is-visible .modal__title,
  .ann-modal.is-visible .modal__title {
    font-size: clamp(1.8rem, 8.8vw, 2.45rem) !important;
  }
}

@media (max-width: 1180px) and (max-height: 620px) and (orientation: landscape) {
  .modal.is-visible .modal__title,
  .modal--details.is-visible .modal__title,
  .modal--chapters.is-visible .modal__title,
  .ann-modal.is-visible .modal__title {
    font-size: clamp(1.65rem, 6vh, 2.2rem) !important;
  }

  .modal--chapters.is-visible .preview-actions {
    inline-size: min(100%, 560px) !important;
    max-inline-size: 560px !important;
  }
}


/* ========================================================================
   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.
   ======================================================================== */

@media (max-width: 600px) and (orientation: portrait) {
  .modal--chapters.is-visible .modal__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 12px 16px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal--chapters.is-visible .chapter-col {
    flex: 0 0 auto !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-block-size: auto !important;
    overflow: visible !important;
  }

  .modal--chapters.is-visible .preview-col {
    flex: 1 1 auto !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-block-size: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  .modal--chapters.is-visible .preview-title {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .modal--chapters.is-visible .preview-scroll {
    flex: 0 0 auto !important;
    min-block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
    padding-inline-end: 0 !important;
    scrollbar-gutter: auto !important;
  }

  .modal--chapters.is-visible .chapter-summary {
    margin: 0 !important;
  }

  .modal--chapters.is-visible .chapter-excerpt {
    margin: 12px 0 0 !important;
  }

  .modal--chapters.is-visible .preview-actions {
    flex: 0 0 auto !important;
    position: sticky !important;
    inset-block-end: -10px !important;
    z-index: 12 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 16px !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    min-block-size: 0 !important;
    margin-block-start: auto !important;
    margin-block-end: 0 !important;
    margin-inline: 0 !important;
    padding:
      54px
      0
      calc(10px + env(safe-area-inset-bottom))
      !important;
    background: linear-gradient(
      to bottom,
      rgba(255, 250, 242, 0) 0,
      rgba(255, 250, 242, 0.58) 18px,
      rgba(255, 250, 242, 0.92) 36px,
      #fffaf2 58px
    ) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .modal--chapters.is-visible .preview-actions > .btn,
  .modal--chapters.is-visible .preview-actions > .chapter-download {
    inline-size: min(100%, 280px) !important;
    max-inline-size: 280px !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
  }

  .modal--chapters.is-visible .chapter-download {
    display: block !important;
    position: relative !important;
  }

  .modal--chapters.is-visible .chapter-download > .btn,
  .modal--chapters.is-visible [data-action="open-chapter"],
  .modal--chapters.is-visible [data-action="download-chapter"] {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: 48px !important;
    min-block-size: 48px !important;
    max-block-size: 48px !important;
    margin: 0 !important;
    padding-inline: 12px !important;
    font-size: clamp(0.88rem, 3.15vw, 0.96rem) !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 600px) and (max-height: 760px) and (orientation: portrait) {
  .modal--chapters.is-visible .modal__body {
    gap: 10px !important;
    padding-block-start: 10px !important;
  }

  .modal--chapters.is-visible .preview-col {
    gap: 10px !important;
  }

  .modal--chapters.is-visible .chapter-excerpt {
    margin-block-start: 8px !important;
  }

  .modal--chapters.is-visible .preview-actions {
    gap: 12px !important;
    padding-block-start: 42px !important;
    padding-block-end: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .modal--chapters.is-visible .chapter-download > .btn,
  .modal--chapters.is-visible [data-action="open-chapter"],
  .modal--chapters.is-visible [data-action="download-chapter"] {
    block-size: 46px !important;
    min-block-size: 46px !important;
    max-block-size: 46px !important;
  }
}

/* ========================================================================
   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;
  }

  
}

@media (max-width: 380px) {
  
}


/* ========================================================================
   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;
  }
}

@media (max-width: 380px) {
  

  
}


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

@media (max-width: 768px) {
  

  
}

@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;
  }
}


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

@media (max-width: 900px) {
  .modal--details.is-visible .book-read-choice {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }

  .modal--details.is-visible .book-read-choice__trigger {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }

  .modal--details.is-visible .book-read-menu {
    inline-size: min(292px, calc(100vw - 34px));
    inset-block-end: calc(100% + 10px);
  }

  .modal--details.is-visible .book-read-menu__item {
    min-block-size: 43px;
    padding: 7px 9px;
    font-size: .94rem;
  }
}

@media (max-width: 480px) {
  .modal--details.is-visible .book-read-menu {
    inline-size: min(238px, calc(100vw - 42px));
    inset-inline-start: 0;
    transform: translateY(7px);
  }

  .modal--details.is-visible
    .book-read-choice.is-open
    .book-read-menu {
    transform: translateY(0);
  }

  .modal--details.is-visible .book-read-menu::after {
    inset-inline-start: 22%;
    transform: translate(-50%, -6px) rotate(45deg);
  }

  .modal--details.is-visible .book-read-menu__item {
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    column-gap: 8px;
    font-size: .88rem;
  }
}



/* ========================================================================
   MOBILE — download dropdowns match the mobile “Читати” menu
   ======================================================================== */
@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: 50% !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: translate(-50%, 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: translate(-50%, 0) !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--details.is-visible .book-download__format.has-inline-download-icon::before,
  .modal--chapters.is-visible .chapter-download__format::before,
  .modal--chapters.is-visible .chapter-download__format.has-inline-download-icon::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;
  }
}

@media (max-width: 480px) {
  .modal--details.is-visible .book-download__formats,
  .modal--chapters.is-visible .chapter-download__formats {
    inline-size: min(238px, calc(100vw - 42px)) !important;
    min-inline-size: min(238px, calc(100vw - 42px)) !important;
    max-inline-size: min(238px, calc(100vw - 42px)) !important;
  }
}


/* ========================================================================
   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.
   ======================================================================== */
@media (max-width: 480px) {
  .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: translateY(0) !important;
  }

  .modal--details.is-visible .book-download__formats::after,
  .modal--chapters.is-visible .chapter-download__formats::after {
    inset-inline-start: auto !important;
    inset-inline-end: 22% !important;
    transform: translate(50%, -6px) rotate(45deg) !important;
  }
}


/* ========================================================================
   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.
   ======================================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  .ann-modal.is-visible.ann-modal--meta-single .ann-modal__status {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 22px 0 !important;
    margin: 0 !important;
  }

  .ann-modal.is-visible.ann-modal--meta-single
    .ann-modal__status
    .ann-status--pill {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .ann-modal.is-visible.ann-modal--meta-single .ann-modal__single-meta {
    display: inline-flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px 7px !important;
    max-inline-size: min(280px, calc(100% - 120px)) !important;
    padding: 0.3rem 0.58rem !important;
    border: 1px solid #e6d4ac !important;
    border-radius: 10px !important;
    background: #fffaf2 !important;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.06) !important;
    color: #3a2a18 !important;
    line-height: 1.2 !important;
  }

  .ann-modal.is-visible.ann-modal--meta-single
    .ann-modal__single-meta-label {
    color: #7a4a00 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
  }

  .ann-modal.is-visible.ann-modal--meta-single
    .ann-modal__single-meta-value {
    color: #3a2a18 !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    overflow-wrap: anywhere !important;
  }

  .ann-modal.is-visible.ann-modal--meta-single .ann-meta {
    display: none !important;
  }

  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__body,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__body {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__left,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__left {
    display: none !important;
  }

  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__right,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__right {
    inline-size: min(100%, 760px) !important;
    max-inline-size: 760px !important;
    margin-inline: auto !important;
  }
}


/* ========================================================================
   ANNOUNCEMENT MODAL — LANDSCAPE CENTERED TEXT COLUMN
   Keep the paragraph left-aligned, but center the whole text column,
   matching the desktop treatment.
   ======================================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-single
    .ann-modal__desc,
  .ann-modal.is-visible.ann-modal--no-media.ann-modal--meta-none
    .ann-modal__desc {
    inline-size: min(100%, 760px) !important;
    max-inline-size: 760px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    text-align: start !important;
  }
}


/* ========================================================================
   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: 18px !important;
    inset-inline-start: 38px !important;
    inline-size: 30px !important;
    block-size: 30px !important;
    font-size: 13px !important;
  }

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