/*
 * Masiya Hub — visual refresh for the standalone pages that carry their own inline styles:
 * forage.html, resumes.html and the Forage/*/index.html detail pages.
 * Loaded AFTER the inline <style>. Visual-only. Matches site-refresh.css.
 * To roll back, remove the <link> to this file from each page.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

html { font-size: 112.5%; -webkit-text-size-adjust: 100%; background: #080b11; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  line-height: 1.75 !important;
  color: #f8fafc;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(6, 182, 212, 0.14), transparent 45%),
    radial-gradient(ellipse at 90% 30%, rgba(16, 185, 129, 0.07), transparent 40%),
    #080b11 !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 3rem 1.5rem 4rem !important;
}

a { color: #38bdf8; text-decoration: none; font-weight: 600; }
a:hover { color: #34d399; text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid #06b6d4; outline-offset: 3px; border-radius: 6px; }

h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  background: linear-gradient(120deg, #f8fafc 20%, #06b6d4 62%, #10b981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0.5rem 0 1rem;
}
h2 { color: #f8fafc !important; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.3; margin-top: 0; }

.card {
  border: 1px solid #263449 !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  margin: 1.5rem 0 !important;
  background: rgba(20, 29, 48, 0.72) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.55);
}
.card li { margin: 0.35rem 0; color: #b4c0d4; }
.card p { color: #b4c0d4; }
.card strong { color: #f8fafc; }

.tag {
  display: inline-block;
  border: 1px solid #334155 !important;
  border-radius: 999px !important;
  padding: 0.28rem 0.8rem !important;
  margin: 0.25rem 0.3rem 0.25rem 0 !important;
  color: #b4c0d4 !important;
  font: 500 0.8rem 'IBM Plex Mono', monospace;
  background: rgba(6, 182, 212, 0.05);
}

.note {
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-left: 4px solid #10b981 !important;
  border-radius: 14px;
  padding: 1.25rem 1.5rem !important;
  background: rgba(6, 182, 212, 0.05) !important;
  color: #b4c0d4;
}
.note strong { color: #f8fafc; }

/* resumes.html */
main { width: min(780px, 100%); }
.card h2 { font-size: 1.6rem; }
.btn {
  font-size: 1rem !important;
  padding: 0.95rem 1.6rem !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #10b981, #14b8a6) !important;
  border-color: transparent !important;
  color: #03140e !important;
  box-shadow: 0 10px 28px -10px rgba(16, 185, 129, 0.65);
  text-decoration: none !important;
}
.btn:hover { transform: translateY(-2px); }

@media (max-width: 650px) {
  html { font-size: 106.25%; }
  body { padding: 1.5rem 1rem 3rem !important; }
  .card { padding: 1.4rem !important; }
}