/* Shared v3 dark footer for the research side.
   Palette hard-coded (not var()) so this works on any page,
   including shell-nav pages that don't define the v3 tokens. */

.rf-footer {
  background:#0D0D0F; color:#FFFFFF;
  padding:66px 0 40px;
  font-family:'DM Sans',system-ui,sans-serif;
}
.rf-footer .rf-wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
.rf-footer * { box-sizing:border-box; }

.rf-footer-top {
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-bottom:42px; border-bottom:0.5px solid #333333;
}

.rf-footer-brand .rf-wm {
  font-family:'Playfair Display','DM Serif Display',Georgia,serif;
  font-weight:400; font-size:24px; color:#FFFFFF; letter-spacing:-0.01em;
}
.rf-footer-brand .rf-wt {
  font-size:9.5px; font-weight:700; letter-spacing:0.3em;
  text-transform:uppercase; color:#A0A0A5; margin-left:8px;
}
.rf-footer-brand p {
  font-size:13px; color:#A0A0A5; max-width:260px;
  margin:14px 0 0; line-height:1.6;
}

.rf-footer-cols { display:flex; gap:64px; flex-wrap:wrap; }
.rf-footer-col h4 {
  font-size:10.5px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:#7D7D7D; margin:0 0 16px;
  font-family:'DM Sans',system-ui,sans-serif;
}
.rf-footer-col a {
  display:block; font-size:13px; color:rgba(249,249,246,0.78);
  margin-bottom:11px; text-decoration:none;
  transition:color 0.2s ease;
}
.rf-footer-col a:hover { color:#FFFFFF; }

.rf-footer-fine {
  padding-top:28px; font-size:11.5px; color:#A0A0A5;
  line-height:1.7; max-width:720px; margin:0;
}
.rf-footer-legal {
  margin:14px 0 0; font-size:10.5px; color:#7D7D7D;
  letter-spacing:0.02em;
}

@media (max-width:680px) {
  .rf-footer { padding:44px 0 30px; }
  .rf-footer-top { gap:28px; padding-bottom:30px; }
  /* 2-column grid on mobile with an explicit row/column placement so
     Documentation sits directly above Legal (right column) and Shop
     sits above Company (left column). Without this, flex-wrap put
     Documentation in the top-right which was visually adrift. */
  .rf-footer-cols {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "shop    company"
      "docs    legal";
    gap:32px 36px;
  }
  .rf-footer-col:nth-child(1) { grid-area:shop; }
  .rf-footer-col:nth-child(2) { grid-area:docs; }
  .rf-footer-col:nth-child(3) { grid-area:company; }
  .rf-footer-col:nth-child(4) { grid-area:legal; }
}