/* Art direction: DIY Maker / 3D-Druck Portfolio
   Palette: warm neutral surfaces, teal accent
   Typography: Instrument Serif (display) + DM Sans (body)
   Density: spacious, editorial */

:root,[data-theme="light"]{
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;
  --color-surface-offset:#f3f0ec;--color-surface-dynamic:#e6e4df;
  --color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;
  --color-primary:#01696f;--color-primary-hover:#0c4e54;
  --color-primary-highlight:#cedcd8;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/.06);--shadow-md:0 4px 12px oklch(0.2 0.01 80/.08);--shadow-lg:0 12px 32px oklch(0.2 0.01 80/.12);
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'DM Sans','Helvetica Neue',sans-serif;
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .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(3rem,.5rem + 7vw,8rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;
  --space-16:4rem;--space-20:5rem;--space-24:6rem;
  --content-default:960px;--content-wide:1200px;
}
[data-theme="dark"]{
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-surface-dynamic:#2d2c2a;
  --color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-primary-highlight:#313b3b;
  --shadow-sm:0 1px 2px oklch(0 0 0/.2);--shadow-md:0 4px 12px oklch(0 0 0/.3);--shadow-lg:0 12px 32px oklch(0 0 0/.4);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-surface-dynamic:#2d2c2a;
  --color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:5rem}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg)}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3{text-wrap:balance;line-height:1.15}
p,li{text-wrap:pretty;max-width:72ch}
a,button,[role="button"]{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive)}
button{cursor:pointer;background:none;border:none}
::selection{background:oklch(from var(--color-primary) l c h/.2);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:oklch(from var(--color-bg) l c h/.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider)}
.nav-inner{max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6);height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);text-decoration:none}
.logo svg{color:var(--color-primary)}
.nav-links{display:flex;gap:var(--space-6);list-style:none}
.nav-links a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--color-text)}
.nav-right{display:flex;align-items:center;gap:var(--space-4)}
.theme-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);border-radius:var(--radius-full)}
.theme-btn:hover{color:var(--color-text);background:var(--color-surface-offset)}
.btn-primary{background:var(--color-primary);color:#fff;padding:.625rem var(--space-6);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{border:1px solid var(--color-border);color:var(--color-text);padding:.5rem var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2)}
.btn-ghost:hover{background:var(--color-surface-offset);border-color:var(--color-text-muted)}
.hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--color-text-muted);border-radius:var(--radius-md)}
@media(max-width:768px){.nav-links,.btn-primary.desktop-only{display:none}.hamburger{display:flex}}

/* HERO */
.hero{max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-16),10vw,var(--space-24)) var(--space-6);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.hero-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4)}
.hero-title{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.1;margin-bottom:var(--space-6)}
.hero-title em{font-style:italic;color:var(--color-primary)}
.hero-sub{font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--space-8);max-width:52ch}
.hero-ctas{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hero-img{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;background:var(--color-surface-offset)}
.hero-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:768px){.hero{grid-template-columns:1fr;gap:var(--space-8)}.hero-img{order:-1}}

/* STATS STRIP */
.stats-strip{background:var(--color-surface);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
.stats-inner{max-width:var(--content-wide);margin-inline:auto;padding:var(--space-8) var(--space-6);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);text-align:center}
.stat-num{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);line-height:1}
.stat-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1);letter-spacing:.05em;text-transform:uppercase}
@media(max-width:600px){.stats-inner{grid-template-columns:1fr 1fr}}

/* PROJECTS */
.section{max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-12),8vw,var(--space-20)) var(--space-6)}
.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-10);gap:var(--space-4)}
.section-title{font-family:var(--font-display);font-size:var(--text-xl)}
.section-link{font-size:var(--text-sm);color:var(--color-primary);text-decoration:none;font-weight:500;white-space:nowrap}
.section-link:hover{color:var(--color-primary-hover)}
.projects-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:var(--space-4)}
.project-card{border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h/.08);position:relative;cursor:pointer}
.project-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);transition:transform var(--transition-interactive),box-shadow var(--transition-interactive)}
.project-card.featured{grid-row:span 2}
.card-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--color-surface-offset)}
.project-card.featured .card-img{aspect-ratio:3/4}
.card-body{padding:var(--space-4) var(--space-4) var(--space-5)}
.card-tag{font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2)}
.card-title{font-size:var(--text-lg);font-family:var(--font-display);line-height:1.25;margin-bottom:var(--space-2)}
.card-desc{font-size:var(--text-sm);color:var(--color-text-muted)}
@media(max-width:900px){.projects-grid{grid-template-columns:1fr 1fr}.project-card.featured{grid-row:span 1}}
@media(max-width:600px){.projects-grid{grid-template-columns:1fr}}

/* ABOUT */
.about-section{background:var(--color-surface);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
.about-inner{max-width:var(--content-wide);margin-inline:auto;padding:clamp(var(--space-12),8vw,var(--space-20)) var(--space-6);display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-16);align-items:center}
.about-img{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:1;background:var(--color-surface-offset)}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4)}
.about-title{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-6)}
.about-text{font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.skills-grid{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.skill-badge{padding:.375rem .875rem;border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em}
[data-theme="dark"] .skill-badge{background:var(--color-primary-highlight);color:var(--color-primary)}
@media(max-width:768px){.about-inner{grid-template-columns:1fr}.about-img{max-width:300px}}

/* CONTACT */
.contact-section{max-width:var(--content-default);margin-inline:auto;padding:clamp(var(--space-12),8vw,var(--space-20)) var(--space-6);text-align:center}
.contact-title{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-4)}
.contact-sub{font-size:var(--text-base);color:var(--color-text-muted);max-width:52ch;margin-inline:auto;margin-bottom:var(--space-8)}
.contact-row{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}

/* FOOTER */
footer{border-top:1px solid var(--color-divider);background:var(--color-surface)}
.footer-inner{max-width:var(--content-wide);margin-inline:auto;padding:var(--space-8) var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.footer-copy{font-size:var(--text-xs);color:var(--color-text-faint)}
.footer-links{display:flex;gap:var(--space-6)}
.footer-links a{font-size:var(--text-xs);color:var(--color-text-muted);text-decoration:none}
.footer-links a:hover{color:var(--color-text)}

/* MOBILE NAV */
.mobile-menu{display:none;position:fixed;inset:0;background:var(--color-bg);z-index:200;padding:var(--space-6);flex-direction:column}
.mobile-menu.open{display:flex}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8)}
.mobile-nav-links{display:flex;flex-direction:column;gap:var(--space-6)}
.mobile-nav-links a{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-text);text-decoration:none}