/* Small additions to the existing R.I.O. layout. Fonts and desktop navigation remain unchanged. */
.rio-section-anchor { display: block; scroll-margin-top: 90px; }
/* White hero text stays readable even before the slider script runs. */
.swiper-slider { background-color: #282e3e; }
.post-tags:not(a) { cursor: default; }
@media (max-width: 767px) {
  .rio-hero.swiper-slider { height: 370px; min-height: 370px; }
  .rio-hero .jumbotron-mod-1 { padding: 30px 5% 45px; }
  .rio-hero .jumbotron-mod-1 h1 { font-size: clamp(21px, 6.3vw, 34px); letter-spacing: .045em; }
  .rio-hero .jumbotron-mod-1 h1 small { font-size: 16px; letter-spacing: 1.5px; }
  .rio-hero .jumbotron-mod-1 .btn-group-variant,
  .mobile .rio-hero .jumbotron-mod-1 .btn-group-variant {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    margin: 24px 0 0; transform: none;
  }
  .rio-hero .btn-group-variant .btn { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.4; }
}
@media (min-width: 768px) {
  .mobile .rio-hero .jumbotron-mod-1 .btn-group-variant { display: inline-block; }
}
/* Reserve the real aspect ratio for lazy images without changing display width. */
img.rio-lazy-image { height: auto; }
.rio-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px 30px; margin-top: 45px; }
.rio-article-card { min-width: 0; text-align: left; }
.rio-article-card > a { display: block; }
.rio-article-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.rio-article-card h3 { font-size: 23px; line-height: 1.35; margin: 22px 0 12px; overflow-wrap: anywhere; }
.rio-article-card time { display: block; color: #666; margin-bottom: 12px; }
.rio-article-card p { margin-bottom: 18px; }
.rio-articles-intro { max-width: 760px; margin: 0 auto; }
.rio-article-original { font-weight: 700; }
.rio-profile-header { background: #282e3e; }
.rio-profile-header .rd-navbar-wrap { position: relative; height: auto !important; }
.rio-profile-hero { padding: 50px 0 85px; color: #fff; background: #282e3e; }
.rio-profile-hero h1 { font-family: 'Roboto Slab', serif; color: #fff; font-size: 56px; line-height: 1.15; letter-spacing: .04em; }
.rio-profile-hero .rio-profile-kicker { color: #b3caff; letter-spacing: .09em; text-transform: uppercase; font-size: 15px; }
.rio-profile-hero p { color: #fff; }
.rio-profile-hero img { width: 100%; max-width: 570px; height: auto; }
.rio-profile-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.rio-profile-actions .btn { margin: 0; }
.rio-profile-section { padding: 80px 0; }
.rio-profile-section h2 { scroll-margin-top: 90px; }
.rio-profile-section h3 { margin-top: 36px; }
.rio-profile-section p { margin-top: 18px; }
.rio-profile-section .row { align-items: center; }
.rio-profile-section img { width: 100%; height: auto; }
.rio-profile-narrow { max-width: 850px; margin: 0 auto; }
.rio-profile-timeline { list-style: none; padding: 0; margin-top: 35px; }
.rio-profile-timeline li { padding: 14px 0 14px 22px; border-left: 2px solid #759aff; margin: 0; }
.rio-profile-timeline strong { display: block; color: #547abb; }
.rio-profile-contact { overflow-wrap: anywhere; }
@media (max-width: 991px) {
  .rio-profile-hero { padding-top: 50px; }
  .rio-profile-hero h1 { font-size: 42px; }
  .rio-profile-hero img { margin-top: 36px; }
  .rio-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .rio-article-grid { grid-template-columns: 1fr; }
  .rio-profile-hero h1 { font-size: 36px; }
  .rio-profile-hero, .rio-profile-section { padding-bottom: 55px; }
  .rio-profile-section { padding-top: 55px; }
  .rio-profile-section h2 { font-size: 28px; letter-spacing: .06em; }
}

.rio-profile-work-image { max-width: 570px; margin: 26px auto; }
.rio-profile-work-image img { display: block; width: 100%; height: auto; }

/* Keyboard focus remains visible on both light and dark surfaces. */
.page a:focus-visible, .page button:focus-visible,
.page input:focus-visible, .page textarea:focus-visible, .page select:focus-visible,
.lg-outer [tabindex]:focus-visible {
  outline: 3px solid #547abb !important; outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff !important;
}
/* Keep desktop submenus open while their links are reached with Tab. */
.rd-navbar-static .rd-navbar-nav li:focus-within > .rd-navbar-dropdown,
.rd-navbar-fullwidth .rd-navbar-nav li:focus-within > .rd-navbar-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}