/* ================================================================
 * Raj Collection Sequel — Base typography + utilities
 * ================================================================ */

/* ---------- DISPLAY HEADINGS ---------- */
h1, h2, h3, .rcs-display {
  font-family: var(--rcs-font-display);
  font-weight: var(--rcs-fw-medium);
  letter-spacing: var(--rcs-track-tight);
  color: var(--rcs-text);
  line-height: var(--rcs-lh-tight);
}

h1, .rcs-h1 {
  font-size: var(--rcs-size-5xl);
  line-height: 1.08;
  letter-spacing: var(--rcs-track-tighter);
}
h2, .rcs-h2 {
  font-size: var(--rcs-size-4xl);
  line-height: 1.12;
}
h3, .rcs-h3 {
  font-size: var(--rcs-size-2xl);
  line-height: 1.2;
}
h4, .rcs-h4 {
  font-family: var(--rcs-font-ui);
  font-size: var(--rcs-size-md);
  font-weight: var(--rcs-fw-bold);
  letter-spacing: var(--rcs-track-ui);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--rcs-text);
}

p { line-height: var(--rcs-lh-relaxed); color: var(--rcs-text); }
p + p { margin-top: var(--rcs-space-3); }

a { transition: color var(--rcs-dur-2) var(--rcs-ease-out); }
a:hover { color: var(--rcs-primary); }

strong, b { font-weight: var(--rcs-fw-semi); }

small { font-size: var(--rcs-size-sm); color: var(--rcs-text-muted); }

/* ---------- EYEBROW / META LABELS ---------- */
.rcs-eyebrow {
  display: inline-block;
  font-family: var(--rcs-font-ui);
  font-size: var(--rcs-size-xs);
  font-weight: var(--rcs-fw-semi);
  letter-spacing: var(--rcs-track-display);
  text-transform: uppercase;
  color: var(--rcs-text-muted);
}

.rcs-meta {
  font-size: var(--rcs-size-sm);
  color: var(--rcs-text-muted);
  letter-spacing: var(--rcs-track-wide);
}

/* ---------- VISUALLY HIDDEN ---------- */
.rcs-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- SKIP LINK ---------- */
.rcs-skip-link {
  position: absolute;
  top: -100px; left: var(--rcs-gutter);
  background: var(--rcs-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--rcs-r-2);
  z-index: var(--rcs-z-popover);
  transition: top var(--rcs-dur-3) var(--rcs-ease-out);
}
.rcs-skip-link:focus { top: var(--rcs-space-2); }

/* ---------- DIVIDERS ---------- */
.rcs-rule { height: 1px; background: var(--rcs-outline); border: 0; margin: var(--rcs-space-6) 0; }
.rcs-rule-strong { height: 1px; background: var(--rcs-outline-strong); border: 0; margin: var(--rcs-space-6) 0; }

/* ---------- UTILITY HELPERS ---------- */
.rcs-text-center { text-align: center; }
.rcs-text-muted  { color: var(--rcs-text-muted); }
.rcs-text-subtle { color: var(--rcs-text-subtle); }
.rcs-text-primary { color: var(--rcs-primary); }

.rcs-flex { display: flex; }
.rcs-flex-col { display: flex; flex-direction: column; }
.rcs-grid { display: grid; }
.rcs-items-center { align-items: center; }
.rcs-justify-between { justify-content: space-between; }
.rcs-gap-1 { gap: var(--rcs-space-1); }
.rcs-gap-2 { gap: var(--rcs-space-2); }
.rcs-gap-3 { gap: var(--rcs-space-3); }
.rcs-gap-4 { gap: var(--rcs-space-4); }

.rcs-mt-2 { margin-top: var(--rcs-space-2); }
.rcs-mt-3 { margin-top: var(--rcs-space-3); }
.rcs-mt-4 { margin-top: var(--rcs-space-4); }
.rcs-mt-6 { margin-top: var(--rcs-space-6); }

/* ---------- IMAGE ASPECT RATIOS ---------- */
.rcs-aspect-4-5 { aspect-ratio: 4 / 5; object-fit: cover; }
.rcs-aspect-1-1 { aspect-ratio: 1 / 1; object-fit: cover; }
.rcs-aspect-3-4 { aspect-ratio: 3 / 4; object-fit: cover; }
.rcs-aspect-16-9 { aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- PHOSPHOR ICON SIZING ---------- */
.rcs-ico { font-size: var(--rcs-size-lg); line-height: 1; }
.rcs-ico-sm { font-size: var(--rcs-size-base); }
.rcs-ico-lg { font-size: var(--rcs-size-2xl); }
.rcs-ico-xl { font-size: var(--rcs-size-4xl); }