/* TLDR: RevCircles UI — layout, nav, forms, profile card system with 20 direct-color palettes */

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --brand-navy:  #0a2342;
  --brand-deep:  #002060;
  --brand-cream: #f0ddc5;

  --c-bg:      #f5f3ee;
  --c-surface: #ffffff;
  --c-text:    #0a2342;
  --c-text-muted: #5a6a7a;
  --c-border:  #d4cfc7;
  --c-accent:  #0a2342;

  --radius-card: 14px;
  --radius-sm:   8px;
  --shadow-card: 0 4px 20px rgba(0,0,0,.14), 0 1px 6px rgba(0,0,0,.08);
  --shadow-hover: 0 12px 40px rgba(0,0,0,.22), 0 3px 12px rgba(0,0,0,.12);
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--c-bg); color: var(--c-text); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Layout ──────────────────────────────────────────────────── */
.rc-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.rc-nav {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem;
}
.rc-logo { display: flex; align-items: center; gap: .5rem; }
.rc-logo img { height: 36px; width: auto; }
.rc-logo span { font-weight: 800; font-size: 1.2rem; letter-spacing: -.5px; color: var(--brand-navy); }
.rc-nav-links { display: flex; align-items: center; gap: 1rem; }
.rc-nav-links a { font-size: .9rem; color: var(--c-text-muted); transition: color .2s; }
.rc-nav-links a:hover { color: var(--c-text); }

.rc-main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
.rc-footer {
  text-align: center; padding: 2rem;
  color: var(--c-text-muted); font-size: .85rem;
  border-top: 1px solid var(--c-border); margin-top: 4rem;
}
.rc-footer__links { margin-top: .4rem; display: flex; gap: .5rem; justify-content: center; align-items: center; }
.rc-footer__links a { color: var(--c-text-muted); }
.rc-footer__links a:hover { color: var(--c-text); }
.rc-legal h1 { font-size: 1.5rem; font-weight: 800; color: var(--brand-navy); margin-bottom: .5rem; }
.rc-legal__intro { color: var(--c-text-muted); margin-bottom: 1.5rem; font-size: .95rem; }

/* ── Lang switcher ───────────────────────────────────────────── */
.lang-form { display: flex; gap: .25rem; }
.lang-btn {
  background: none; border: 1px solid var(--c-border);
  border-radius: 4px; padding: .2rem .5rem;
  font-size: .75rem; cursor: pointer; color: var(--c-text-muted);
  transition: all .2s;
}
.lang-btn.active, .lang-btn:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* ── Buttons ─────────────────────────────────────────────────── */
.rc-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.25rem; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  border: none; transition: all .2s; text-decoration: none;
}
.rc-btn--primary { background: var(--brand-navy); color: var(--brand-cream); }
.rc-btn--primary:hover { background: var(--brand-deep); transform: translateY(-1px); }
.rc-btn--ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
.rc-btn--ghost:hover { background: var(--c-bg); }
.rc-btn--danger { background: #ef4444; color: #fff; }
.rc-btn--danger:hover { background: #dc2626; }
.rc-btn--match { background: linear-gradient(135deg,#f59e0b,#ef4444); color: #fff; font-size: .85rem; }
.rc-btn--match:hover { transform: translateY(-1px); filter: brightness(1.1); }
.rc-btn--sm  { padding: .35rem .75rem; font-size: .8rem; }
.rc-btn--lg  { padding: .85rem 2rem; font-size: 1rem; border-radius: 10px; }
.rc-btn--outline { background: transparent; color: var(--brand-navy); border: 2px solid var(--brand-navy); }
.rc-btn--outline:hover { background: var(--brand-navy); color: var(--brand-cream); }

/* ── Messages ────────────────────────────────────────────────── */
.rc-messages { max-width: 1200px; margin: 1rem auto; padding: 0 1.5rem; }
.rc-message { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: .5rem; font-size: .9rem; }
.rc-message--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.rc-message--info    { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.rc-message--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Hero ────────────────────────────────────────────────────── */
.rc-hero { text-align: center; padding: 3rem 1rem 2rem; }
.rc-hero-title {
  font-size: clamp(1.8rem,5vw,3rem); font-weight: 900;
  color: var(--brand-navy); margin-bottom: .5rem;
}
.rc-hero-sub { color: var(--c-text-muted); font-size: 1.1rem; margin-bottom: 2rem; }
.rc-hero-logo { height: 72px; width: auto; margin: 0 auto 1.5rem; }
.rc-hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Filter bar ──────────────────────────────────────────────── */
.rc-filter-bar { margin-bottom: 1.5rem; }
.rc-filter-form { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.rc-filter-form select {
  padding: .45rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: .875rem; color: var(--c-text);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.rc-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--c-border); }
.rc-tab {
  background: none; border: none; padding: .65rem 1.25rem;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  color: var(--c-text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all .2s;
}
.rc-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ── Card grid ───────────────────────────────────────────────── */
.rc-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────
   Profile Card System
   Fixed 200×290px. Photo zone (top 145px) + body zone (bottom).
   Color driven by direct background-color on .rc-card--p{n}.
───────────────────────────────────────────────────────────── */
.rc-card {
  width: 300px;
  min-height: 435px;
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.14), 0 1px 6px rgba(0,0,0,.08);
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
  text-decoration: none;
  color: #ffffff;
  background: #1a2a3a; /* fallback — overridden by palette class */
}
.rc-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 3px 12px rgba(0,0,0,.12);
}

/* Photo zone — 220 px, semi-transparent dark so card color shows through */
.rc-card__photo {
  flex: 0 0 220px;
  height: 220px;
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,.28);
}
.rc-card__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rc-card__photo--ask {
  display: flex; align-items: center; justify-content: center;
}

/* Initials placeholder */
.rc-card__initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; font-weight: 900;
  color: rgba(255,255,255,.55);
  letter-spacing: -1px;
}
.rc-card__initials--lg { font-size: 5rem; }

/* Body zone — transparent so card background-color shows */
.rc-card__body {
  flex: 1;
  padding: .65rem .8rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  overflow: hidden;
}
.rc-card__name {
  font-weight: 700; font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #ffffff;
}
.rc-card__role {
  font-size: .76rem; opacity: .8; color: #ffffff;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rc-card__meta {
  display: flex; gap: .35rem; flex-wrap: wrap; margin-top: auto; padding-top: .2rem;
}
.rc-card__hp, .rc-card__xp, .rc-card__emp {
  font-size: .7rem; font-weight: 700; color: #ffffff;
  background: rgba(255,255,255,.2);
  padding: .1rem .4rem; border-radius: 10px; white-space: nowrap;
}
.rc-card__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.rc-card__tag {
  font-size: .68rem; font-weight: 600; color: #ffffff;
  background: rgba(255,255,255,.18);
  padding: .1rem .45rem; border-radius: 20px; white-space: nowrap;
}
.rc-card__tag--sector { background: rgba(255,255,255,.3); }

/* Actions row (dashboard) */
.rc-card__actions {
  display: flex; gap: .4rem; padding: .4rem .7rem .55rem;
  background: rgba(0,0,0,.2);
}

/* ── Sober detail layout ─────────────────────────────────────── */
.rc-profile-header {
  display: flex; gap: 1.5rem; align-items: flex-start;
  padding: 1.5rem;
  background: var(--c-surface); border-radius: var(--radius-card);
  border: 1px solid var(--c-border); box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}
.rc-profile-photo-wrap { flex: 0 0 100px; }
.rc-profile-photo {
  width: 100px; height: 100px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 3px solid var(--c-border);
}
.rc-profile-initials {
  width: 100px; height: 100px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 900;
  background: var(--brand-navy); color: var(--brand-cream);
}
.rc-profile-info { flex: 1; min-width: 0; }
.rc-profile-name {
  font-size: 1.4rem; font-weight: 800;
  color: var(--brand-navy); margin-bottom: .5rem;
}
.rc-profile-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.rc-badge {
  font-size: .78rem; font-weight: 700;
  background: var(--brand-navy); color: var(--brand-cream);
  padding: .2rem .6rem; border-radius: 20px; white-space: nowrap;
}
.rc-detail-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.rc-detail-tags .rc-card__tag {
  background: rgba(10,35,66,.12); color: var(--brand-navy);
  font-size: .8rem;
}
.rc-detail-tags .rc-card__tag--sector {
  background: var(--brand-navy); color: var(--brand-cream);
}
.rc-detail-section {
  background: var(--c-surface); border-radius: var(--radius-card);
  border: 1px solid var(--c-border); padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.rc-detail-section h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .6px;
  color: var(--c-text-muted); margin-bottom: .75rem;
}
.rc-detail-section p { font-size: .95rem; line-height: 1.7; color: var(--c-text); }

/* ── 20 Palettes — direct background-color, no CSS vars ──────── */
.rc-card--p1  { background-color: #1b2a4a; }   /* Deep Navy       */
.rc-card--p2  { background-color: #1a3a28; }   /* Forest Green    */
.rc-card--p3  { background-color: #4a1520; }   /* Burgundy        */
.rc-card--p4  { background-color: #283545; }   /* Slate           */
.rc-card--p5  { background-color: #0d3b4f; }   /* Ocean Teal      */
.rc-card--p6  { background-color: #3b2a1a; }   /* Warm Earth      */
.rc-card--p7  { background-color: #2d1b5e; }   /* Royal Purple    */
.rc-card--p8  { background-color: #1c3a5c; }   /* Steel Blue      */
.rc-card--p9  { background-color: #2a3a1a; }   /* Dark Olive      */
.rc-card--p10 { background-color: #1e1e2e; }   /* Charcoal Indigo */
.rc-card--p11 { background-color: #0a3a3a; }   /* Deep Teal       */
.rc-card--p12 { background-color: #4a0a1a; }   /* Ruby            */
.rc-card--p13 { background-color: #1a1a5c; }   /* Indigo Night    */
.rc-card--p14 { background-color: #3a2a10; }   /* Amber Dark      */
.rc-card--p15 { background-color: #0a2a1a; }   /* Pine            */
.rc-card--p16 { background-color: #0a1a4a; }   /* Midnight Blue   */
.rc-card--p17 { background-color: #4a1a2a; }   /* Dark Rose       */
.rc-card--p18 { background-color: #1a2a10; }   /* Moss            */
.rc-card--p19 { background-color: #152a3a; }   /* Navy Steel      */
.rc-card--p20 { background-color: #2a1040; }   /* Dark Plum       */

/* ── Detail-page extras ──────────────────────────────────────── */
.rc-detail-skills { margin-top: .75rem; }
.rc-detail-skills h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; opacity: .7; margin-bottom: .4rem; }
.rc-detail-markdown { margin-top: .75rem; font-size: .875rem; line-height: 1.7; }
.rc-detail-markdown h1,.rc-detail-markdown h2,.rc-detail-markdown h3 { margin: .75rem 0 .25rem; }
.rc-detail-markdown ul,.rc-detail-markdown ol { padding-left: 1.25rem; }
.rc-detail-markdown p { margin-bottom: .5rem; }

/* ── Dashboard ───────────────────────────────────────────────── */
.rc-dashboard-section { margin-bottom: 3rem; }
.rc-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.rc-section-header h2 { font-size: 1.25rem; font-weight: 700; }
.rc-empty { color: var(--c-text-muted); font-style: italic; padding: 1rem 0; }

/* ── Forms ───────────────────────────────────────────────────── */
.rc-form-page { max-width: 560px; margin: 0 auto; }
.rc-form-page h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem; }
.rc-form-field { margin-bottom: 1.1rem; }
.rc-form-field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .3rem; }
.rc-form input[type="text"],
.rc-form input[type="number"],
.rc-form input[type="email"],
.rc-form input[type="password"],
.rc-form select:not([multiple]),
.rc-form textarea {
  width: 100%; padding: .6rem .85rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  font-size: .9rem; font-family: var(--font);
  background: var(--c-surface); color: var(--c-text);
  transition: border-color .2s;
}
.rc-form input:focus, .rc-form select:focus, .rc-form textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.rc-form ul.errorlist { color: #dc2626; font-size: .8rem; margin-top: .2rem; padding-left: .5rem; list-style: none; }
.rc-form .helptext { font-size: .8rem; color: var(--c-text-muted); margin-top: .2rem; }
.rc-form-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
.rc-form-preview { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; margin-bottom: .4rem; border: 2px solid var(--c-border); }
.rc-form select[multiple] { height: auto; min-height: 90px; padding: .4rem .5rem; cursor: pointer; width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: .9rem; background: var(--c-surface); color: var(--c-text); }

/* ── Detail page ─────────────────────────────────────────────── */
.rc-detail-page { max-width: 560px; margin: 0 auto; }
.rc-back-link { display: inline-block; margin-bottom: 1.25rem; color: var(--c-text-muted); font-size: .9rem; }
.rc-back-link:hover { color: var(--c-text); }
.rc-match-section {
  margin-top: 1.5rem; padding: 1.25rem;
  background: var(--c-surface); border-radius: var(--radius-card); border: 1px solid var(--c-border);
}
.rc-match-section h3 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.rc-match-section form + form { margin-top: .5rem; }
.rc-match-preview { background: var(--c-bg); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; line-height: 1.8; }

/* ── Skills tag-input widget ─────────────────────────────── */
.rc-tag-input {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  min-height: 42px; padding: .35rem .6rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); cursor: text;
  transition: border-color .2s;
}
.rc-tag-input:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.rc-tag-input__tags { display: contents; }
.rc-tag-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--brand-navy); color: var(--brand-cream);
  font-size: .78rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 20px;
  white-space: nowrap;
}
.rc-tag-chip__rm {
  background: none; border: none; color: inherit; opacity: .7;
  font-size: .9rem; line-height: 1; cursor: pointer; padding: 0 0 0 .1rem;
  display: flex; align-items: center;
}
.rc-tag-chip__rm:hover { opacity: 1; }
.rc-tag-input__text {
  flex: 1; min-width: 140px; border: none; outline: none; background: transparent;
  font-size: .9rem; font-family: var(--font); color: var(--c-text); padding: .15rem 0;
}
.rc-tag-input__dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  list-style: none; margin: 0; padding: .25rem 0; max-height: 220px; overflow-y: auto;
}
.rc-tag-input__option {
  padding: .5rem .85rem; font-size: .875rem; cursor: pointer;
  color: var(--c-text); transition: background .12s;
}
.rc-tag-input__option:hover { background: var(--c-bg); }
.rc-tag-input__option--new { color: var(--brand-navy); font-weight: 600; border-top: 1px solid var(--c-border); }

/* ── Warning block (new skills) ─────────────────────────────── */
.rc-warning {
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius-sm);
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.rc-warning p { font-size: .9rem; font-weight: 600; color: #92400e; margin-bottom: .5rem; }
.rc-warning__list { padding-left: 1.25rem; margin-bottom: .75rem; font-size: .875rem; color: #78350f; }
.rc-warning__list li { margin-bottom: .2rem; }
.rc-suggestion { font-style: normal; font-weight: 700; color: #1d4ed8; }
.rc-confirm-label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; cursor: pointer; }

/* ── Form section (experience) ───────────────────────────────── */
.rc-form-section { margin-top: 1.5rem; }
.rc-form-section h3 { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--c-text-muted); margin-bottom: 1rem; }
.rc-exp-entry {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); padding: .85rem 1rem;
  margin-bottom: .75rem;
}
.rc-exp-header { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .5rem; }
.rc-exp-field { flex: 1; min-width: 140px; margin-bottom: 0; }
.rc-exp-at { font-weight: 700; color: var(--c-text-muted); padding-bottom: .45rem; }
.rc-exp-delete { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: #ef4444; cursor: pointer; white-space: nowrap; padding-bottom: .4rem; }

/* ── Experience display (detail) ─────────────────────────────── */
.rc-exp-item { padding: .6rem 0; }
.rc-exp-item--sep { border-bottom: 1px solid var(--c-border); margin-bottom: .6rem; }
.rc-exp-title { font-weight: 700; font-size: .95rem; color: var(--brand-navy); }
.rc-exp-company { font-weight: 400; color: var(--c-text-muted); }
.rc-exp-desc { font-size: .875rem; line-height: 1.6; color: var(--c-text); margin-top: .3rem; white-space: pre-wrap; }

/* ── Error pages ─────────────────────────────────────────────── */
.rc-error-page { max-width: 480px; margin: 4rem auto; text-align: center; padding: 0 1rem; }
.rc-error-code { font-size: 6rem; font-weight: 900; color: var(--c-border); line-height: 1; margin-bottom: .5rem; }
.rc-error-page h1 { font-size: 1.5rem; color: var(--brand-navy); margin-bottom: .75rem; }
.rc-error-page p { color: var(--c-text-muted); margin-bottom: 1.5rem; line-height: 1.6; }

/* ── Suggestions ─────────────────────────────────────────────── */
.rc-sub { color: var(--c-text-muted); font-size: .95rem; margin-top: -.5rem; margin-bottom: 1.5rem; }
.rc-suggestions-list { display: flex; flex-direction: column; gap: 1rem; }
.rc-suggestion-row { border: 1px solid var(--c-border); border-radius: .75rem; overflow: hidden; }
.rc-suggestion-scores { display: flex; gap: .5rem; flex-wrap: wrap; padding: .6rem .75rem; background: var(--c-surface-2, #f8f8f8); border-bottom: 1px solid var(--c-border); }
.rc-suggestion-card { padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.rc-suggestion-title { font-weight: 700; font-size: 1rem; color: var(--brand-navy); }
.rc-suggestion-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.rc-badge--match { background: var(--brand-teal, #0d9488); color: #fff; }

/* ── Pagination ──────────────────────────────────────────────── */
.rc-pagination {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin: 1.5rem 0 .5rem;
}
.rc-pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: 1rem; color: var(--c-text); transition: all .15s;
}
.rc-pagination__btn:hover { background: var(--brand-navy); color: var(--brand-cream); border-color: var(--brand-navy); }
.rc-pagination__info { font-size: .85rem; color: var(--c-text-muted); }

/* ── Blurred HP/price for anonymous users ────────────────────── */
.rc-card__hp--blurred {
  filter: blur(4px);
  user-select: none;
  cursor: help;
  opacity: .8;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rc-card-grid { gap: .85rem; }
  .rc-card { width: 240px; flex: 0 0 240px; min-height: 355px; }
  .rc-card__photo { flex: 0 0 175px; height: 175px; }
  .rc-profile-header { flex-direction: column; align-items: center; text-align: center; }
  .rc-profile-meta { justify-content: center; }
  .rc-nav { padding: .6rem 1rem; }
  .rc-main { padding: 1.5rem 1rem; }
  .rc-logo span { display: none; }
  .rc-nav-links { gap: .5rem; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .rc-card { width: calc(100vw - 3rem); flex: 0 0 calc(100vw - 3rem); }
}