@import url("color_palette.css");

:root {
    --surface-0:      #FFFFFF;
    --surface-1:      #F4F8F9;
    --surface-2:      rgba(56, 143, 183, 0.08);
    --surface-3:      rgba(55, 183, 160, 0.10);
    --surface-4:      rgba(56, 143, 183, 0.16);

    --color-primary:   var(--steel-blue);
    --color-secondary: var(--keppel);
    --color-tertiary:  var(--medium-sea-green);

    --ink-steel:  color-mix(in srgb, var(--steel-blue) 45%, black);
    --ink-keppel: color-mix(in srgb, var(--keppel) 45%, black);
    --ink-sea:    color-mix(in srgb, var(--medium-sea-green) 40%, black);

    /* Hero surface + paint colors (JS reads these for the shader + 2D nodes) */
    --hero-base:   #EDEDED;
    --hero-accent: #6A8CA8;
    --hero-wave:     0.9;
    --hero-wave-amp: 0.30;
    --canvas-line: 70,88,106;
    --canvas-node: 48,64,80;
    --canvas-cursor: 34,50,66;
    --canvas-node-alpha: .7;
    --canvas-line-alpha: .3;
    --canvas-cursor-alpha: .55;

    --accent:       var(--ink-keppel);
    --accent-soft:  var(--keppel);

    --text-primary:    rgba(23, 26, 29, 0.95);
    --text-secondary:  rgba(23, 26, 29, 0.72);
    --text-muted:      rgba(23, 26, 29, 0.55);
    --text-inverse:    #FFFFFF;
    --border:          rgba(23, 26, 29, 0.10);
    --border-strong:   rgba(23, 26, 29, 0.22);

    --shadow-1:   0 1px 3px rgba(30, 48, 60, .12), 0 1px 2px rgba(30, 48, 60, .08);
    --shadow-2:   0 3px 6px rgba(30, 48, 60, .10), 0 3px 6px rgba(30, 48, 60, .08);
    --shadow-3:   0 10px 20px rgba(30, 48, 60, .14), 0 6px 6px rgba(30, 48, 60, .10);
    --shadow-4:   0 14px 28px rgba(30, 48, 60, .18), 0 10px 10px rgba(30, 48, 60, .12);

    --type-display: 3rem;
    --type-headline:2rem;
    --type-title:   1.4rem;
    --type-subtitle:1.1rem;
    --type-body:    1rem;
    --type-caption: 0.875rem;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius: 12px;
    --radius-sm: 8px;
    --max-width: 1080px;
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* ---------- Theme system ----------
   Default (no attribute) = light theme. [data-theme="dark"] overrides the
   semantic tokens defined above. Every rule in the site reads from these
   tokens, so flipping the attribute on <html> re-themes the whole site. */
[data-theme="dark"] {
    --surface-0:      #0B1520;
    --surface-1:      #101D2B;
    --surface-2:      rgba(122, 214, 199, 0.12);
    --surface-3:      rgba(122, 214, 199, 0.14);
    --surface-4:      rgba(122, 214, 199, 0.20);

    --accent:         #48D6B6;
    --accent-soft:    #48D6B6;

    --ink-steel:  #6FB6DC;
    --ink-keppel: #48D6B6;
    --ink-sea:    #7FDCA6;

    --text-primary:    #E8F2F5;
    --text-secondary:  #A9C4D2;
    --text-muted:      #7C9BAE;
    --text-inverse:    #0B1520;
    --border:          rgba(226, 240, 244, 0.12);
    --border-strong:   rgba(226, 240, 244, 0.26);

    --hero-base:   #0A1622;
    --hero-accent: #5CC8A0;
    --hero-wave:     0.95;
    --hero-wave-amp: 0.12;
    --canvas-line: 130,190,225;
    --canvas-node: 150,210,240;
    --canvas-cursor: 170,225,255;
    --canvas-node-alpha: .55;
    --canvas-line-alpha: .22;
    --canvas-cursor-alpha: .45;

    --shadow-1:   0 1px 3px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30);
    --shadow-2:   0 3px 8px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .25);
    --shadow-3:   0 10px 24px rgba(0, 0, 0, .40), 0 6px 8px rgba(0, 0, 0, .28);
    --shadow-4:   0 14px 30px rgba(0, 0, 0, .45), 0 10px 12px rgba(0, 0, 0, .30);
}

/* ---------- Theme toggle ---------- */
nav .nav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
nav .nav-theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
  background: var(--surface-3);
}
nav .nav-theme-toggle svg { width: 15px; height: 15px; display: block; }
nav .nav-theme-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--type-body);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--surface-0);
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(56, 143, 183, 0.07), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(55, 183, 160, 0.07), transparent 55%);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--ink-steel); }

h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 var(--space-4);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

h1 { font-size: var(--type-display); }
h2 { font-size: var(--type-headline); }
h3 { font-size: var(--type-title); }
h4 { font-size: var(--type-subtitle); }

p { margin: 0 0 var(--space-4); }

.lead { font-size: var(--type-subtitle); color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.accent-text { color: var(--ink-keppel); }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, var(--space-6));
}

main {
    flex: 1 0 auto;
    padding: 0;
}

/* Inner pages (about, projects, case studies) get a little breathing room
   between the sticky nav and the first block of content. */
main.container { padding-top: var(--space-8); }

.section { margin-bottom: var(--space-16); }
.section:last-child { margin-bottom: 0; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface-1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    --nav-pad: clamp(18px, 4vw, 56px);
    padding-left: var(--nav-pad);
    padding-right: var(--nav-pad);
}



.brand {
    font-size: var(--type-subtitle);
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.brand .dot {
    color: var(--ink-keppel);
    font-size: 22pt;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    margin-left: auto; /* anchor the right cluster to the right of the brand */
    padding: 0;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding: var(--space-2) 0;
    transition: color .2s ease;
}

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

.nav-links a.active {
    color: var(--ink-steel);
    font-weight: 700;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-steel);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.nav-social {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: all .2s ease;
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

.social-icon:hover {
    color: var(--ink-steel);
    background: var(--surface-2);
    border-color: var(--steel-blue);
}

.nav-social .social-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.nav-social .social-icon svg {
    width: 20px;
    height: 20px;
}

/* Theme toggle sits at the far right of the nav, separated from the socials */
.nav-theme {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-3); /* clear gap between socials and the toggle */
}

/* Grid placement: brand (1), links (centered, 2), socials (3, right-aligned), theme (4, far right). */
.nav .brand { grid-column: 1; grid-row: 1; }
.nav .nav-social { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; margin-left: var(--space-3); }
.nav .nav-theme { grid-column: 4; grid-row: 1; justify-self: end; margin: 0; flex: 0 0 auto; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--type-body);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--text-inverse);
    box-shadow: var(--shadow-1);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    background: var(--color-primary);
    box-shadow: var(--shadow-3);
    transform: translateY(-2px);
}

/* Primary CTA light sweep (Phase 4) */
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
    transform: translateX(-150%);
    pointer-events: none;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after {
    transform: translateX(150%);
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.btn-outline {
    background: transparent;
    color: var(--ink-steel);
    border-color: var(--border-strong);
}

.btn-outline:hover {
    border-color: var(--ink-steel);
    background: var(--surface-2);
    color: var(--ink-steel);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.card {
    background: var(--surface-0);
    border-radius: var(--radius);
    padding: var(--space-8);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--border);
}

.card-hover {
    transition: transform .2s ease, box-shadow .2s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
}

.hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding: 0 clamp(1rem, 4vw, var(--space-6));
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: var(--type-display);
    margin-bottom: var(--space-2);
}

.hero-text h1 .accent { color: var(--ink-keppel); }

.hero-role {
    font-size: var(--type-title);
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.portrait {
    flex-shrink: 0;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 4px solid var(--keppel);
    box-shadow: var(--shadow-3);
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.portrait .avatar-fallback {
    display: grid;
    place-items: center;
    gap: var(--space-2);
    color: var(--ink-keppel);
    font-weight: 800;
    font-size: var(--type-headline);
    letter-spacing: 0.02em;
}

.portrait .avatar-fallback small {
    font-size: var(--type-caption);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hero-badge {
    display: inline-block;
    margin-bottom: var(--space-4);
    background: var(--surface-2);
    color: var(--ink-steel);
    border: 1px solid var(--border);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: var(--type-caption);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-16);
}

.stat {
    text-align: center;
    background: var(--surface-0);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-4);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--border);
}

.stat-value {
    font-size: var(--type-headline);
    font-weight: 800;
    color: var(--ink-keppel);
    display: block;
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--type-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.project-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-0);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
}

.project-card .thumb {
    height: 96px;
    background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--type-title);
    color: var(--ink-keppel);
    font-weight: 800;
}

.project-card .body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-card h3 { margin-bottom: var(--space-2); }
.project-card .card-title {
    color: inherit;
    text-decoration: none;
}
.project-card .card-title:hover {
    color: var(--ink-steel);
    text-decoration: underline;
}
.project-card p { color: var(--text-secondary); font-size: var(--type-caption); flex: 1; }

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.tag {
    background: var(--surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--type-caption);
    font-weight: 500;
}

.tag--warn {
    background: rgba(55, 183, 160, 0.12);
    color: var(--ink-keppel);
    border-color: var(--keppel);
    font-weight: 600;
}

.todo-flag {
    margin-top: var(--space-4);
    font-size: var(--type-caption);
    color: var(--ink-keppel);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.card-link {
    margin-top: var(--space-4);
    font-size: var(--type-caption);
    font-weight: 700;
    color: var(--ink-steel);
    text-decoration: none;
}

.card-link:hover { text-decoration: underline; }

.about-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: flex-start;
    margin-bottom: var(--space-12);
}

.about-head .card { flex: 1 1 320px; }

.resume-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-12);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.resume-download p {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 600;
}

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--space-3);
}

.contact-list li:last-child { border-bottom: none; }

.contact-list .label {
    color: var(--text-muted);
    min-width: 90px;
    text-transform: uppercase;
    font-size: var(--type-caption);
    letter-spacing: 0.04em;
}

.contact-list .value { color: var(--text-primary); word-break: break-word; }

.timeline {
    position: relative;
    margin: 0;
    padding-left: var(--space-8);
}

.timeline::before {
    content: "";
    position: absolute;
    left: var(--space-2);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-strong);
}

.timeline-item {
    position: relative;
    margin-bottom: var(--space-12);
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-8) + var(--space-2) - 6px);
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ink-keppel);
    box-shadow: 0 0 0 4px var(--surface-0);
}

.timeline-item h3 { margin-bottom: var(--space-1); }
.timeline-role { color: var(--text-secondary); font-weight: 600; margin-bottom: var(--space-1); }
.timeline-meta {
    color: var(--text-muted);
    font-size: var(--type-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-4);
}

.timeline-item ul { margin: 0; padding-left: var(--space-6); }
.timeline-item li { margin-bottom: var(--space-2); color: var(--text-secondary); }

.skill-group {
    min-width: 0;
    padding: var(--space-4) 0 var(--space-6);
    border-top: 2px solid var(--keppel);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
    row-gap: var(--space-4);
}

.skill-group h3 {
    margin-bottom: var(--space-3);
    font-size: var(--type-subtitle);
}

.pill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
}

.pill-list li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--type-caption);
    line-height: 1.45;
}

.pill-list li:last-child { border-bottom: none; }
.pill-list li strong { color: var(--ink-steel); font-weight: 600; }

.project-hero {
    background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
    border-radius: var(--radius);
    padding: var(--space-12);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    margin-bottom: var(--space-12);
}

.project-hero h1 { font-size: var(--type-headline); margin-bottom: var(--space-2); }
.project-hero .meta { color: var(--text-secondary); }

.project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-12);
}

.prose {
    min-width: 0;
}

.project-side {
    align-self: start;
    position: sticky;
    top: 96px;
    display: grid;
    gap: var(--space-6);
}

.prose h3 { margin-top: var(--space-8); }
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); color: var(--text-secondary); }
.prose code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .9em;
    color: var(--ink-steel);
}

.prose figure {
    margin: var(--space-8) 0;
}

.prose figure img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    display: block;
}

.prose figure figcaption {
    margin-top: var(--space-2);
    font-size: var(--type-caption);
    color: var(--text-muted);
    text-align: center;
}

.site-footer {
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    padding: var(--space-8) 0;
    margin-top: var(--space-16);
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
}

.footer-brand { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--text-primary); }
.footer-brand .dot { color: var(--ink-keppel); }

.footer-links {
    display: flex;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: var(--type-caption); }
.footer-links a:hover { color: var(--text-primary); }

.footer-social {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.social-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

img,
svg {
    max-width: 100%;
}

code {
    overflow-wrap: anywhere;
}

.footer-bottom {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--type-caption);
    text-align: center;
}

/* Experience cards */
.exp-list {
    display: grid;
    gap: 2.5rem;
}

.exp-card {
    padding: var(--space-8);
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.exp-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: linear-gradient(90deg, var(--steel-blue), var(--keppel));
    opacity: 0;
    transform: scaleX(.6);
    transform-origin: left;
    transition: opacity .25s ease, transform .25s ease;
}

.exp-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-3);
}

.exp-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.exp-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.exp-head h3 { margin-bottom: 0; }

.exp-status {
    font-size: var(--type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-keppel);
    border: 1px solid var(--keppel);
    background: rgba(55, 183, 160, 0.10);
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    vertical-align: middle;
    margin-left: var(--space-2);
}

.exp-summary {
    color: var(--text-secondary);
    margin: var(--space-4) 0 var(--space-4);
}

.exp-impact {
    margin: 0;
    padding-left: var(--space-6);
}

.exp-impact li {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
}

.exp-tags {
    margin-top: var(--space-6);
}

.exp-tags .pill {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--type-caption);
    font-weight: 500;
}

@media (max-width: 760px) {
    :root {
        --type-display: clamp(2rem, 9vw, 2.4rem);
        --type-headline: clamp(1.5rem, 7vw, 1.7rem);
        --type-title: clamp(1.1rem, 5vw, 1.2rem);
        --space-12: 2.25rem;
        --space-16: 3rem;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--surface-0);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-3);
        padding: var(--space-2) var(--space-6) var(--space-6);
    }

    .nav-links.open { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: var(--space-3) 0; }

    .nav-toggle {
        display: flex;
        margin-left: auto; /* right-edge cluster on mobile */
    }

    .nav-social { display: none; }
    .nav-theme { margin-left: var(--space-2); }

    /* Index: hero band sits flush under the nav (no gap above the particles). */
    main { padding: 0 0 var(--space-12); }
    main.container { padding-top: var(--space-6); padding-bottom: var(--space-12); }

    .hero {
        flex-direction: column;
        gap: var(--space-8);
    }
    .hero-badge {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        line-height: 1.4;
    }
    .portrait { width: min(200px, 55vw); height: min(200px, 55vw); }
    .card { padding: var(--space-6); }
    .skill-group { padding: var(--space-4) 0 var(--space-6); }
    .skills-grid { grid-template-columns: 1fr; row-gap: 0; }
    .pill-list { grid-template-columns: 1fr; }
    .project-hero { padding: var(--space-8); }
    .project-card .thumb { height: 72px; }
    .btn-row { margin-top: var(--space-6); gap: var(--space-3); }
    .btn { max-width: 100%; text-align: center; }
    .project-layout { grid-template-columns: minmax(0, 1fr); }
    .project-side { position: static; }
    .footer-grid { flex-direction: column; align-items: flex-start; }
    .footer-links { flex-wrap: wrap; gap: var(--space-4); }
    .footer-social .social-icon { width: 48px; height: 48px; border-radius: 14px; }
    .footer-social .social-icon svg { width: 24px; height: 24px; }
    .resume-download {
        align-items: center;
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
}

/* ================= Motion & polish ================= */

/* Full-bleed hero band: hosts the particle canvases edge-to-edge. The
   vertical padding lives here, and the canvases are inset:0, so the
   particles fill the padding too. */
.hero-band {
    position: relative;
    padding: clamp(2rem, 5vh, 3.5rem) 0;
    background: var(--hero-base);
    overflow: hidden;
    isolation: isolate;
}

/* Hero canvas backdrop (injected by JS) */
#hero-shader { position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:1; pointer-events:none; }
.hero-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.hero > .portrait,
.hero > .hero-text { position: relative; z-index: 1; }

/* Hero sits on the shader canvas — text color follows the theme.
   Light theme: pale hero with dark text; Dark theme: navy hero with light text. */
.hero { color: #1C3A52; }
.hero h1,
.hero .hero-role,
.hero .lead { color: #152F45; }
.hero p.lead { color: rgba(20, 55, 80, 0.78); }
.hero h1 .accent,
.hero .hero-text .accent,
.hero .accent { color: var(--ink-keppel); }
.hero .hero-badge {
    color: #123A55;
    border-color: rgba(18, 58, 85, 0.45);
    background: rgba(255, 255, 255, 0.62);
}
.hero .btn-outline {
    color: #153A58;
    border-color: rgba(18, 58, 85, 0.5);
    background: transparent;
}
.hero .btn-outline:hover {
    color: #0E2A42;
    border-color: #2A5E85;
    background: rgba(255, 255, 255, 0.45);
}
.hero .social-icon svg { color: #1B4C6E; }
.hero .social-icon:hover svg { color: #0E3553; }

[data-theme="dark"] .hero { color: #EAF3F6; }
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero .hero-role,
[data-theme="dark"] .hero .lead { color: #F2F7F9; }
[data-theme="dark"] .hero p.lead { color: rgba(226, 240, 244, 0.78); }
[data-theme="dark"] .hero h1 .accent,
[data-theme="dark"] .hero .hero-text .accent,
[data-theme="dark"] .hero .accent { color: #48D6B6; }
[data-theme="dark"] .hero .hero-badge {
    color: #CFE9EC;
    border-color: rgba(191, 231, 234, 0.45);
    background: rgba(22, 49, 68, 0.55);
}
[data-theme="dark"] .hero .btn-outline { color: #E7F2F5; border-color: rgba(191, 231, 234, 0.5); background: transparent; }
[data-theme="dark"] .hero .btn-outline:hover { color: #FFFFFF; border-color: #BFE7EA; background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .hero .social-icon svg { color: #D8EBEE; }
[data-theme="dark"] .hero .social-icon:hover svg { color: #FFFFFF; }

.portrait img,
.portrait .avatar-fallback { will-change: transform; }

/* Portrait — slow float + breathing glow ring (reduced-motion guarded by JS) */
/* Float the whole framed portrait (container), not just the inner photo */
.portrait.float-able {
    animation: portrait-float 7s ease-in-out infinite;
}
.portrait.float-able::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(60% 60% at 50% 40%, var(--steel-blue), transparent 72%);
    opacity: .0;
    filter: blur(22px);
    z-index: -1;
    animation: portrait-glow 7s ease-in-out infinite;
}

@keyframes portrait-float {
    0%, 100% { transform: translateY(0) rotate(0deg) translateX(0); }
    50%       { transform: translateY(-12px) rotate(2.5deg) translateX(6px); }
}

@keyframes portrait-glow {
    0%, 100% { opacity: .12; }
    50%       { opacity: .38; }
}

/* Tilt cards (elements with data-tilt; JS sets --tx/--ty/--mx/--my) */
.card[data-tilt],
.exp-card[data-tilt] {
    position: relative;
    transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px));
    transition: transform .18s var(--ease-out);
    transform-style: preserve-3d;
}

.card[data-tilt]:hover,
.exp-card[data-tilt]:hover { --lift: -4px; }
.card[data-tilt]::after,
.exp-card[data-tilt]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(94,177,197,.10), transparent 60%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.card[data-tilt]:hover::after,
.exp-card[data-tilt]:hover::after { opacity: 1; }

/* Scroll reveal (elements marked with data-reveal) — CSS reveal only when GSAP did not take over */
.js:not(.gsap-ok) [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.js:not(.gsap-ok) [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Safety net: .is-revealed must win even over GSAP's inline opacity:0/transform */
[data-reveal].is-revealed {
    opacity:1 !important;
    transform:none !important;
}

/* Hero entrance — elements marked with data-hero-stage */
.js .hero [data-hero-stage] { opacity: 0; }

.js .hero [data-hero-stage].hero-in {
    animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1;  transform: none; }
}

.js .hero [data-hero-stage].hero-done { opacity: 1 !important; }

/* Scroll progress bar (injected by JS) */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 100;
    background: linear-gradient(90deg, var(--steel-blue), var(--keppel));
    pointer-events: none;
}

/* Back to top button (injected by JS) */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-0);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-2);
    color: var(--ink-steel);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}

.back-to-top svg { width: 20px; height: 20px; }

.back-to-top.show { opacity: 1; visibility: visible; transform: none; }

.back-to-top:hover { background: var(--surface-2); }

/* Page transitions (View Transitions API — crossfade + subtle lift, graceful fallback) */
@keyframes vt-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-in .42s ease both; }

/* Phase 6 — split-text characters (spans injected at runtime by JS) */
.st-ch { display: inline-block; }

/* Phase 6 — magnetic cursor follower (injected by JS, fine pointers only) */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 2147483647;
    transition: width .2s ease, height .2s ease, opacity .2s ease;
}

.cursor-dot.is-on { opacity: .8; }

.cursor-dot.is-magnet { width: 14px; height: 14px; }

/* Phase 6 — cross-page transition curtain (injected by JS) */
.vt-overlay {
    position: fixed;
    inset: 0;
    background: var(--surface-0);
    z-index: 9999;
    transform: translateY(101%);
    pointer-events: none;
}

/* Phase 7 — Lottie micro-animation slot inside buttons (injected by JS) */
.btn .lottie-mini {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Phase 7 — infinite skill marquee band */
.marquee-band {
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    margin: 0 0 8px;
}

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: mq-slide 28s linear infinite;
    will-change: transform;
}

.marquee-track span {
    margin: 0 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--color-primary);
    opacity: .75;
}

@keyframes mq-slide {
    to { transform: translateX(-50%); }
}

/* Phase 7 — SVG line-draw accent under section headings */
.line-draw { display: block; margin: 10px 0 0; }

.ld-path {
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    transition: stroke-dashoffset 1.1s ease-out .15s;
}

.ld-draw .ld-path { stroke-dashoffset: 0; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .js .hero [data-hero-stage] { opacity: 1 !important; animation: none !important; }
    .portrait.float-able { animation: none !important; }
    .portrait.float-able::after { display: none !important; }
    .back-to-top, .card-hover, .project-card, .exp-card, .social-icon { transition: none !important; }
    .card[data-tilt], .exp-card[data-tilt] { transform: none !important; }
    .nav-links a::after { transition: none !important; }
    .marquee-track { animation: none; }
    .ld-path { stroke-dashoffset: 0 !important; }
}