/* Blog-only R4 mobile correction. Loaded after mobile-reference.css. */
@media (max-width: 900px) {
  html:has(body[data-mobile-page="blog-390"]) { scroll-behavior: auto; }

  body[data-mobile-page="blog-390"] {
    --blog-chrome-height: 88px;
    background: #030708;
  }

  body[data-mobile-page="blog-390"] main { overflow: visible; }

  body[data-mobile-page="blog-390"] .site-header {
    position: sticky !important;
    top: 0;
    z-index: 120;
    height: 49px;
    min-height: 49px !important;
    padding-inline: 17px !important;
    background: rgba(3, 7, 8, .97);
  }

  body[data-mobile-page="blog-390"] .site-header .brand {
    display: inline-flex;
    gap: 4px;
    font-size: 15px !important;
  }

  body[data-mobile-page="blog-390"] .site-header .brand::before { content: none; }
  body[data-mobile-page="blog-390"] .site-header .brand > span {
    display: inline;
    color: #f4f3ef;
    font-size: inherit !important;
    font-weight: 500 !important;
  }

  body[data-mobile-page="blog-390"] .breadcrumbs {
    position: sticky;
    top: 49px;
    z-index: 115;
    height: 39px;
    min-height: 39px;
    padding: 0 14px;
    border-bottom: 0;
    background: rgba(3, 7, 8, .92);
  }

  body[data-mobile-page="blog-390"] .breadcrumbs ol { height: 39px; }
  body[data-mobile-page="blog-390"] .breadcrumbs a,
  body[data-mobile-page="blog-390"] .breadcrumbs span {
    min-height: 39px;
    font-size: 10px;
  }

  body[data-mobile-page="blog-390"] .blog-hero {
    min-height: 245px;
    margin-top: -39px;
    padding: 3px 17px 12px !important;
  }

  body[data-mobile-page="blog-390"] [data-mobile-role="blog-masthead-image"] {
    top: -39px;
    bottom: auto;
    left: 105px;
    width: calc(100% - 15px);
    height: 284px;
    object-position: center top;
    transform: none;
  }

  body[data-mobile-page="blog-390"] .blog-hero::after {
    background:
      linear-gradient(90deg, #05090b 0%, rgba(5, 9, 11, .99) 58%, rgba(5, 9, 11, .48) 76%, rgba(5, 9, 11, .05) 100%),
      linear-gradient(0deg, #05090b 0%, transparent 34%);
  }

  body[data-mobile-page="blog-390"] .blog-hero h1 {
    max-width: 280px;
    margin: 0 0 14px;
    font-size: 32px !important;
    font-weight: 400;
    line-height: 1.08;
    transform: translateY(-51px);
  }

  body[data-mobile-page="blog-390"] .blog-hero .detail-lead {
    max-width: 220px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.55;
    transform: translateY(-51px);
  }

  body[data-mobile-page="blog-390"] .blog-topics {
    padding: 10px 16px;
    background: #071116;
  }

  body[data-mobile-page="blog-390"] [data-mobile-role="filter-pill-list"] {
    gap: 7px;
    scrollbar-width: none;
  }

  body[data-mobile-page="blog-390"] [data-mobile-role="filter-pill-list"]::-webkit-scrollbar { display: none; }
  body[data-mobile-page="blog-390"] [data-mobile-filter] {
    min-height: 34px;
    padding: 4px 13px;
    font-size: 10px;
    font-weight: 400;
  }

  body[data-mobile-page="blog-390"] .articles-section {
    padding: 0 16px;
    background: #030708;
  }

  body[data-mobile-page="blog-390"] .article-grid { gap: 9px; }
  body[data-mobile-page="blog-390"] .article-grid > a,
  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(n) {
    grid-column: 1 !important;
    width: 100%;
    padding: 14px !important;
    border-color: #354047 !important;
    border-radius: 7px;
    background-position: center !important;
    background-size: cover !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(1) {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    background-image: url('/gagarin/assets/mobile-blog-chess-rear-v2.png') !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(2) {
    height: 194px !important;
    min-height: 194px !important;
    max-height: 194px !important;
    background-image: url('/gagarin/assets/mobile-blog-calculator-v2.png') !important;
    background-position: 68% 64% !important;
    background-size: 136% !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(n+3):nth-child(-n+5) {
    height: 139px !important;
    min-height: 139px !important;
    max-height: 139px !important;
  }

  body[data-mobile-page="blog-390"] #articles .article-grid > a:nth-child(3) {
    height: 223px !important;
    min-height: 223px !important;
    max-height: 223px !important;
    /* styles.css already contributes 64px scroll-padding. */
    scroll-margin-top: 24px;
    background-image: url('/gagarin/assets/desktop-white-suit-microphone.png') !important;
    background-position: center 38% !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(4) {
    background-image: url('/gagarin/assets/desktop-chess-portrait.png') !important;
    background-position: center 44% !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(5) {
    background-image: url('/gagarin/assets/mobile-blog-calculator-v2.png') !important;
    background-position: 12% 12% !important;
  }

  body[data-mobile-page="blog-390"] #articles .article-grid > a:nth-child(5) {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(6) {
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    background-image: url('/gagarin/assets/desktop-wedding-stage-reference.png') !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(n+7):nth-child(-n+9) {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }

  body[data-mobile-page="blog-390"] #articles .article-grid > a:nth-child(7) {
    height: 223px !important;
    min-height: 223px !important;
    max-height: 223px !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px #354047;
    scroll-margin-top: 24px;
    background-image: url('/gagarin/assets/desktop-preparation-reference.png') !important;
  }

  body[data-mobile-page="blog-390"] #articles .article-grid > a:nth-child(7)::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 95px;
    background: #030708;
  }

  body[data-mobile-page="blog-390"] #articles .article-grid > a:nth-child(8) {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    background-image: url('/gagarin/assets/desktop-blue-suit-portrait.png') !important;
  }

  body[data-mobile-page="blog-390"] #articles .article-grid > a:nth-child(9) {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    background-image: url('/gagarin/assets/desktop-outdoor-event.png') !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(10) {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    background-image: url('/gagarin/assets/desktop-mc-club.png') !important;
  }

  body[data-mobile-page="blog-390"] .article-grid > a::after {
    background: linear-gradient(0deg, rgba(3, 6, 8, .9), rgba(3, 6, 8, .04) 76%);
  }

  body[data-mobile-page="blog-390"] .article-grid .editorial-card__number {
    bottom: 57px !important;
    color: #f4f3ef;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
  }

  body[data-mobile-page="blog-390"] .article-grid h2 {
    right: 14px !important;
    bottom: 27px !important;
    left: 14px !important;
    color: #f4f3ef;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.025em;
  }

  body[data-mobile-page="blog-390"] .article-grid > a:nth-child(4) h2 { font-size: 16.5px; }
  body[data-mobile-page="blog-390"] .mobile-card-path {
    right: 14px;
    bottom: 8px;
    left: 14px;
    color: #d3d6d7;
    font-size: 10px;
    font-weight: 400;
  }

  body[data-mobile-page="blog-390"] .mobile-popular-links {
    display: block !important;
    padding: 13px 16px 18px;
    background: #030708;
  }

  body[data-mobile-page="blog-390"] .mobile-popular-links h2 {
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-color: #354047;
    font-size: 14px;
    font-weight: 400;
  }

  body[data-mobile-page="blog-390"] .mobile-popular-links > div {
    gap: 0 14px;
  }

  body[data-mobile-page="blog-390"] .mobile-popular-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    padding: 2px 0;
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-mobile-page="blog-390"] .mobile-popular-links a::after {
    content: "→";
    margin-left: 6px;
    color: #d6dadb;
  }

  body[data-mobile-page="blog-390"] .desktop-blog-faq { display: none; }

  body[data-mobile-page="blog-390"] .author-section {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 10px;
    width: auto;
    height: 275px;
    min-height: 275px;
    margin: 0 12px;
    padding: 12px;
    border: 1px solid #354047;
    border-radius: 7px;
    background: #030708;
    scroll-margin-top: 28px;
  }

  body[data-mobile-page="blog-390"] .author-section > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 0;
  }

  body[data-mobile-page="blog-390"] .author-section .section-no {
    position: absolute;
    top: -9px;
    left: 10px;
    z-index: 2;
    margin: 0;
    padding: 0 4px;
    background: #030708;
    color: #f4f3ef;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  body[data-mobile-page="blog-390"] .author-section h2 {
    margin: 8px 0 14px;
    font-size: 16px;
    font-weight: 500;
  }

  body[data-mobile-page="blog-390"] .author-section p:not(.section-no) {
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
  }

  body[data-mobile-page="blog-390"] .author-section > div > a {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(55% - 17px);
    min-height: 28px;
    border: 1px solid #667077;
    border-radius: 4px;
    font-size: 10px;
    text-decoration: none;
  }

  body[data-mobile-page="blog-390"] .author-section img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 214px !important;
    border-radius: 4px;
    object-fit: cover;
    object-position: center;
  }

  body[data-mobile-page="blog-390"] .related-routes {
    position: relative;
    width: auto;
    height: 144px;
    min-height: 144px;
    margin: 20px 12px 0;
    padding: 14px 12px 10px;
    border: 1px solid #354047;
    border-radius: 7px;
    background: #030708;
  }

  body[data-mobile-page="blog-390"] .related-routes .section-heading { margin: 0; }
  body[data-mobile-page="blog-390"] .related-routes .section-no {
    position: absolute;
    top: -9px;
    left: 10px;
    z-index: 2;
    display: block;
    margin: 0;
    padding: 0 4px;
    background: #030708;
    color: #f4f3ef;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  body[data-mobile-page="blog-390"] .related-routes .section-heading h2 { display: none; }
  body[data-mobile-page="blog-390"] .related-routes .related-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 103px;
    grid-template-columns: none !important;
    gap: 8px;
    height: 96px;
    overflow: hidden;
  }

  body[data-mobile-page="blog-390"] .related-routes .related-grid a {
    display: flex;
    min-height: 95px !important;
    height: 95px;
    padding: 8px;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 5px;
    background-position: center !important;
    background-size: cover !important;
  }

  body[data-mobile-page="blog-390"] .related-routes .related-grid a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(0deg, rgba(3, 6, 8, .9), transparent 72%);
  }

  body[data-mobile-page="blog-390"] .related-routes .related-grid a:nth-child(1) { background-image: url('/gagarin/assets/desktop-wedding-stage-reference.png'); }
  body[data-mobile-page="blog-390"] .related-routes .related-grid a:nth-child(2) { background-image: url('/gagarin/assets/desktop-mc-club.png'); }
  body[data-mobile-page="blog-390"] .related-routes .related-grid a:nth-child(3) { background-image: url('/gagarin/assets/desktop-outdoor-event.png'); }
  body[data-mobile-page="blog-390"] .related-routes .related-grid span,
  body[data-mobile-page="blog-390"] .related-routes .related-grid h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
  }

  body[data-mobile-page="blog-390"] .related-routes .related-grid span { font-size: 7px; }
  body[data-mobile-page="blog-390"] .related-routes .related-grid h3 { font-size: 10px; line-height: 1.1; }
  body[data-mobile-page="blog-390"] .related-routes .related-grid b { display: none; }
  body[data-mobile-page="blog-390"] .related-routes::after {
    content: "›";
    position: absolute;
    top: 44px;
    right: -10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #687279;
    border-radius: 50%;
    background: #091217;
    color: #fff;
    font-size: 22px;
  }

  body[data-mobile-page="blog-390"] .related-routes::before {
    content: "●  •  •  •";
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    color: #7f878b;
    font-size: 7px;
    text-align: center;
  }

  body[data-mobile-page="blog-390"] .mobile-blog-contact {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: auto;
    height: 148px;
    min-height: 148px;
    margin: 19px 12px 0;
    padding: 8px 12px;
    border: 1px solid #354047;
    border-radius: 7px;
    background: #030708;
  }

  body[data-mobile-page="blog-390"] .mobile-blog-contact > h2 {
    position: absolute;
    top: -9px;
    left: 10px;
    z-index: 2;
    margin: 0;
    padding: 0 4px;
    background: #030708;
    font-size: 11px;
    font-weight: 400;
  }

  body[data-mobile-page="blog-390"] .mobile-blog-contact__links {
    display: grid;
    gap: 0;
    padding-top: 0;
  }

  body[data-mobile-page="blog-390"] .mobile-blog-contact__links a {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    min-height: 35px;
    padding: 3px 0;
    color: #eff0ed;
  }

  body[data-mobile-page="blog-390"] .mobile-blog-contact__links a > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #667077;
    border-radius: 50%;
  }

  body[data-mobile-page="blog-390"] .mobile-blog-contact__links b { font-size: 10px; font-weight: 400; }
  body[data-mobile-page="blog-390"] .mobile-blog-contact__links small { color: #9fa7aa; font-size: 8px; }
  body[data-mobile-page="blog-390"] .mobile-blog-contact__links b { grid-column: 2; grid-row: 1; align-self: end; }
  body[data-mobile-page="blog-390"] .mobile-blog-contact__links small { grid-column: 2; grid-row: 2; align-self: start; }
  body[data-mobile-page="blog-390"] .mobile-blog-contact aside {
    padding: 4px 0 0 10px;
    border-left: 1px solid #354047;
  }

  body[data-mobile-page="blog-390"] .mobile-blog-contact aside h3 { margin: 0 0 7px; font-size: 13px; font-weight: 400; }
  body[data-mobile-page="blog-390"] .mobile-blog-contact aside p { margin: 0 0 8px; font-size: 9px; line-height: 1.35; }
  body[data-mobile-page="blog-390"] .mobile-blog-contact aside .button { min-height: 30px; font-size: 9px; }

  body[data-mobile-page="blog-390"] .page-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    width: auto;
    height: 88px;
    min-height: 88px;
    margin: 0 12px 58px;
    padding: 12px 14px;
    border: 1px solid #354047;
    border-radius: 7px;
    background: #030708;
  }

  body[data-mobile-page="blog-390"] .page-cta .section-no { display: none; }
  body[data-mobile-page="blog-390"] .page-cta h2 { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 400; }
  body[data-mobile-page="blog-390"] .page-cta p { margin: 0; font-size: 9px; line-height: 1.35; }
  body[data-mobile-page="blog-390"] .page-cta .button { min-height: 30px; align-self: end; padding-inline: 10px; font-size: 9px; }
  body[data-mobile-page="blog-390"] .site-footer { display: none; }

  body[data-mobile-page="blog-390"] .fixed-actions {
    z-index: 130;
    min-height: 51px;
  }

  body[data-mobile-page="blog-390"] .fixed-actions a { min-width: 0; }
  body[data-mobile-page="blog-390"] .fixed-actions span { line-height: 1.15; }
  body[data-mobile-page="blog-390"] .fixed-actions strong,
  body[data-mobile-page="blog-390"] .fixed-actions small { display: block; }
  body[data-mobile-page="blog-390"] .fixed-actions strong { font-size: 10px; font-weight: 500; }
  body[data-mobile-page="blog-390"] .fixed-actions small { color: #aab1b5; font-size: 8px; font-weight: 400; }
}

@media (max-width: 900px) {
  body[data-mobile-page="blog-390"] .breadcrumbs a,
  body[data-mobile-page="blog-390"] [data-mobile-filter],
  body[data-mobile-page="blog-390"] .mobile-popular-links a,
  body[data-mobile-page="blog-390"] .author-section a,
  body[data-mobile-page="blog-390"] .mobile-blog-contact a,
  body[data-mobile-page="blog-390"] .button { display:flex; align-items:center; min-height:44px; }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 900px) {
    body[data-mobile-page="blog-390"] .fixed-actions {
      animation: mobile-blog-actions linear both;
      animation-timeline: scroll(root block);
      animation-range: 600px 680px;
    }
  }

  @keyframes mobile-blog-actions {
    from { opacity: 0; transform: translateY(12px); visibility: hidden; }
    to { opacity: 1; transform: translateY(0); visibility: visible; }
  }
}

@media (max-width: 900px) {
  body[data-mobile-page="blog-390"] .author-section a,
  body[data-mobile-page="blog-390"] .mobile-blog-contact a,
  body[data-mobile-page="blog-390"] .button { display:flex; align-items:center; min-width:44px; min-height:44px !important; }

  body[data-mobile-page="blog-390"] .mobile-blog-contact__links a {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: 1fr 1fr;
  }

  body[data-mobile-page="blog-390"] .author-section > div > a {
    align-items: flex-end;
    padding-bottom: 6px;
    border: 0;
  }

  body[data-mobile-page="blog-390"] .author-section > div > a::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 26px;
    border: 1px solid #667077;
    border-radius: 4px;
  }
}