/* ── RENATU case study extras ─────────────────────────────── */
.rn-swatch-wrap { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.rn-swatch { flex: 1; min-width: 110px; display: flex; flex-direction: column; border-radius: .75rem; overflow: hidden; border: 1px solid var(--bg-2); }
.rn-swatch-color { height: 110px; }
.rn-swatch-info { padding: .75rem; background: var(--bg-2); display: flex; flex-direction: column; gap: .2rem; }
.rn-swatch-name { font-size: .72rem; font-weight: 700; color: var(--text); }
.rn-swatch-hex { font-size: .68rem; font-family: monospace; color: var(--text-2); }
.rn-swatch-note { font-size: .6rem; color: var(--text-2); opacity: .65; }

.rn-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.5rem; }
.rn-page { background: var(--bg-2); border-radius: .65rem; padding: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.rn-page-num { font-size: .62rem; font-weight: 700; color: #1249a0; }
.rn-page-name { font-size: .85rem; font-weight: 700; color: var(--text); }
.rn-page-desc { font-size: .75rem; color: var(--text-2); line-height: 1.55; }

.rn-font-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.rn-font-card { flex: 1; min-width: 220px; background: #fff; border: 1px solid #ebebeb; border-radius: .75rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.rn-font-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #646464; }

@media (max-width: 700px) {
  .rn-pages { grid-template-columns: 1fr 1fr; }
  .rn-font-row { flex-direction: column; }
}