/* Handcrafted editorial layer: quiet surfaces, measured contrast, no decorative effects. */
:root {
  --bg: var(--portfolio-bg);
  --bg-2: #f5f6f8;
  --surface: var(--portfolio-surface);
  --text: var(--portfolio-text);
  --muted: var(--portfolio-muted);
  --accent: var(--portfolio-accent);
  --card: var(--portfolio-surface);
  --card-2: var(--portfolio-surface-muted);
  --ring: rgba(23, 105, 170, .16);
  --shadow: var(--portfolio-shadow);
}

body {
  background: var(--portfolio-bg);
  color: var(--portfolio-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-header {
  background: rgba(245, 246, 248, .94);
  border-bottom: 1px solid var(--portfolio-border);
  backdrop-filter: blur(14px);
}

.brand-text { color: var(--portfolio-text); letter-spacing: -.02em; }
.site-nav a { color: var(--portfolio-muted); font-size: .92rem; }
.site-nav a::after { background: var(--portfolio-accent); }

.hero {
  background: linear-gradient(180deg, #f8fafb 0%, var(--portfolio-bg) 100%);
  border-bottom: 1px solid var(--portfolio-border);
}

.hero h1 { color: var(--portfolio-text); letter-spacing: -.055em; font-weight: 750; }
.accent { color: var(--portfolio-accent); }
.hero-description { background: none; -webkit-text-fill-color: initial; color: var(--portfolio-muted); max-width: 560px; }
.hero-badges li { background: var(--portfolio-surface); border: 1px solid var(--portfolio-border); color: var(--portfolio-muted); box-shadow: none; }
.hero-badges li:hover { color: var(--portfolio-accent); background: var(--portfolio-accent-soft); border-color: #b9d6e8; transform: translateY(-1px); box-shadow: none; }

.btn { border-color: var(--portfolio-border); background: var(--portfolio-surface); color: var(--portfolio-text); box-shadow: none; }
.btn::before { display: none; }
.btn:hover { transform: translateY(-1px); border-color: #b9cbd8; box-shadow: 0 8px 20px rgba(24, 33, 43, .08); }
.btn.primary { background: var(--portfolio-accent); color: #fff; box-shadow: 0 8px 18px rgba(23, 105, 170, .18); animation: none; }
.btn.primary:hover { background: var(--portfolio-accent-strong); box-shadow: 0 10px 22px rgba(23, 105, 170, .22); }
.btn.secondary { background: var(--portfolio-surface-muted); }
.btn.cta { color: var(--portfolio-accent-strong); border-color: #b9d6e8; }

.section { border-top-color: var(--portfolio-border); }
.section h2 { color: var(--portfolio-text); letter-spacing: -.035em; }
.card, .about-card, .contact-card, .stat-item { background: var(--portfolio-surface); border: 1px solid var(--portfolio-border); box-shadow: none; }
.card:hover, .contact-card:hover { transform: translateY(-3px); border-color: #b9d6e8; box-shadow: var(--portfolio-shadow); }
.card h3, .about-card h3 { color: var(--portfolio-text); }
.card p, .about-card p, .contact-info span { color: var(--portfolio-muted); }
.tags li { background: var(--portfolio-surface); border: 1px solid var(--portfolio-border); color: var(--portfolio-muted); }

.hero-media .photo { border: 1px solid #c9d7e0; box-shadow: 0 22px 45px rgba(24, 33, 43, .14); background: #e7edf1; animation: none; }
.hero-media .photo:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(24, 33, 43, .18); }

@media (max-width: 860px) {
  .site-nav { background: var(--portfolio-surface); border: 1px solid var(--portfolio-border); box-shadow: var(--portfolio-shadow); backdrop-filter: blur(14px); }
  .site-nav a:hover, .site-nav a:active { background: var(--portfolio-accent-soft); color: var(--portfolio-accent); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}