:root{
  --max-width: 1000px;
  --space: 24px;
  --radius: 10px;
  --transition: 200ms ease;
  --color-bg: #ffb6c1; /* user requested background */
  --color-panel: #ffffff;
  --color-text: #111827;
  --muted: #6b7280;
  --accent: #0f6efd;
  --card-shadow: 0 6px 18px rgba(15, 15, 15, 0.06);
  --focus: 0 0 0 3px rgba(15,110,253,0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--color-bg); /* solid pink background */
  color:var(--color-text);
  line-height:1.75;
  font-size:16px;
}

/* smooth in-page scrolling */
html{scroll-behavior:smooth}

/* Layout */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:var(--space);
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.5));
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
}

/* Brand */
.brand{
  display:flex;
  gap:12px;
  flex-direction:column;
}
.brand-link{
  font-weight:700;
  color:var(--color-text);
  text-decoration:none;
}
.location{
  font-size:13px;
  color:var(--muted);
}

/* Controls */
/* Mobile nav toggle */
.mobile-toggle{
  background:transparent;
  border:0;
  font-size:20px;
  padding:8px 10px;
  display:inline-block;
  cursor:pointer;
}

/* Resume link (commented by default) */
.resume-link{margin-right:8px;text-decoration:none;color:var(--accent);font-weight:600}

/* Main nav (anchor links) */
.main-nav{margin-top:0}
.nav-list{display:flex;gap:12px;align-items:center;list-style:none;margin:0;padding:0}
.nav-link{display:inline-block;padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:600}
.nav-link:hover{color:var(--accent)}
.nav-link.active{color:var(--accent);position:relative}
.nav-link.active::after{content:"";position:absolute;left:10%;right:10%;bottom:-10px;height:3px;background:linear-gradient(90deg,var(--accent), #7cc3ff);border-radius:3px}

/* Mobile nav open state */
.site-header .main-nav{display:none}
.site-header.nav-open .main-nav{display:block}
.site-header .nav-list{flex-direction:column;gap:6px}

/* Panels and cards */
.panel{padding:calc(var(--space) * 1.2) 0}
.hidden{display:none}

.card{
  /* Structural card styles only. Visual glass styles live in .glass-panel */
  box-shadow:var(--card-shadow);
  border-radius:var(--radius);
  padding:var(--space);
  margin-bottom:var(--space);
  color:var(--color-text);
}

/* Reusable glass panel matching the navbar's translucency */
.glass-panel{
  /* Lower opacity glass matching navbar but more translucent */
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:var(--radius);
}

/* Fallback for browsers without backdrop-filter support: still translucent */
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .glass-panel{
    background: rgba(255,255,255,0.78);
  }
}
.hero{
  display:grid;
  gap:18px;
  text-align:center;
  grid-template-columns:1fr;
}
.hero-name{
  margin:0;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
}
.hero-tagline{margin:0;color:var(--muted)}
.quick-links{display:none}

/* Hero-specific styling: frosted text box + profile image */
.hero.card{
  display:grid;
  align-items:center;
  grid-template-columns:1fr;
  gap:18px;
  background: transparent; /* let inner content show translucent panel */
  box-shadow:none;
  padding:0;
}
.hero-content{
  /* Use the shared glass-panel styles for background/blur; keep inner spacing and shadow */
  padding: calc(var(--space) * 0.9);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15,15,15,0.06);
  color: var(--color-text);
}
.hero-photo{
  width:100%;
  max-width:150px;
  height:auto;
  border-radius:50%;
  box-shadow: 0 8px 22px rgba(15,15,15,0.12);
  justify-self:center;
  display:block;
  margin:0 auto;
}

/* Content */
.about p{margin:0}
.education-details, .coursework{margin:8px 0 0 18px}
.role-card{border-left:3px solid rgba(0,0,0,0.06); padding-left:12px; margin-bottom:12px}
.role-card{border-left-color: rgba(0,0,0,0.06)}
.meta{color:var(--muted); margin:6px 0 8px}

/* Contact form */
.contact-form{display:grid; gap:12px; margin-top:12px}
.contact-form input, .contact-form textarea{
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  background:transparent;
  color:var(--color-text);
}
.contact-form input:focus, .contact-form textarea:focus{outline:none;box-shadow:var(--focus)}
.btn{
  background:var(--accent);
  color:white;
  border:0;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  width:max-content;
  position:relative;
  overflow:hidden; /* for ripple */
}
.form-feedback{margin-top:10px;color:var(--muted)}

/* Ripple */
.btn .ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background: rgba(255,255,255,0.6);
  animation: ripple 600ms linear;
}
@keyframes ripple{
  to{transform:scale(4);opacity:0}
}

/* Toast feedback */
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  background:var(--color-panel);
  box-shadow:var(--card-shadow);
  padding:10px 14px;
  border-radius:12px;
  color:var(--color-text);
  opacity:0;
  transform:translateY(8px);
  transition:transform 220ms ease, opacity 220ms ease;
}
.toast.show{opacity:1;transform:translateY(0)}

/* Footer */
.site-footer{padding:20px 0;color:var(--muted)}
.site-footer small{display:block;text-align:center}

/* Responsive */
@media (min-width:720px){
  .header-inner{align-items:flex-end}
  .brand{flex-direction:row; align-items:center}
  .main-nav{margin-top:0}
  .tabs{gap:12px}
  .hero{grid-template-columns:1fr auto; align-items:center; text-align:left}
  .hero .quick-links{justify-self:start}
  .hero.card{background:transparent;padding:0}
  .hero-content{padding:calc(var(--space) * 1.1)}
  .hero-photo{max-width:200px;justify-self:center;margin:0;align-self:center}
}

/* Focus-visible enhancement */
:focus:not(:focus-visible){
  box-shadow:none;
}

/* Print styles: minimal; useful when printing from browser */
@media print{
  body{background: white; color: black}
  .site-header, .site-footer, .tabs, .controls{display:none}
  .container{padding:0}
  .card{box-shadow:none;border-radius:0;padding:0}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}