/* RRN — category archive template (67021) refinements.
   Three card properties the widget's own controls could not win:
     - card border: the control is a slider, and even set correctly Elementor
       emitted no border-width rule at all
     - excerpt colour: the theme paints .elementor-post__excerpt p #1A1A2E
     - read-more colour: the theme's link colour (#336699) beats the widget
   Everything else on this template is set natively in Elementor, not here. */

.elementor-67021 .elementor-post__card {
  border: 3px solid #111 !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 #111;
  overflow: hidden;
}

.elementor-67021 .elementor-post__card .elementor-post__excerpt p,
.elementor-67021 .elementor-post__card .elementor-post__excerpt {
  color: #3B3A35 !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
}

.elementor-67021 .elementor-post__card a.elementor-post__read-more,
.elementor-67021 .elementor-post__card .elementor-post__read-more {
  color: #990033 !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.elementor-67021 .elementor-post__card a.elementor-post__read-more:hover { color: #111 !important; }

/* title stays ink on cream whatever the theme does to links */
.elementor-67021 .elementor-post__card .elementor-post__title,
.elementor-67021 .elementor-post__card .elementor-post__title a { color: #111 !important; }

/* the media sits flush inside the ink border */
.elementor-67021 .elementor-post__card .elementor-post__thumbnail__link { margin: -16px -16px 14px !important; }

/* pagination on the brick ground */
.elementor-67021 .elementor-pagination .page-numbers { color: #C9C6BC; font-family: "Space Grotesk", system-ui, sans-serif; }
.elementor-67021 .elementor-pagination .page-numbers.current { color: #F0B43C; font-weight: 700; }
.elementor-67021 .elementor-pagination a.page-numbers:hover { color: #F4EDE2; }

/* ---- hero: copy left, category image right ------------------------------
   Set here rather than in the container's own controls. flex_direction and
   the child `width` sliders did not take through the data layer, and after
   the card-border slider I stopped guessing at control names. For a boxed
   container Elementor lays out .e-con-inner, not the element itself. */
.elementor-67021 .elementor-element-rrnarc1 > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 32px !important;
}
.elementor-67021 .elementor-element-rrncolA { width: 52% !important; flex: 0 0 auto !important; }
.elementor-67021 .elementor-element-rrncolB { width: 44% !important; flex: 0 0 auto !important; }

/* the cream frame and hard shadow the front page and the WU banner both use */
.elementor-67021 .elementor-element-rrnimg1 img {
  border: 3px solid #F4EDE2 !important;
  box-shadow: 10px 10px 0 rgba(0,0,0,.55);
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .elementor-67021 .elementor-element-rrnarc1 > .e-con-inner {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .elementor-67021 .elementor-element-rrncolA,
  .elementor-67021 .elementor-element-rrncolB { width: 100% !important; }
  .elementor-67021 .elementor-element-rrnimg1 img {
    border-width: 2px !important;
    box-shadow: 6px 6px 0 rgba(0,0,0,.55);
  }
}