/* ============================================================
   INNER — Light editorial skin for all non-home pages.
   ============================================================ */

body { background-color: var(--surface); }

/* Kill the old radial-glow hero backdrops */
.about-hero::before,
.exp-hero::before,
.cs::before,
.gal-hero::before,
.resume-section::before { display: none; }

/* ============================================================
   Eyebrow kicker
   ============================================================ */
.in-eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--muted);
  margin-bottom: 1.5rem;
}
.in-eyebrow::before {
  content: ''; width: 2rem; height: 1px;
  background: var(--border-strong); flex-shrink: 0;
}
.exp-hero .in-eyebrow, .gal-hero .in-eyebrow { justify-content: center; }

/* ============================================================
   Page titles
   ============================================================ */
.about-title, .exp-hero-title, .resume-heading, .cs-title, .gal-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.025em; color: var(--ink);
}

.about-title em, .exp-hero-title em, .resume-heading em, .cs-title em, .gal-hero-title em,
.about-section-title em, .cs-section-title em, .gal-section-title em, .education-title em {
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
}

.exp-hero-sub, .gal-hero-sub, .cs-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--body);
}

/* ============================================================
   Section titles
   ============================================================ */
.about-section-title, .cs-section-title, .cs-tldr-section__title,
.cs-takeaways-title, .gal-section-title, .education-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); text-align: left;
}

.cs-section-title--cream { color: var(--ink); }

/* ============================================================
   Page entrance
   ============================================================ */
@keyframes inRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.about-hero .container, .exp-hero .container, .gal-hero .container,
.resume-section .container, .cs-header, .cs-back {
  animation: inRise 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.cs-header { animation-delay: 0.08s; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--ink);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.4);
  padding: var(--sp-3) 0;
}

/* ============================================================
   Hover — restrained. No transforms, no glow.
   ============================================================ */
.exp-company-card, .hobby-card, .gal-item {
  transition: border-color 0.22s ease;
}
.exp-company-card:hover, .hobby-card:hover { border-color: var(--border-strong); }
.gal-item:hover { border-color: var(--border-strong); }

.hobby-card:hover, .exp-company-card:hover, .gal-item:hover,
.gal-item:active, .hobby-card--link:active, .exp-accordion:active {
  transform: none; box-shadow: none;
}