:root{
  --bg:#ffffff;
  --muted:#6b7280;
  --accent:#0f172a;
  --primary:#0ea5a4;
  --brand:#2563eb;
  --max-width:1100px;
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--accent);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1.25rem;
}

/* Tab styles */
.tabs{
  display:flex;
  gap:0.5rem;
  margin-top:0.5rem;
  flex-wrap:wrap;
}
.tab{
  background:transparent;
  border:1px solid #e6eefb;
  color:var(--brand);
  padding:0.4rem 0.75rem;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.tab[aria-selected="true"]{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 4px 12px rgba(37,99,235,0.12);
}

/* Panels */
.tab-panel{padding:1rem 0}
.tab-panel[hidden]{display:none}

#resume-root{
  background:#fbfdff;border:1px solid #eef2f7;padding:1rem;border-radius:var(--radius);
}

.resume-item{margin-bottom:1rem}
.resume-heading{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.role{font-weight:700}
.meta{color:var(--muted);font-size:0.9rem}
.bullet{margin:0.5rem 0 0 1rem}

.resume-actions{margin-top:0.5rem}
.resume-actions a,
.resume-actions button{margin-right:0.5rem;background:transparent;border:1px solid #dbe7e7;padding:0.4rem 0.6rem;border-radius:6px;cursor:pointer}

.site-footer{padding:1rem 0;text-align:center;color:var(--muted);font-size:0.9rem}

/* subtle animations */
.fade-up{opacity:0;transform:translateY(8px);transition:opacity 320ms ease, transform 320ms ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width:600px){
  .site-nav{flex-wrap:wrap}
  .resume-heading{flex-direction:column;align-items:flex-start;gap:0.25rem}
  .tabs{gap:0.25rem}
}

/* Print friendly */
@media print{
  body{color:#000;background:#fff}
  .site-nav,.resume-actions,.skip-link,.tabs{display:none}
  .container{padding:0}
  #resume-root{border:none;background:transparent}
}

/* Content Lab (Content Tool) styles */
.content-tool{display:grid;gap:0.5rem;grid-template-columns:1fr}
.content-tool label{font-size:0.9rem;color:var(--muted)}
.content-tool select,.content-tool input{padding:0.6rem;border-radius:6px;border:1px solid #eef2f7}
.tool-actions{display:flex;gap:0.5rem;margin-top:0.5rem}
.content-output{margin-top:1rem;padding:0.75rem;background:#fbfdff;border-radius:6px;color:var(--accent);min-height:3rem}

@media (min-width:640px){
  .content-tool{grid-template-columns:1fr 1fr;align-items:center}
  .tool-actions{grid-column:1/-1}
}

/* Intro */
.intro{
  max-width:65ch;
  margin:2rem auto 3rem;
  text-align:center;
}

.intro .lead{
  font-size:1.25rem;
  line-height:1.6;
  color:var(--accent);
  font-weight:300;
  margin:0;
}

@media (max-width:800px){
  .hero .hero-inner{flex-direction:column}
  .hero-media img{max-width:100%}
}

/* Projects grid */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1rem}
.project-card{display:block;padding:1.25rem;border-radius:12px;background:#fff;color:var(--accent);text-decoration:none;box-shadow:0 6px 18px rgba(16,24,40,0.04);transition:transform 220ms ease, box-shadow 220ms ease}
.project-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(16,24,40,0.08)}
.project-card strong{display:block;font-size:1.05rem}
.project-card span{color:var(--muted);font-size:0.95rem}


/* Resume Panel Styling */
#panel-resume .section {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.resume-header {
  border-bottom: 2px solid #eee;
  margin-bottom: 1.5rem;
}

.resume-header h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.resume-header .subtitle {
  color: #555;
  font-weight: 500;
  margin-bottom: 1rem;
}

.resume-section {
  margin-bottom: 2rem;
}

.resume-section h3 {
  font-size: 1.25rem;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 0.25rem;
  margin-bottom: 0.75rem;
}

.job h4 {
  margin: 0;
  font-weight: 600;
}

.job .meta {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill {
  background: #f3f6fa;
  border-radius: 9999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.95rem;
  color: #333;
  border: 1px solid #e0e0e0;
}

.loading, .error {
  text-align: center;
  color: #666;
  font-style: italic;
  padding: 1rem 0;
}

.resume-actions {
  text-align: center;
  margin-top: 2rem;
}

.resume-actions a, .resume-actions button {
  background: #007acc;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  margin: 0 0.5rem;
  border: none;
  cursor: pointer;
}

.resume-actions a:hover, .resume-actions button:hover {
  background: #005ea0;
}

/* Print view */
@media print {
  nav, header, footer, .tab-panel:not(#panel-resume), .resume-actions {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  #panel-resume .section {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}
}