:root,
[data-theme="light"] {
  --color-bg: #f7f4ef;
  --color-surface: #fdfbf8;
  --color-surface-2: #f3efe8;
  --color-surface-offset: #ece7df;
  --color-border: rgba(31, 35, 40, 0.12);
  --color-text: #1f2328;
  --color-text-muted: #5c6773;
  --color-text-faint: #7b8794;
  --color-primary: #2b4fa3;
  --color-primary-2: #b75163;
  --color-accent: #d96a3a;
  --color-success: #407a47;
  --color-card-glow: rgba(43,79,163,0.08);
  --shadow-sm: 0 10px 30px rgba(25, 39, 67, 0.08);
  --shadow-lg: 0 22px 64px rgba(25, 39, 67, 0.12);
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.35rem;
  --radius-xl: 2rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --text-xs: clamp(0.75rem, 0.73rem + 0.2vw, 0.85rem);
  --text-sm: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --text-base: clamp(1rem, 0.97rem + 0.25vw, 1.1rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --text-xl: clamp(1.55rem, 1.3rem + 1vw, 2.3rem);
  --text-2xl: clamp(2.4rem, 1.9rem + 2.4vw, 4.2rem);
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}
[data-theme="dark"] {
  --color-bg: #131519;
  --color-surface: #1a1d22;
  --color-surface-2: #20242b;
  --color-surface-offset: #262b34;
  --color-border: rgba(255,255,255,0.12);
  --color-text: #eef1f5;
  --color-text-muted: #b3bdc8;
  --color-text-faint: #85909c;
  --color-primary: #88a9ff;
  --color-primary-2: #f29aac;
  --color-accent: #ffb27d;
  --color-success: #79b881;
  --color-card-glow: rgba(136,169,255,0.12);
  --shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 72px rgba(0, 0, 0, 0.36);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font-body);background:radial-gradient(circle at top right, rgba(183,81,99,.12), transparent 30%), radial-gradient(circle at top left, rgba(43,79,163,.10), transparent 28%), var(--color-bg);color:var(--color-text);line-height:1.6} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit}
.container{width:min(1120px,calc(100% - 2rem));margin:0 auto}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;background:var(--color-surface);padding:.75rem 1rem;border-radius:999px;z-index:999}
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb, var(--color-bg) 82%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-border)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}.brand{display:flex;align-items:center;gap:1rem}.brand img{width:56px;height:56px;border-radius:16px;object-fit:cover;box-shadow:var(--shadow-sm)}.brand-mark{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:var(--text-xs);color:var(--color-text-muted)}.brand-name{font-family:var(--font-display);font-size:var(--text-lg)}
.nav-toggle{display:none;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:999px;padding:.65rem .9rem}.nav-links{display:flex;align-items:center;gap:1rem;list-style:none;padding:0;margin:0}.nav-links a{padding:.55rem .85rem;border-radius:999px;color:var(--color-text-muted)}.nav-links a:hover,.nav-links a.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}
.theme-toggle{border:1px solid var(--color-border);background:var(--color-surface);border-radius:999px;padding:.55rem .75rem;color:var(--color-text)}
.hero{padding:clamp(3rem,6vw,6rem) 0 2rem}.hero-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:2rem;align-items:center}.eyebrow{display:inline-flex;align-items:center;margin-right:5px;gap:.5rem;background:var(--color-surface);border:1px solid var(--color-border);padding:.5rem .85rem;border-radius:999px;color:var(--color-text-muted);box-shadow:var(--shadow-sm)}.hero h1{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.02;margin:.9rem 0 1rem;max-width:12ch}
#flash-word {
  display: inline-block;
  color: inherit;
  background-image: linear-gradient(90deg, currentColor 0 50%, rgb(132, 247, 135) 50% 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.25s ease;
}

#flash-word:hover {
  background-position: -100% 0%;
}
.hero p{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch}.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}.button{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.25rem;border-radius:999px;border:1px solid transparent;font-weight:700}.button.primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-2));color:white;box-shadow:var(--shadow-lg)}.button.secondary{background:var(--color-surface);border-color:var(--color-border)}
.hero-grid img {height: 25vh; margin-bottom: 1vh;}
.hero-card,.card,.panel{background:linear-gradient(180deg,var(--color-surface),color-mix(in srgb,var(--color-surface) 70%, var(--color-surface-2)));border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.hero-card{padding:1.2rem;position:relative;overflow:hidden}.hero-card::after{content:"";position:absolute;inset:auto -10% -20% auto;width:220px;height:220px;background:radial-gradient(circle, var(--color-card-glow), transparent 70%)}

.profile-photo{
  border-radius:1.5rem;overflow:hidden;aspect-ratio:4/5;background:var(--color-surface-offset); perspective:1000px;
}
.profile-photo img{
  width:100%;height:100%;object-fit:cover
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
}

.profile-photo:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
  border-radius: 12px;
  overflow: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.stack{display:grid;gap:1rem}.logo-chip{display:flex;align-items:center;gap:1rem;background:var(--color-surface-2);padding:1rem;border-radius:1.1rem;margin-top:1rem}.logo-chip img{width:121px;height:78px;object-fit:cover;border-radius:1rem}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1rem}.stat{background:var(--color-surface-2);padding:1rem;border-radius:1rem}.stat strong{display:block;font-size:1.3rem;font-family:var(--font-display)}
.section{padding:1rem 0 4rem}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.5rem}.section-heading h2{font-family:var(--font-display);font-size:var(--text-xl);margin:0}.section-heading p{margin:0;color:var(--color-text-muted);max-width:42ch}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.card{padding:1.3rem}.card h3{margin:.3rem 0}.muted{color:var(--color-text-muted)}

.muted-link {color:#2b4fa3;}
.muted-link:hover {color:#2ba337;}

.tiny{text-transform:uppercase;letter-spacing:.12em;font-size:var(--text-xs);color:var(--color-text-faint);font-weight:800}
.timeline{display:grid;gap:1rem}.timeline-item{padding:1.25rem;border-radius:1.2rem;background:var(--color-surface);border:1px solid var(--color-border)}
.gallery{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:1rem}.gallery .card{padding:0;overflow:hidden}.gallery figure{margin:0}.gallery img{width:100%;height:280px;object-fit:cover}.gallery figcaption{padding:1rem;color:var(--color-text-muted)}
.article{max-width:850px}.article .panel{padding:1.5rem}.article h3{font-family:var(--font-display);font-size:clamp(1.6rem,1.4rem + .6vw,2.2rem);margin:.3rem 0 1rem}.article p{color:var(--color-text-muted)}

#goal-statement {
  display: inline-block;
  width: 70%;
  margin: 0 15% 15px;
}

#profiles-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 25%; 
  margin: 0 auto;
}

#profiles-container img {
  width: 48px;
  display: flex;
  align-items: center;
  justify-items: center;
  margin: 0 10px 40px 10px;
}

.resume-frame{padding:1rem}.resume-frame img{width:100%;border-radius:1rem;border:1px solid var(--color-border)}
.footer{padding:2rem 0 4rem;color:var(--color-text-muted)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media (max-width: 900px){.hero-grid,.grid-3,.grid-2,.gallery{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr 1fr}.nav-toggle{display:block}.nav-panel{display:none;position:absolute;left:1rem;right:1rem;top:calc(100% + .5rem);background:var(--color-surface);padding:1rem;border:1px solid var(--color-border);border-radius:1rem;box-shadow:var(--shadow-lg)}.nav-panel.open{display:block}.nav-links{flex-direction:column;align-items:stretch}.nav-actions{display:flex;align-items:center;gap:.75rem}}
@media (min-width: 901px){.nav-panel{display:flex;align-items:center;gap:1rem}.nav-actions{display:flex;align-items:center;gap:.75rem}}