/* Research Locker. Generated by build_research_locker.py -- edit that, not this.
   Namespaced rlk-* so it cannot collide with the retired locker-* rules or with
   anything in the shared style.css. */
.rlk { max-width: 1000px; }
.rlk-stats { display:flex; justify-content:space-around; background:var(--bg); border-top:3px solid var(--red);
             border-bottom:1px solid var(--border); padding:22px 16px; margin:28px 0; }
.rlk-stat { text-align:center; }
.rlk-stat__num { display:block; font-family:Merriweather,Georgia,serif; font-size:34px; font-weight:900; color:var(--red); line-height:1.1; }
.rlk-stat__label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mid-gray); margin-top:4px; }

.rlk-hero { display:flex; gap:22px; align-items:flex-start; text-decoration:none; color:inherit; border:1px solid var(--border); border-left:4px solid var(--red);
            padding:20px 22px; margin-bottom:26px; background:#fff; transition:box-shadow .18s, transform .18s; }
.rlk-hero:hover { box-shadow:0 6px 22px rgba(0,0,0,.09); transform:translateY(-1px); }
.rlk-hero__eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase;
                     letter-spacing:.07em; color:var(--red); }
.rlk-hero__dot { width:7px; height:7px; border-radius:50%; background:var(--red); }
.rlk-hero__date { display:block; font-size:12px; font-weight:700; color:var(--mid-gray); margin-top:9px; }
.rlk-hero__title { font-family:Merriweather,Georgia,serif; font-size:25px; font-weight:900; line-height:1.25; margin:5px 0 0; }
.rlk-hero__desc { font-size:15px; line-height:1.55; color:#333; margin:9px 0 0; }
.rlk-hero__cta { display:inline-block; margin-top:13px; font-size:13px; font-weight:700; color:var(--red); }

.rlk-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.rlk-search { flex:1 1 260px; padding:10px 13px; font-size:15px; font-family:inherit; border:1px solid var(--border); }
.rlk-search:focus { outline:2px solid var(--red); outline-offset:-2px; }
.rlk-sort { display:flex; gap:6px; }
.rlk-sortbtn, .rlk-chip { cursor:pointer; font-family:inherit; background:#fff; border:1px solid var(--border);
                          padding:7px 13px; font-size:12px; font-weight:700; color:var(--mid-gray); }
.rlk-sortbtn.is-active, .rlk-chip.is-active { background:var(--red); border-color:var(--red); color:#fff; }
.rlk-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.rlk-chip__n { opacity:.65; font-weight:400; margin-left:3px; }
.rlk-empty { color:var(--mid-gray); font-size:15px; padding:26px 0; }

.rlk-list { border-top:1px solid var(--border); }
.rlk-row { display:grid; grid-template-columns:38px 46px 122px 140px 1fr auto; gap:13px; align-items:center;
           padding:15px 0; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; }
.rlk-row:hover { background:#fafafa; }
.rlk-row[hidden] { display:none; }
.rlk-row__num { font-family:Merriweather,Georgia,serif; font-size:17px; font-weight:700; color:var(--mid-gray); text-align:center; }
.rlk-row__date { font-size:13px; font-weight:700; color:var(--mid-gray); }
.rlk-pill { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
            color:var(--red); border:1px solid currentColor; padding:3px 8px; white-space:nowrap; }
.rlk-pill--soft { color:var(--mid-gray); }
.rlk-row__title { display:block; font-size:16px; font-weight:700; line-height:1.35; }
.rlk-row:hover .rlk-row__title { color:var(--red); }
.rlk-row__desc { display:block; font-size:13px; line-height:1.5; color:#555; margin-top:3px; }
.rlk-row__action { font-size:11px; font-weight:700; color:var(--red); white-space:nowrap; }

/* Covers */
/* Flex, not float. The cover <img> is a SIBLING that follows .rlk-hero__text in
   the DOM, and a float lands at the vertical position it occupies in normal
   flow -- so floating it right parked it at the BOTTOM of the card, level with
   the CTA instead of the headline. Flex puts it beside the text and
   align-items:flex-start tops it out with the eyebrow. */
.rlk-hero__text { flex:1; min-width:0; }
.rlk-hero__cover { flex:0 0 auto; width:118px; height:auto; border:1px solid var(--border); }
.rlk-row__thumb { display:block; width:46px; }
.rlk-row__thumb img { display:block; width:46px; height:auto; border:1px solid var(--border); background:#fff; }
.rlk-row__thumb--none { display:block; width:46px; height:60px; border:1px dashed var(--border); }
.rlk-doc__head { display:flex; gap:26px; align-items:flex-start; }
.rlk-doc__headtext { flex:1; min-width:0; }
.rlk-doc__cover { flex:0 0 auto; width:170px; height:auto; border:1px solid var(--border); }

/* Inline preview. iframe, never embed/object -- our own CSP sets
   object-src 'none', which would block those on our own pages. */
.rlk-preview { margin-top:30px; border:1px solid var(--border); }
.rlk-preview__bar { display:flex; align-items:center; justify-content:space-between; gap:12px;
                    padding:9px 14px; background:var(--bg); border-bottom:1px solid var(--border); }
.rlk-preview__label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--mid-gray); }
.rlk-preview__full { font-size:12px; font-weight:700; color:var(--red); text-decoration:none; }
.rlk-preview__frame { display:block; width:100%; height:820px; border:0; background:#f4f4f4; }

.rlk-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rlk-dl--ghost { background:transparent; color:var(--red); border:1px solid var(--red); }
.rlk-dl--ghost:hover { background:var(--red); color:#fff; }

.rlk-back { display:inline-block; font-size:13px; font-weight:700; color:var(--red); text-decoration:none; margin-bottom:18px; }
.rlk-doc__meta { display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.rlk-doc__date { font-size:13px; font-weight:700; color:var(--mid-gray); }
.rlk-doc__title { font-family:Merriweather,Georgia,serif; font-size:33px; font-weight:900; line-height:1.2; margin:0 0 14px; }
.rlk-doc__summary { font-size:17px; line-height:1.65; color:#222; margin:0 0 24px; max-width:70ch; }
.rlk-dl { display:inline-flex; align-items:baseline; gap:10px; background:var(--red); color:#fff; text-decoration:none;
          font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:14px 26px; transition:background .2s; }
.rlk-dl:hover { background:var(--red-dark); }
.rlk-dl__meta { font-size:11px; font-weight:400; opacity:.85; text-transform:none; letter-spacing:0; }

/* 768px matches the breakpoint the surrounding page chrome already uses. The
   retired locker-* rules broke at 600px, leaving a 601-768px dead zone where the
   grid stayed desktop-wide inside mobile typography. */
@media (max-width: 768px) {
  /* Mobile Safari and most Android browsers will not render a PDF inside an
     iframe -- they show a blank box or one non-scrollable page. Hide the frame
     and let the Download / Open buttons be the path on small screens. */
  .rlk-preview { display:none; }
  .rlk-doc__head { flex-direction:column-reverse; gap:16px; }
  .rlk-doc__cover { width:132px; align-self:flex-start; }
  .rlk-hero { gap:14px; }
  .rlk-hero__cover { width:76px; }
  .rlk-row__thumb { display:none; }
  .rlk-actions { width:100%; }
  .rlk-stats { padding:18px 10px; }
  .rlk-stat__num { font-size:27px; }
  .rlk-hero__title { font-size:21px; }
  .rlk-doc__title { font-size:26px; }
  .rlk-row { grid-template-columns:34px 1fr auto; gap:10px; row-gap:5px; }
  .rlk-row__num { grid-row:1 / span 3; align-self:start; padding-top:2px; }
  .rlk-row__date { grid-column:2; }
  .rlk-row__cat { grid-column:3; grid-row:1; justify-self:end; }
  .rlk-row__body { grid-column:2 / span 2; }
  .rlk-row__action { grid-column:2 / span 2; justify-self:start; }
  .rlk-dl { width:100%; justify-content:center; }
}