:root {
--bg: #f6f4ef;
--card: #ffffff;
--text: #17202a;
--muted: #667085;
--line: rgba(23, 32, 42, 0.12);
--line-strong: rgba(23, 32, 42, 0.18);
--navy: #10243d;
--blue: #2454d6;
--blue-soft: #eaf0ff;
--gold: #b58a2b;
--shadow: 0 22px 60px rgba(15, 23, 42, 0.09);
--shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.06);
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
line-height: 1.65;
background:
radial-gradient(circle at 15% 0%, rgba(36, 84, 214, 0.08), transparent 32%),
radial-gradient(circle at 90% 8%, rgba(181, 138, 43, 0.08), transparent 28%),
linear-gradient(180deg, #fbfaf7 0%, var(--bg) 100%);
}

a {
color: inherit;
text-decoration: none;
}

a:hover {
color: var(--blue);
}

.page {
width: min(1120px, calc(100% - 48px));
margin: 0 auto;
padding: 46px 0 40px;
}

.hero {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 32px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 255, 0.82));
box-shadow: var(--shadow);
}

.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 48px;
align-items: center;
padding: 58px 64px;
}

.hero-copy {
min-width: 0;
}

.eyebrow,
.section-kicker {
margin: 0;
color: var(--blue);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}

h1 {
margin: 14px 0 0;
color: var(--text);
font-size: clamp(3.6rem, 7.5vw, 6rem);
line-height: 0.96;
letter-spacing: -0.075em;
}

h2 {
margin: 8px 0 0;
color: var(--text);
font-size: clamp(1.45rem, 2.6vw, 2rem);
line-height: 1.2;
letter-spacing: -0.04em;
}

h3 {
margin: 0;
color: var(--text);
line-height: 1.3;
letter-spacing: -0.02em;
}

p {
margin-top: 0;
}

.role-line {
margin: 22px 0 0;
color: var(--navy);
font-size: 1.06rem;
font-weight: 760;
}

.subtitle {
max-width: 760px;
margin: 16px 0 0;
color: var(--muted);
font-size: 1.02rem;
}

.links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}

.links a,
.project-links a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: #ffffff;
color: var(--text);
font-size: 0.94rem;
font-weight: 750;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.links a:hover,
.project-links a:hover {
transform: translateY(-1px);
border-color: rgba(36, 84, 214, 0.42);
color: var(--blue);
text-decoration: none;
}

.links .primary-link {
border-color: var(--navy);
background: var(--navy);
color: #ffffff;
}

.links .primary-link:hover {
color: #ffffff;
background: #17365b;
}

.profile-card {
padding: 14px;
border: 1px solid var(--line);
border-radius: 28px;
background: rgba(255, 255, 255, 0.84);
box-shadow: var(--shadow-soft);
}

.profile-photo {
display: block;
width: 100%;
height: 315px;
border-radius: 22px;
object-fit: cover;
object-position: center top;
border: 1px solid var(--line);
background: #ffffff;
user-select: none;
-webkit-user-drag: none;
}

.profile-caption {
display: grid;
gap: 2px;
margin-top: 14px;
color: var(--muted);
font-size: 0.92rem;
}

.profile-caption strong {
color: var(--text);
font-size: 1rem;
}

.section {
margin-top: 26px;
padding: 36px;
border: 1px solid var(--line);
border-radius: 26px;
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-soft);
}

.section-header {
max-width: 850px;
}

.section-lead {
max-width: 900px;
margin: 18px 0 0;
color: var(--muted);
font-size: 1.02rem;
}

.interest-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 26px;
}

.interest-card {
position: relative;
min-height: 180px;
padding: 22px;
border: 1px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, #ffffff, #fbfaf7);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.interest-index {
display: block;
color: rgba(16, 36, 61, 0.28);
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -0.04em;
}

.interest-card h3 {
margin-top: 22px;
font-size: 1.04rem;
}

.interest-card p {
margin: 10px 0 0;
color: var(--muted);
font-size: 0.95rem;
}

.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}

.tags span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 12px;
border: 1px solid rgba(36, 84, 214, 0.13);
border-radius: 999px;
background: var(--blue-soft);
color: #1d3d78;
font-size: 0.9rem;
font-weight: 750;
}

.two-column {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 34px;
}

.item {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line);
}

.item:first-of-type {
margin-top: 20px;
}

.item p {
margin-bottom: 0;
}

.muted {
color: var(--muted);
font-size: 0.94rem;
}

.detail {
margin-top: 10px;
color: var(--muted);
font-size: 0.96rem;
}

.project-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 26px;
}

.project-card {
padding: 24px;
border: 1px solid var(--line);
border-radius: 24px;
background: #ffffff;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
}

.project-card.featured {
border-color: rgba(16, 36, 61, 0.28);
background: linear-gradient(145deg, #10243d, #1f436e);
color: #ffffff;
}

.project-card.featured h3 {
color: #ffffff;
}

.project-card.featured p {
color: rgba(255, 255, 255, 0.78);
}

.project-card.featured .project-topline span {
color: #d7bd73;
}

.project-card.featured .project-topline small {
color: rgba(255, 255, 255, 0.76);
}

.project-topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}

.project-topline span {
color: var(--blue);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.project-topline small {
color: var(--muted);
font-weight: 700;
white-space: nowrap;
}

.project-card h3 {
font-size: 1.15rem;
}

.project-card p {
margin: 12px 0 0;
color: var(--muted);
font-size: 0.96rem;
}

.project-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}

.project-links a {
min-height: 34px;
padding: 0 12px;
font-size: 0.88rem;
}

.skill-list {
display: grid;
gap: 14px;
margin-top: 20px;
}

.skill-list div {
padding: 16px;
border: 1px solid var(--line);
border-radius: 18px;
background: #ffffff;
}

.skill-list p {
margin: 8px 0 0;
color: var(--muted);
}

.footer {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 32px;
padding: 20px 4px 0;
color: var(--muted);
font-size: 0.94rem;
}

.footer p {
margin: 0;
}

.footer a {
font-weight: 700;
}

.footer span {
margin: 0 7px;
color: var(--muted);
}

@media (max-width: 900px) {
.hero-inner {
grid-template-columns: 1fr;
padding: 42px;
}

.profile-card {
max-width: 330px;
}

.interest-grid,
.project-grid,
.two-column {
grid-template-columns: 1fr;
}
}

@media (max-width: 640px) {
.page {
width: min(100% - 24px, 1120px);
padding-top: 22px;
}

.hero-inner {
padding: 30px 24px;
gap: 32px;
}

h1 {
font-size: clamp(3rem, 14vw, 4.1rem);
}

.section {
margin-top: 18px;
padding: 24px;
border-radius: 22px;
}

.profile-photo {
height: 260px;
}

.project-topline,
.footer {
flex-direction: column;
}
}