/* ───── Studies & News · research library ───── */

/* Hero */
.r-hero { padding: 48px 0 24px; }
.r-eyebrow {
  display: inline-block;
  font-family: "Montserrat"; font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; color: var(--pp);
  background: rgba(157,39,169,0.08);
  padding: 8px 16px; border-radius: 99px;
  margin-bottom: 20px;
}
.r-title {
  font-family: "Poppins"; font-weight: 800;
  font-size: clamp(40px, 5.5vw, 76px); line-height: 1.12;
  letter-spacing: -0.025em; color: var(--ink);
  max-width: 900px;
  padding-bottom: 0.12em;
}
.r-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.18em;
  display: inline-block;
}
.r-sub {
  margin-top: 18px; max-width: 640px;
  color: var(--ink-2); font-size: 16px; line-height: 1.55;
}
.r-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 36px;
  background: var(--surface);
  padding: 22px 26px;
  border-radius: var(--r-xl);
  box-shadow: var(--clay-w);
}
.r-stats > div {
  display: flex; flex-direction: column; gap: 4px;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}
.r-stats > div:last-child { border-right: none; }
.r-stat-v {
  font-family: "Poppins"; font-weight: 800; font-size: 32px;
  letter-spacing: -0.02em; color: var(--ink);
}
.r-stat-k {
  font-family: "Montserrat"; font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .r-stats { grid-template-columns: repeat(2, 1fr); }
  .r-stats > div:nth-child(2n) { border-right: none; }
}

/* Section heads */
.r-section-head { margin-bottom: 22px; }
.r-section-eye {
  font-family: "Montserrat"; font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; color: var(--pp);
  margin-bottom: 8px;
}
.r-section-head h2 {
  font-family: "Poppins"; font-weight: 800;
  font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em;
}
.r-section-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.18em;
}

/* Featured */
.r-featured { padding: 48px 0 24px; }
.r-feat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
@media (max-width: 980px) { .r-feat-grid { grid-template-columns: 1fr; } }
.r-feat-card {
  display: grid; grid-template-rows: 200px auto;
  background: var(--surface);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--clay-w);
  text-decoration: none; color: inherit;
  transition: transform 0.22s, box-shadow 0.22s;
}
.r-feat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 36px 70px -28px rgba(60,24,130,0.45), inset 2px 4px 0 rgba(255,255,255,0.95);
}
.r-feat-art {
  position: relative;
  background: linear-gradient(135deg, #1A0F1F 0%, #2A1632 60%, var(--pp-2) 100%);
  overflow: hidden;
}
.r-feat-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(ellipse at 30% 30%, rgba(213,140,221,0.4), transparent 60%);
}
.r-feat-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.r-feat-tag {
  position: absolute; top: 16px; left: 16px;
  font-family: "Montserrat"; font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; color: #F5D6FA;
  background: rgba(157,39,169,0.3);
  backdrop-filter: blur(8px);
  padding: 6px 12px; border-radius: 99px;
}
.r-feat-body { padding: 26px 28px 28px; }
.r-feat-meta {
  display: flex; gap: 16px; margin-bottom: 10px;
  font-family: "Montserrat"; font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-3);
}
.r-feat-meta span { display: flex; align-items: center; gap: 6px; }
.r-feat-card h3 {
  font-family: "Poppins"; font-weight: 800; font-size: 24px;
  letter-spacing: -0.015em; color: var(--ink);
  text-wrap: balance; line-height: 1.15;
}
.r-feat-sub {
  font-family: "Montserrat"; font-weight: 600; font-size: 13px;
  color: var(--pp); margin-top: 6px; letter-spacing: 0.02em;
}
.r-feat-body p {
  margin-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.55;
}
.r-feat-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.r-read-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Montserrat"; font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; color: var(--pp);
  transition: gap 0.18s;
}
.r-feat-card:hover .r-read-link { gap: 10px; }

/* compound chips */
.r-comp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.r-comp {
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--pp-tint-2); color: var(--pp-2);
  padding: 4px 8px; border-radius: 6px;
}

/* Library + toolbar */
.r-library { padding: 48px 0; }
.r-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
  background: var(--surface);
  padding: 12px 14px;
  border-radius: 99px;
  box-shadow: var(--clay-w-sm);
  margin-bottom: 26px;
}
.r-search {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 280px; min-width: 220px;
  background: var(--bg);
  padding: 10px 16px; border-radius: 99px;
  color: var(--ink-3);
  position: relative;
}
.r-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: "Montserrat"; font-weight: 500; font-size: 16px;
  color: var(--ink);
}
.r-search input::placeholder { color: var(--ink-3); }
.r-clear {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(11,10,20,0.06);
  display: grid; place-items: center;
  border: none; cursor: pointer; color: var(--ink-3);
  font-size: 16px; line-height: 1;
}
.r-clear:hover { background: var(--pp-tint); color: var(--pp); }

.r-tabs {
  display: inline-flex; padding: 3px;
  background: rgba(11,10,20,0.05);
  border-radius: 99px; gap: 2px;
}
.r-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 99px;
  font-family: "Montserrat"; font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; cursor: pointer;
  background: transparent; color: var(--ink-2); border: none;
  transition: all 0.16s;
}
.r-tab:hover { color: var(--ink); }
.r-tab.on {
  background: var(--ink); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(11,10,20,0.5);
}
.r-tab-n {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  background: rgba(255,255,255,0.18);
  padding: 2px 6px; border-radius: 6px; opacity: 0.85;
}
.r-tab:not(.on) .r-tab-n {
  background: rgba(11,10,20,0.08); color: var(--ink-3);
}

.r-selects { display: flex; gap: 8px; }
.r-selects select {
  appearance: none;
  font-family: "Montserrat"; font-weight: 600; font-size: 12px;
  color: var(--ink); cursor: pointer;
  background: var(--bg);
  padding: 11px 36px 11px 16px;
  border-radius: 99px; border: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239D27A9' stroke-width='2.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Grid + cards */
.r-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 1100px) { .r-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .r-grid { grid-template-columns: 1fr; } }

.r-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-w-sm);
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform 0.22s, box-shadow 0.22s;
}
.r-card::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--pp-soft), var(--pp));
  opacity: 0; transition: opacity 0.22s;
}
.r-card:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -28px rgba(60,24,130,0.4); }
.r-card:hover::before { opacity: 1; }
.r-card.comp::before  { background: linear-gradient(90deg, #6F1B79, var(--pp)); }
.r-card.study::before { background: linear-gradient(90deg, var(--pp-soft), #E8B5EF); }

.r-card-top {
  display: flex; justify-content: space-between; align-items: center;
}
.r-type-tag {
  font-family: "Montserrat"; font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 99px;
}
.r-type-tag.comp  { background: rgba(157,39,169,0.10); color: var(--pp-2); }
.r-type-tag.study { background: rgba(213,140,221,0.18); color: var(--pp-2); }
.r-date {
  font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-3);
}
.r-card h4 {
  font-family: "Poppins"; font-weight: 800; font-size: 19px;
  letter-spacing: -0.01em; color: var(--ink);
  text-wrap: balance; line-height: 1.2;
  margin-top: 4px;
}
.r-card .r-sub {
  font-family: "Montserrat"; font-weight: 600; font-size: 12px;
  color: var(--pp); margin-top: -2px; letter-spacing: 0.02em;
  line-height: 1.4;
}
.r-card p {
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
  margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.r-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.r-card .r-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Montserrat"; font-weight: 600; font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}

/* Empty state */
.r-empty {
  text-align: center; padding: 60px 20px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--clay-w-sm);
}
.r-empty-icon {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--pp-tint); color: var(--pp);
  margin-bottom: 18px;
}
.r-empty h3 {
  font-family: "Poppins"; font-weight: 800; font-size: 22px;
  margin-bottom: 8px;
}
.r-empty p { color: var(--ink-3); margin-bottom: 18px; }
.r-clear-all {
  background: var(--ink); color: #fff;
  padding: 12px 22px; border-radius: 99px;
  font-family: "Montserrat"; font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; cursor: pointer; border: none;
}
.r-clear-all:hover { background: var(--pp); }

/* Newsletter */
.r-news {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  align-items: center;
  padding: 48px 56px;
  background: linear-gradient(135deg, #1A0F1F 0%, #2A1632 100%);
  color: #fff; border-radius: var(--r-xl);
  margin: 24px 0 60px;
  box-shadow: var(--clay-ink), 0 30px 60px -30px rgba(11,10,20,0.5);
  position: relative; overflow: hidden;
}
.r-news::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 60%; height: 180%;
  background: radial-gradient(ellipse, rgba(213,140,221,0.18), transparent 60%);
}
.r-news-l, .r-news-form { position: relative; }
.r-news-eye {
  font-family: "Montserrat"; font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; color: #F5D6FA;
  background: rgba(213,140,221,0.16);
  display: inline-block;
  padding: 6px 14px; border-radius: 99px;
  margin-bottom: 14px;
}
.r-news h3 {
  font-family: "Poppins"; font-weight: 800;
  font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.02em;
  line-height: 1.18;
  padding-bottom: 0.12em;
}
.r-news h3 em {
  font-style: italic;
  background: linear-gradient(135deg, #F5D6FA, var(--pp-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.18em;
  display: inline-block;
}
.r-news p {
  margin-top: 12px;
  color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.55;
  max-width: 420px;
}
.r-news-form {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.r-news-form input {
  flex: 1 1 240px; min-width: 0;
  padding: 16px 22px;
  background: rgba(255,255,255,0.08);
  border: none; border-radius: 99px;
  font-family: "Montserrat"; font-weight: 600; font-size: 16px;
  color: #fff; outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.r-news-form input::placeholder { color: rgba(255,255,255,0.5); }
.r-news-form input:focus { box-shadow: inset 0 0 0 2px var(--pp-soft); }
.r-news-form button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 26px;
  background: linear-gradient(135deg, var(--pp-soft), var(--pp));
  color: #fff; border: none; border-radius: 99px;
  font-family: "Montserrat"; font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; cursor: pointer;
  box-shadow: 0 14px 28px -10px rgba(157,39,169,0.5);
  transition: transform 0.16s, box-shadow 0.16s;
}
.r-news-form button:hover { transform: translateY(-1px); }
.r-news-meta {
  flex-basis: 100%;
  font-family: "Montserrat"; font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.45);
  margin-top: 4px;
}
@media (max-width: 880px) { .r-news { grid-template-columns: 1fr; padding: 36px 32px; } }

/* iOS zoom prevention — inputs must be ≥16px on mobile */
@media (max-width: 768px) {
  .r-search input, .r-news-form input, input[type="search"], input[type="email"] {
    font-size: 16px;
  }
}

/* Toolbar mobile stack — prevent overflow on ≤375px phones */
@media (max-width: 640px) {
  .r-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .r-toolbar > * { width: 100%; }
}

/* === Mobile UI hardening pass — 2026-05-16 === */

/* ≤640px — Library toolbar tabs/selects fill row; featured card scale-down */
@media (max-width: 640px) {
  /* Issue 1: tabs become horizontally scrollable strip */
  .r-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .r-tabs::-webkit-scrollbar { display: none; }
  .r-tab {
    flex-shrink: 0;
    padding: 9px 12px;
  }

  /* Issue 2: selects share row as 2-col grid, each flex-shrinkable */
  .r-selects {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .r-selects select {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 32px;
    width: 100%;
  }

  /* Issue 4: featured cards more compact */
  .r-feat-art { height: 160px; }
  .r-feat-body { padding: 22px 20px; }
  .r-feat-body h3 { font-size: 20px; }

  /* Issue 6: meta rows wrap so chips and dates don't collide */
  .r-feat-meta,
  .r-card-top {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* Issue 8: newsletter button stretches across stacked form */
  .r-news-form button { width: 100%; justify-content: center; }
}

/* ≤600px — Featured card footer stacks vertically */
@media (max-width: 600px) {
  /* Issue 2 (audit): r-feat-foot wrap + column */
  .r-feat-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }
}

/* ≤480px — Hero, library cards, eyebrow, newsletter, featured art */
@media (max-width: 480px) {
  /* Issue 4/9: smaller hero title floor + tighter hero padding */
  .r-hero { padding: 32px 0 16px; }
  .r-title { font-size: clamp(32px, 8vw, 40px); }

  /* Issue 9 (low): eyebrow letter-spacing reduced so pill fits */
  .r-eyebrow { letter-spacing: 0.14em; }

  /* Issue 5: library card padding + title size scaled down */
  .r-card { padding: 20px 16px; }
  .r-card h4 { font-size: 17px; }

  /* Issue 7: newsletter band tighter padding, smaller heading + controls */
  .r-news { padding: 28px 22px; }
  .r-news h3 { font-size: 24px; }
  .r-news-form input,
  .r-news-form button {
    padding: 14px 18px;
    font-size: 14px;
  }

  /* Issue 11: featured card art panel shorter */
  .r-feat-card { grid-template-rows: 140px auto; }
}

/* ≤420px — defensive 1-col fallback for .r-stats if rendered */
@media (max-width: 420px) {
  .r-stats { grid-template-columns: 1fr; }
  .r-stats > div {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 14px;
  }
  .r-stats > div:last-child { border-bottom: none; padding-bottom: 0; }
}

/* Issue 12: confine featured/library card hover transforms to true-hover devices */
@media (hover: hover) {
  /* (Existing :hover rules retained above; this block is intentionally empty —
     the original transforms already apply on hover-capable devices. The
     accompanying touch fix below disables sticky-hover on touch devices.) */
}
@media (hover: none) {
  .r-feat-card:hover,
  .r-card:hover {
    transform: none;
    box-shadow: var(--clay-w);
  }
  .r-card:hover { box-shadow: var(--clay-w-sm); }
  .r-card:hover::before { opacity: 0; }
  .r-feat-card:hover .r-read-link { gap: 6px; }
}