/* Research library: the hub (/research/) and articles (/blog/<slug>/).
   dc.css gives .eyebrow .h2 .lede .sec .rv .card .btn-s .dc-page .note .crumbs-like type; the tabs copy home.css .tabs. */

/* hub hero: navy card with the lab image, like the home "Tested, then published" card */
.rs-hero{position:relative;margin-top:28px;border-radius:var(--r);overflow:hidden;background:var(--navy);color:#fff;min-height:420px;display:flex;align-items:flex-end}
.rs-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.rs-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(17 31 51 / .95),rgb(17 31 51 / .35) 70%,rgb(17 31 51 / .1));pointer-events:none}
.rs-hero-in{position:relative;z-index:1;max-width:760px;padding:56px clamp(24px,5vw,72px)}
.rs-hero .eyebrow{justify-content:flex-start;color:rgb(255 255 255 / .72)}
.rs-hero .eyebrow::before{background:#fff}
.rs-hero h1{font-weight:400;font-size:clamp(46px,6vw,88px);letter-spacing:-.045em;line-height:1;margin:0}
.rs-hero-in>p:last-child{margin:20px 0 0;max-width:600px;color:#c4cad4;font-size:18px;line-height:1.55}

/* tabs (copy of the home .tabs look; separate class so dc.js's lineup tabs leave them alone) */
.rs-tabs{display:flex;gap:6px;width:max-content;max-width:100%;margin:34px auto 0;padding:5px;border-radius:99px;background:var(--card);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rs-tabs::-webkit-scrollbar{display:none}
.rs-tabs a{flex:none;border-radius:99px;padding:10px 20px;font-size:15px;color:var(--muted);white-space:nowrap}
.rs-tabs a:hover{color:var(--ink)}
.rs-tabs a[aria-current]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0 / .08)}

/* article cards */
.rs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.rs-start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.rs-card{min-width:0}
.rs-card[hidden]{display:none}
.rs-card-in{display:flex;flex-direction:column;height:100%;background:var(--card);border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s}
.rs-card-in:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgb(0 0 0 / .07)}
.rs-card-img{aspect-ratio:16/10;overflow:hidden;background:#ecebe8}
.rs-card-img img{width:100%;height:100%;object-fit:cover}
.rs-card-body{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1}
.rs-cat{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--soft)}
.rs-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.rs-card h3{font-weight:400;font-size:23px;letter-spacing:-.02em;line-height:1.2;margin:10px 0 8px}
.rs-ex{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.5}
.rs-time{margin:auto 0 0;font-size:13.5px;color:var(--soft)}
.rs-card.big .rs-card-in{background:var(--navy);color:#fff}
.rs-card.big .rs-card-img{aspect-ratio:4/3}
.rs-card.big h3{font-size:28px}
.rs-card.big .rs-ex{color:#aeb8c8}
.rs-card.big .rs-cat,.rs-card.big .rs-time{color:#8f9bb0}
.rs-empty{text-align:center;color:var(--muted);margin:40px 0 0}
.rs-pages{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:40px}
.rs-pages a{min-width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--card);font-size:15px}
.rs-pages a[aria-current]{background:#161616;color:#fff}

/* research-use note (hub) */
.rs-ruo{max-width:860px;margin:0 auto;background:var(--card);border-radius:22px;padding:28px 32px}
.rs-ruo b{display:block;font-weight:500;font-size:18px;margin:0 0 6px}
.rs-ruo p{margin:0;color:#444;font-size:15.5px;line-height:1.6}
.rs-ruo a{text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}

/* article */
.rs-ahead{max-width:960px;text-align:center}
.rs-ahead .crumbs{font-size:13.5px;color:var(--soft);padding:34px 0 0}
.rs-ahead .crumbs a:hover{color:var(--ink)}
.rs-ahead h1{font-weight:400;font-size:clamp(38px,5vw,66px);letter-spacing:-.04em;line-height:1.04;margin:22px auto 0;max-width:900px}
.rs-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin:20px 0 0;color:var(--muted);font-size:14.5px}
.rs-meta span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 12px 2px 0;vertical-align:middle}
.rs-ahero{margin:40px 0 0;border-radius:var(--r);overflow:hidden;background:var(--card)}
.rs-ahero img{width:100%;aspect-ratio:21/9;object-fit:cover}
.rs-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 240px;gap:40px;align-items:start;margin-top:8px}
.rs-layout>.rs-body{grid-column:2}
.rs-toc{grid-column:1;grid-row:1;position:sticky;top:110px;margin-top:56px;padding:22px 22px 18px;background:var(--card);border-radius:20px;font-size:14.5px}
.rs-toc[hidden]{display:none}
.rs-toc p{margin:0 0 10px;font-weight:500}
.rs-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.rs-toc li{counter-increment:t}
.rs-toc a{display:flex;gap:10px;padding:6px 0;color:var(--muted);line-height:1.35}
.rs-toc a::before{content:counter(t,decimal-leading-zero);flex:none;font:500 12px/1.6 var(--monof);color:var(--accent)}
.rs-toc a:hover,.rs-toc a.on{color:var(--ink)}
.rs-body.dc-page{max-width:none;margin:0;padding:24px 0 0}
.rs-body>:first-child{margin-top:32px}
.rs-body p.rs-intro{font-size:20px;line-height:1.5;color:#333;letter-spacing:-.01em}
.rs-body figure{margin:36px 0;border-radius:22px;overflow:hidden;background:var(--card)}
.rs-body figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rs-body figcaption{padding:14px 20px 16px;color:var(--muted);font-size:14px;line-height:1.45}
.rs-body ol{margin:0 0 14px;padding-left:22px}
.rs-body li{margin:0 0 6px}
.rs-body table{margin:20px 0 24px}
.rs-body th{font-weight:500;color:#333}
.rs-body td,.rs-body th{padding:12px 12px 12px 0;vertical-align:top;font-size:15px;line-height:1.5}
.rs-body .rs-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0 24px}
.rs-body .rs-table table{margin:0;min-width:560px}
.rs-body h2{scroll-margin-top:110px}
.rs-body .rs-refs{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.rs-body .rs-refs p,.rs-body .rs-refs li{font-size:14.5px;color:var(--muted)}
.rs-note{margin-top:44px}
.rs-note b{display:block;font-weight:500;margin:0 0 4px}
.rs-note p{margin:0;font-size:15px}
.rs-note a{overflow-wrap:anywhere}

/* pens in this article: the wholesale plain card, wrapped in a link */
.rs-pens-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:44px}
.rs-pen{display:block;flex:0 1 300px;min-width:0}
.rs-pen .card{height:100%;transition:transform .2s,box-shadow .2s}
.rs-pen:hover .card{transform:translateY(-3px);box-shadow:0 18px 40px rgb(0 0 0 / .07)}
.card.plain{padding-bottom:26px}
.card.plain .mgs{margin:8px 0 0;color:var(--soft);font-size:15px}
.rs-back{text-align:center;margin:36px 0 0}

@media (max-width:1180px){
  .rs-layout{grid-template-columns:minmax(0,1fr);max-width:860px}
  .rs-layout>.rs-body{grid-column:1}
  .rs-toc{grid-column:1;grid-row:auto;position:static;margin-top:36px}
}
@media (max-width:1080px){
  .rs-grid,.rs-start-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-start-grid>:last-child:nth-child(odd){grid-column:1/-1}
  .rs-start-grid>:last-child:nth-child(odd) .rs-card-img{aspect-ratio:21/9}
}
@media (max-width:640px){
  .rs-hero{margin-top:14px;min-height:380px}
  .rs-hero-in{padding:32px 22px}
  .rs-hero h1{font-size:44px}
  .rs-hero-in>p:last-child{font-size:15.5px;margin-top:14px}
  .rs-tabs{justify-content:flex-start;width:auto;margin:26px -16px 0;padding:5px 16px;border-radius:0;background:none}
  .rs-tabs a{background:var(--card);padding:9px 16px;font-size:14.5px}
  .rs-tabs a[aria-current]{background:#161616;color:#fff;box-shadow:none}
  .rs-grid,.rs-start-grid{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .rs-start-grid>:last-child:nth-child(odd) .rs-card-img{aspect-ratio:16/10}
  .rs-card-body{padding:18px 20px 20px}
  .rs-card h3,.rs-card.big h3{font-size:21px}
  .rs-ex{font-size:14.5px}
  .rs-ruo{padding:22px 20px}
  .rs-ahead .crumbs{padding-top:20px}
  .rs-ahead h1{font-size:36px;margin-top:16px}
  .rs-meta{font-size:13.5px;gap:4px 12px}
  .rs-meta span+span::before{margin-right:8px}
  .rs-ahero{margin-top:26px}
  .rs-ahero img{aspect-ratio:4/3}
  .rs-toc{margin-top:26px;padding:18px}
  .rs-body.dc-page{padding:8px 0 0}
  .rs-body p.rs-intro{font-size:18px}
  .rs-body figure{margin:28px 0;border-radius:18px}
  .rs-body figure img{aspect-ratio:4/3}
  .rs-pens-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
  .rs-pens-grid>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
  .rs-pen .card{padding:14px}
  .rs-pen .card .meta{display:none}
  .rs-pen .card h3{font-size:21px;margin-top:10px}
  .card.plain{padding-bottom:16px}
  .card.plain .mgs{font-size:13px;margin-top:4px}
}