:root {
--text-xs: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
--text-sm: clamp(0.875rem,0.8rem + 0.35vw,1rem);
--text-base: clamp(1rem,0.95rem + 0.25vw,1.125rem);
--text-lg: clamp(1.125rem,1rem + 0.75vw,1.5rem);
--text-xl: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
--text-2xl: clamp(2rem,1.2rem + 2.5vw,3.5rem);
--text-hero: clamp(2.8rem,0.5rem + 6vw,6rem);
--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;
--space-24: 6rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
--transition: 180ms cubic-bezier(0.16,1,0.3,1);
--content-narrow: 640px;
--content-default: 960px;
--content-wide: 1200px;
}
/* FIX: contrast bumped — --muted ≥ 5:1, --faint ≥ 4.5:1 on respective bg */
:root,[data-theme="dark"] {
--bg: #0d1520;
--surface: #111d2e;
--surface-2: #152338;
--surface-3: #1a2a40;
--surface-4: #1f3248;
--divider: #1e3050;
--border: #243a56;
--text: #d8e6f3;
--muted: #96b8d4;
--faint: #6a8daa;
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
--shadow-md: 0 4px 16px rgba(0,0,0,.35);
--shadow-lg: 0 16px 48px rgba(0,0,0,.45);
}
[data-theme="light"] {
--bg: #f5f8fc;
--surface: #ffffff;
--surface-2: #f0f5fb;
--surface-3: #e8f0fa;
--surface-4: #dce8f5;
--divider: #d0ddef;
--border: #c0d3e8;
--text: #0d1f35;
--muted: #1e4b74;
--faint: #3d6585;
--shadow-sm: 0 1px 3px rgba(13,31,53,.08);
--shadow-md: 0 4px 16px rgba(13,31,53,.1);
--shadow-lg: 0 16px 48px rgba(13,31,53,.14);
}
@media (prefers-color-scheme:dark) {
:root:not([data-theme]) {
--bg: #0d1520;
--surface: #111d2e;
--surface-2: #152338;
--surface-3: #1a2a40;
--surface-4: #1f3248;
--divider: #1e3050;
--border: #243a56;
--text: #d8e6f3;
--muted: #96b8d4;
--faint: #6a8daa;
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
--shadow-md: 0 4px 16px rgba(0,0,0,.35);
--shadow-lg: 0 16px 48px rgba(0,0,0,.45);
}
}
*,*::before,*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-padding-top: 5rem;
}
body {
font-family: system-ui,'Segoe UI',sans-serif;
font-size: clamp(1rem,0.95rem + 0.25vw,1.125rem);
color: var(--text);
background: var(--bg);
line-height: 1.65;
min-height: 100dvh;
overflow-x: hidden;
transition: background 180ms cubic-bezier(0.16,1,0.3,1),color 180ms cubic-bezier(0.16,1,0.3,1);
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
img,picture,svg {
display: block;
max-width: 100%;
height: auto;
}
h1,h2,h3,h4 {
text-wrap: balance;
line-height: 1.15;
font-family: system-ui,'Segoe UI',sans-serif;
}
p,li {
text-wrap: pretty;
}
a,button {
transition: color 180ms cubic-bezier(0.16,1,0.3,1),background 180ms cubic-bezier(0.16,1,0.3,1),border-color 180ms cubic-bezier(0.16,1,0.3,1),box-shadow 180ms cubic-bezier(0.16,1,0.3,1);
}
button {
cursor: pointer;
background: none;
border: none;
}
:focus-visible {
outline: 2px solid #3b9eed;
outline-offset: 3px;
border-radius: 0.375rem;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
.wrap {
max-width: 1200px;
margin-inline: auto;
padding-inline: 1.5rem;
}
.wrap--narrow {
max-width: 960px;
}
/* NAV */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: color-mix(in oklch,var(--bg) 85%,transparent);
backdrop-filter: blur(18px) saturate(1.5);
border-bottom: 1px solid var(--divider);
transition: padding 180ms cubic-bezier(0.16,1,0.3,1);
}
.nav__inner {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__logo {
font-family: system-ui,'Segoe UI',sans-serif;
font-size: clamp(1.125rem,1rem + 0.75vw,1.5rem);
font-weight: 800;
color: var(--text);
text-decoration: none;
letter-spacing: -.3px;
}
.nav__logo span {
color: #3b9eed;
}
.nav__links {
display: flex;
gap: 1.5rem;
list-style: none;
align-items: center;
}
/* FIX: nav links get underline on focus/hover (links rely on color) */
.nav__links a {
color: var(--muted);
text-decoration: none;
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
font-weight: 500;
}
.nav__links a:hover,
.nav__links a:focus-visible {
color: var(--text);
text-decoration: underline;
}
.nav__right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.theme-btn {
width: 36px;
height: 36px;
border-radius: 9999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
}
.theme-btn:hover {
color: var(--text);
border-color: #3b9eed;
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform .3s,opacity .3s;
}
.hamburger.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* HERO */
.hero {
min-height: 100dvh;
display: flex;
align-items: center;
padding: clamp(5rem,12vw,6rem) 1.5rem 4rem;
position: relative;
overflow: hidden;
}
.hero__grid-bg {
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(color-mix(in oklch,#3b9eed 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,#3b9eed 4%,transparent) 1px,transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 80% 60% at 60% 35%,black,transparent);
}
.hero__glow {
position: absolute;
top: -200px;
right: -150px;
width: 700px;
height: 700px;
border-radius: 50%;
background: radial-gradient(circle,color-mix(in oklch,#3b9eed 8%,transparent),transparent 70%);
animation: pulse 7s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes pulse {
from {opacity: .5;transform: scale(1);}
to {opacity: 1;transform: scale(1.1);}
}
.hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(2.5rem,5vw,5rem);
align-items: center;
}
.hero__photo {
width: 240px;
height: 300px;
border-radius: 1rem;
overflow: hidden;
border: 1px solid color-mix(in oklch,#3b9eed 35%,transparent);
box-shadow: var(--shadow-lg),0 0 60px color-mix(in oklch,#3b9eed 10%,transparent);
transition: transform .5s ease,box-shadow .5s ease;
}
.hero__photo:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg),0 0 80px color-mix(in oklch,#3b9eed 18%,transparent);
}
.hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.hero__photo-ph {
width: 100%;
height: 100%;
background: linear-gradient(160deg,var(--surface-2),var(--surface));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: var(--faint);
}
.hero__socials {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 1.25rem;
}
.hero__socials a {
width: 44px;
height: 44px;
border-radius: 9999px;
border: 1px solid color-mix(in oklch,#3b9eed 30%,transparent);
background: rgba(59,158,237,.12);
display: flex;
align-items: center;
justify-content: center;
color: #3b9eed;
}
.hero__socials a:hover,
.hero__socials a:focus-visible {
border-color: #3b9eed;
background: color-mix(in oklch,#3b9eed 18%,transparent);
transform: translateY(-3px);
box-shadow: 0 4px 20px color-mix(in oklch,#3b9eed 25%,transparent);
}
.hero__socials a svg {
width: 17px;
height: 17px;
fill: currentColor;
}
.hero__tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(59,158,237,.12);
border: 1px solid color-mix(in oklch,#3b9eed 35%,transparent);
border-radius: 9999px;
padding: 0.25rem 1rem;
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
font-weight: 700;
color: #3b9eed;
text-transform: uppercase;
letter-spacing: .8px;
margin-bottom: 1rem;
}
.dot {
width: 6px;
height: 6px;
border-radius: 9999px;
background: #00c8a0;
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0%,100% {opacity: 1;}
50% {opacity: .25;}
}
.hero__name {
font-size: clamp(2.8rem,0.5rem + 6vw,6rem);
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1.02;
color: var(--text);
margin-bottom: 0.5rem;
}
.hero__title {
font-family: system-ui,'Segoe UI',sans-serif;
font-size: clamp(1.125rem,1rem + 0.75vw,1.5rem);
font-weight: 500;
color: #3b9eed;
margin-bottom: 1.25rem;
}
.hero__title a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.hero__title a:hover {
opacity: .8;
}
.hero__bio {
font-size: clamp(1rem,0.95rem + 0.25vw,1.125rem);
color: var(--muted);
max-width: 52ch;
margin-bottom: 1.5rem;
line-height: 1.75;
}
.hero__bio a {
color: #3b9eed;
text-decoration: underline;
text-underline-offset: 3px;
}
.hero__bio a:hover {
opacity: .8;
}
.hero__meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
color: var(--muted);
}
.meta-item svg {
color: #3b9eed;
flex-shrink: 0;
fill: currentColor;
}
.hero__btns {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* BUTTONS */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-family: system-ui,'Segoe UI',sans-serif;
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn--primary {
background: #3b9eed;
color: #050505;
border: 1px solid #3b9eed;
box-shadow: 0 4px 14px color-mix(in oklch,#3b9eed 35%,transparent);
}
.btnbackground: #5fb3f5;
border-color: #5fb3f5;
}
.btn--ghost {
background: var(--surface);
border: 1px solid var(--border);
color: var(--muted);
}
.btn--ghost:hover {
border-color: #3b9eed;
color: #3b9eed;
}
/* SECTION */
.section {
padding-block: clamp(3rem,8vw,6rem);
border-top: 1px solid var(--divider);
}
.section__label {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #3b9eed;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.section__label::before {
content: '';
width: 28px;
height: 1px;
background: #3b9eed;
}
.section__title {
font-size: clamp(2rem,1.2rem + 2.5vw,3.5rem);
font-weight: 800;
letter-spacing: -1px;
color: var(--text);
margin-bottom: 2.5rem;
}
/* ABOUT */
.about__grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: start;
}
.about__text p {
color: var(--muted);
margin-bottom: 1rem;
line-height: 1.8;
}
.about__text p:last-child {
margin-bottom: 0;
}
.about__text a {
color: #3b9eed;
text-decoration: underline;
text-underline-offset: 3px;
}
.about__text a:hover {
opacity: .8;
}
.about__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
min-width: 280px;
}
.stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.25rem;
text-align: center;
transition: border-color 180ms cubic-bezier(0.16,1,0.3,1),transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.stat:hover {
border-color: color-mix(in oklch,#3b9eed 40%,transparent);
transform: translateY(-2px);
}
.stat__num {
display: block;
font-family: system-ui,'Segoe UI',sans-serif;
font-size: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
font-weight: 800;
color: #3b9eed;
letter-spacing: -1px;
}
.stat__label {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
color: var(--muted);
font-weight: 500;
}
/* TIMELINE */
.timeline {
position: relative;
padding-left: 2.5rem;
}
.timeline::before {
content: '';
position: absolute;
left: 6px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom,#3b9eed,var(--divider),transparent);
}
.tl-item {
position: relative;
margin-bottom: 2rem;
}
.tl-item:last-child {
margin-bottom: 0;
}
.tl-item::before {
content: '';
position: absolute;
left: calc(-1 * 2.5rem + 2px);
top: 8px;
width: 10px;
height: 10px;
border-radius: 9999px;
background: var(--bg);
border: 2px solid #3b9eed;
}
.tl-item:first-child::before {
background: #3b9eed;
box-shadow: 0 0 12px color-mix(in oklch,#3b9eed 50%,transparent);
}
.tl-period {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
color: #3b9eed;
font-weight: 600;
letter-spacing: .5px;
margin-bottom: 0.25rem;
}
.tl-role {
font-size: clamp(1rem,0.95rem + 0.25vw,1.125rem);
font-weight: 700;
color: var(--text);
margin-bottom: 0.25rem;
}
.tl-company {
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
color: var(--muted);
margin-bottom: 1rem;
}
.tl-company a {
color: #3b9eed;
text-decoration: underline;
text-underline-offset: 3px;
}
.tl-company a:hover {
opacity: .8;
}
.tl-desc {
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
color: var(--muted);
line-height: 1.75;
}
.tl-desc ul {
padding-left: 1.25rem;
margin-top: 0.75rem;
}
.tl-desc li {
margin-bottom: 0.5rem;
}
.tl-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.5rem;
transition: border-color 180ms cubic-bezier(0.16,1,0.3,1),transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.tl-card:hover {
border-color: color-mix(in oklch,#3b9eed 40%,transparent);
transform: translateX(4px);
}
.tl-card--dashed {
border-style: dashed;
opacity: .55;
}
.tl-links {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-3);
flex-wrap: wrap;
}

.tl-links a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--muted);
text-decoration: none;
transition: color var(--transition);
}

.tl-links a:hover {
color: var(--primary);
}

.tl-links svg {
flex-shrink: 0;
}
.tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.tag {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
font-weight: 600;
background: var(--surface-3);
border: 1px solid var(--border);
color: var(--muted);
border-radius: 9999px;
padding: 0.25rem 0.75rem;
}
/* EDUCATION */
.edu-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 2rem;
display: flex;
gap: 1.5rem;
align-items: flex-start;
transition: border-color 180ms cubic-bezier(0.16,1,0.3,1);
}
.edu-card:hover {
border-color: color-mix(in oklch,#3b9eed 40%,transparent);
}
.edu-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 0.75rem;
background: rgba(59,158,237,.12);
border: 1px solid color-mix(in oklch,#3b9eed 25%,transparent);
display: flex;
align-items: center;
justify-content: center;
}
.edu-degree {
font-size: clamp(1rem,0.95rem + 0.25vw,1.125rem);
font-weight: 700;
color: var(--text);
}
.edu-field {
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
color: #3b9eed;
margin: 0.25rem 0;
font-weight: 500;
}
.edu-school {
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
color: var(--muted);
}
.edu-school a {
color: var(--muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.edu-school a.ext {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
color: #3b9eed;
}
.edu-school a:hover {
opacity: .8;
}
.edu-dates {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
color: var(--faint);
margin-top: 0.5rem;
}
/* SKILLS */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
gap: 1rem;
}
.skill-card {
padding: 1.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.75rem;
position: relative;
overflow: hidden;
transition: border-color 180ms cubic-bezier(0.16,1,0.3,1),transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.skill-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,#3b9eed,#00c8a0);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s ease;
}
.skill-card:hover {
border-color: color-mix(in oklch,#3b9eed 40%,transparent);
transform: translateY(-3px);
}
.skill-card:hover::after {
transform: scaleX(1);
}
.skill-name {
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
font-weight: 700;
color: var(--text);
margin-bottom: 0.75rem;
}
.skill-bar {
height: 3px;
background: var(--divider);
border-radius: 9999px;
overflow: hidden;
}
.skill-fill {
height: 100%;
background: linear-gradient(90deg,#3b9eed,#00c8a0);
border-radius: 9999px;
}
.skill-detail {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
color: var(--muted);
margin-top: 0.75rem;
line-height: 1.6;
}
/* CERTIFICATIONS */
.certs-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
gap: 1rem;
}
.cert-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
transition: border-color 180ms cubic-bezier(0.16,1,0.3,1),transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.cert-card:hover {
border-color: color-mix(in oklch,#00c8a0 50%,transparent);
transform: translateY(-2px);
}
.cert-badge {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 0.5rem;
background: rgba(0,200,160,.12);
border: 1px solid color-mix(in oklch,#00c8a0 30%,transparent);
display: flex;
align-items: center;
justify-content: center;
}
.cert-name {
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
font-weight: 700;
color: var(--text);
}
.cert-issuer {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
color: var(--muted);
margin-top: 2px;
}
.cert-date {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
color: #3b9eed;
margin-top: 0.5rem;
font-weight: 600;
}
/* CONNECT */
.connect-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
padding: clamp(2rem,4vw,3rem);
text-align: center;
}
.connect-card h3 {
font-size: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
color: var(--text);
margin-bottom: 0.5rem;
}
.connect-card p {
color: var(--muted);
font-size: clamp(1rem,0.95rem + 0.25vw,1.125rem);
margin-bottom: 2rem;
}
.social-links {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.social-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: 0.75rem;
color: var(--muted);
text-decoration: none;
font-size: clamp(0.875rem,0.8rem + 0.35vw,1rem);
font-weight: 500;
}
.social-link:hover,
.social-link:focus-visible {
border-color: #3b9eed;
color: #3b9eed;
background: rgba(59,158,237,.12);
transform: translateY(-2px);
}
/* FOOTER */
footer {
border-top: 1px solid var(--divider);
padding: 2rem 1.5rem;
}
.footer-inner {
max-width: 1200px;
margin-inline: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
footer p {
font-size: clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
color: var(--faint);
}
footer a {
color: #3b9eed;
text-decoration: underline;
text-underline-offset: 3px;
}
footer a:hover {
opacity: .8;
}
/* RESPONSIVE */
@media (max-width:900px) {
.hero__inner {
grid-template-columns: 1fr;
}
.hero__photo {
width: 180px;
height: 220px;
margin: 0 auto;
}
.about__grid {
grid-template-columns: 1fr;
}
.about__stats {
min-width: unset;
}
}
@media (max-width:768px) {
.nav__links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: color-mix(in oklch,var(--bg) 96%,transparent);
backdrop-filter: blur(18px);
flex-direction: column;
padding: 1.5rem 1.5rem;
gap: 1rem;
border-bottom: 1px solid var(--border);
}
.nav__links.open {
display: flex;
}
.hamburger {
display: flex;
}
.edu-card {
flex-direction: column;
}
}
@media (max-width:480px) {
.hero {
padding-top: clamp(4rem,18vw,6rem);
}
.hero__photo {
width: 140px;
height: 175px;
}
.section__title {
font-size: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
}
}

/* HERO PHOTO COL */
.hero__photo-col {
display: flex;
flex-direction: column;
align-items: center;
}
/* HERO PHOTO PLACEHOLDER LABEL */
.hero__photo-label {
font-size: var(--text-xs);
text-align: center;
line-height: 1.5;
}
/* TL CARD HEADER ROW */
.tl-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-1);
}
/* DASHED PLACEHOLDER CARD — child overrides */
.tl-card--dashed .tl-period,
.tl-card--dashed .tl-company,
.tl-card--dashed .tl-desc {
color: var(--faint);
}
.tl-card--dashed .tl-role {
color: var(--muted);
}
/* EDU TAGS EXTRA MARGIN */
.edu__tags {
margin-top: var(--space-4);
}
/* CERTS HINT */
.certs-hint {
font-size: var(--text-xs);
color: var(--faint);
margin-top: var(--space-6);
font-style: italic;
}
/* FOOTER DOMAIN */
.footer-domain {
font-size: var(--text-xs);
color: var(--faint);
}

/* SKILL BAR WIDTHS */
.skill-fill--78 { width: 78%;}
.skill-fill--80 {width:80%;}
.skill-fill--84 { width: 84%;}
.skill-fill--85 { width: 85%;}
.skill-fill--86 {width:86%;}
.skill-fill--87 { width: 87%;}
.skill-fill--88 {width:88%;}
.skill-fill--89 { width: 89%;}
.skill-fill--90 {width:90%;}
.skill-fill--92 {width:92%;}
.skill-fill--93 { width: 93%;}
.skill-fill--95 {width:95%;}
.skill-fill--96 { width: 96%;}
.skill-fill--97 { width: 97%;}
.skill-fill--98 {width:98%;}