/* ============================================================
   CONSCIOUS CRADLE — base stylesheet
   Plain CSS, no framework. BEM-ish with .cc- prefix.
   ============================================================ */

/* ---------- design tokens ---------- */
:root {
  /* color */
  --cc-accent: #06F8FD;          /* brand cyan — for FILLS only (paired w/ dark ink) */
  --cc-accent-ink: #02d6da;      /* WCAG AA accessible accent — for TEXT on light bg (≥4.5:1) */
  --cc-accent-border: #06F8FD;
  --cc-accent-button: #06F8FD;
  --cc-accent-button-hover: #7bfbfe;
  --cc-accent-soft: rgba(6,248,253, 0.14);
  --cc-accent-softer: rgba(6,248,253, 0.1);

  --cc-ink: #1f1f1f;
  --cc-ink-2: #2f2f2f;
  --cc-ink-3: #5f5f5f;            /* 5.5:1 on #fafaf9 — AA pass */
  --cc-ink-4: #6f6f6f;            /* tightened from #9a9a9a → 4.6:1 on #fafaf9 */
  --cc-line: #ececec;
  --cc-focus: #06F8FD;            /* focus ring */

  --cc-bg: #f9f9f9;
  --cc-surface: #ffffff;
  --cc-surface-tint: #f3f3f3;

  /* type */
  --cc-font-serif: "DM Serif Display", "Times New Roman", serif;
  --cc-font-sans: "Comfortaa", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* scale */
  --cc-radius-sm: 12px;
  --cc-radius-md: 20px;
  --cc-radius-lg: 28px;
  --cc-radius-pill: 999px;

  --cc-shadow-sm: 0 4px 12px rgba(18,18,18,0.04), 0 1px 3px rgba(18,18,18,0.03);
  --cc-shadow-md: 0 10px 32px rgba(18,18,18,0.06), 0 2px 6px rgba(18,18,18,0.04);
  --cc-shadow-lg: 0 24px 60px rgba(18,18,18,0.08), 0 4px 12px rgba(18,18,18,0.04);

  --cc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cc-gutter: clamp(16px, 2.5vw, 32px);
  --cc-container: 1280px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cc-font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cc-ink);
  background-color: var(--cc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 500;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ---------- layout primitives ---------- */
.cc-container {
  width: 100%;
  max-width: var(--cc-container);
  margin-inline: auto;
  padding-inline: var(--cc-gutter);
}

.cc-section {
  padding-block: clamp(48px, 7vw, 96px);
}

.cc-stack > * + * { margin-top: var(--cc-stack-gap, 16px); }

.cc-grid {
  display: grid;
  gap: var(--cc-gutter);
}
.cc-grid--halves { grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .cc-grid--halves { grid-template-columns: repeat(2, 1fr); }
}

.cc-grid--thirds { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .cc-grid--thirds { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .cc-grid--thirds { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- type ---------- */
.cc-eyebrow {
  font-family: var(--cc-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-accent-ink);
  margin-bottom: 12px !important;
}

.cc-display {
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--cc-ink);
  text-wrap: balance;
}
.cc-display .cc-accent,
.cc-h1 .cc-accent { color: var(--cc-accent-ink); }

.cc-h1 {
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cc-ink);
  text-wrap: balance;
}

.cc-h2 {
  font-family: var(--cc-font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cc-ink);
  text-wrap: balance;
}

.cc-h3 {
  font-family: var(--cc-font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cc-ink);
}

.cc-lede {
  font-family: var(--cc-font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--cc-ink-2);
  max-width: 60ch;
}

.cc-body {
  font-family: var(--cc-font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cc-ink-2);
}

/* ---------- buttons ---------- */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--cc-radius-pill);
  font-family: var(--cc-font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: transform .2s var(--cc-ease), background .2s var(--cc-ease), color .2s var(--cc-ease), box-shadow .2s var(--cc-ease);
  white-space: nowrap;
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn:active { transform: translateY(0); }

.cc-btn--primary {
  background: var(--cc-accent-button);
  color: var(--cc-ink);
  box-shadow: 0 6px 20px rgba(18,18,18,0.10);
}
.cc-btn--primary:hover {
  background: var(--cc-accent-button-hover);
  color: var(--cc-ink);
  box-shadow: 0 10px 24px rgba(18,18,18,0.15);
}

.cc-btn--accent {
  background: var(--cc-accent-button);
  color: var(--cc-ink);
  box-shadow: 0 6px 20px rgba(18,18,18,0.10);
}
.cc-btn--accent:hover {
  background: var(--cc-accent-button-hover);
  color: var(--cc-ink);
}

.cc-btn--ghost {
  background: transparent;
  color: var(--cc-ink);
  padding: 14px 8px;
}
.cc-btn--ghost:hover { color: var(--cc-accent-ink); }

.cc-btn__arrow {
  display: inline-block;
}

/* ---------- cards ---------- */
.cc-card {
  background: var(--cc-surface);
  border-radius: var(--cc-radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--cc-shadow-sm);
  border: 1px solid var(--cc-line);
  transition: transform .35s var(--cc-ease), box-shadow .35s var(--cc-ease);
}

.cc-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--cc-shadow-md);
}

.cc-card--media {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cc-surface-tint);
}
.cc-card--media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--cc-ease);
}
.cc-card--media:hover img { transform: scale(1.03); }

/* ---------- icon ---------- */
.cc-icon {
  width: 20px;
  height: 20px;
  stroke: var(--cc-accent-ink);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.cc-fab--accent .cc-icon  {
  stroke: var(--cc-ink) !important;
}

.cc-icon--lg { width: 28px; height: 28px; }
.cc-icon--xl { width: 40px; height: 40px; stroke-width: 1.5; }

.cc-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cc-accent-soft);
  color: var(--cc-accent-ink);
  flex-shrink: 0;
}

/* ---------- utilities ---------- */
.cc-text-center { text-align: center; }
.cc-mx-auto { margin-inline: auto; }
.cc-max-prose { max-width: 60ch; }

.cc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cc-row--center { justify-content: center; }

/* ---------- reveal animation (CSS-only, runs on load) ---------- */
@keyframes cc-reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.cc-reveal {
  animation: cc-reveal-in .7s var(--cc-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .cc-reveal { animation: none; opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- focus visible (WCAG 2.4.7) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.cc-btn:focus-visible,
.cc-fab:focus-visible,
.cc-brand:focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 3px;
}

/* ---------- skip link (WCAG 2.4.1) ---------- */
.cc-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--cc-ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--cc-radius-pill);
  font-family: var(--cc-font-sans);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top .2s var(--cc-ease);
}
.cc-skip-link:focus,
.cc-skip-link:focus-visible {
  top: 16px;
  outline: 3px solid var(--cc-focus);
  outline-offset: 2px;
}
.cc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}