/* ETHAN ALDRED
   Instrument Serif + DM Sans | Warm monochrome | 8px grid */

:root {
    --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:40px;--s8:48px;--s9:64px;--s10:80px;--s11:96px;--s12:128px;
    --text-xs:.75rem;--text-sm:.8125rem;--text-base:.9375rem;--text-md:1.0625rem;--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:2rem;--text-3xl:2.75rem;--text-4xl:3.5rem;
    --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.65;--leading-relaxed:1.8;
    --bg:#faf9f7;--bg-card:#fff;--bg-subtle:#f3f1ee;--border:#e8e5e0;--border-hover:#d4d0c9;
    --text:#5c5750;--text-muted:#9a958d;--text-strong:#1c1a17;
    --accent:#c05d3b;--accent-hover:#a74e30;--accent-subtle:rgba(192,93,59,.08);--accent-border:rgba(192,93,59,.2);
    --green:#5a8a6a;--nav-bg:rgba(250,249,247,.92);
    --shadow-sm:0 1px 3px rgba(0,0,0,.03);--shadow-hover:0 8px 24px rgba(0,0,0,.06);
    --font-serif:'Instrument Serif',Georgia,serif;--font-sans:'DM Sans',-apple-system,sans-serif;
    --radius:8px;--radius-lg:12px;--transition:.2s ease;--transition-slow:.4s cubic-bezier(.4,0,.2,1);--max-width:960px;
}
[data-theme="dark"] {
    --bg:#141311;--bg-card:#1c1a17;--bg-subtle:#211f1b;--border:#2e2b26;--border-hover:#3d3933;
    --text:#a8a29e;--text-muted:#6b6560;--text-strong:#f0ece6;
    --accent:#d47a5a;--accent-hover:#e08d6e;--accent-subtle:rgba(212,122,90,.1);--accent-border:rgba(212,122,90,.2);
    --green:#7ab08a;--nav-bg:rgba(20,19,17,.92);
    --shadow-sm:0 1px 3px rgba(0,0,0,.15);--shadow-hover:0 8px 24px rgba(0,0,0,.3);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border) var(--bg);overflow-y:scroll}
body{font-family:var(--font-sans);font-size:var(--text-base);background:var(--bg);color:var(--text);line-height:var(--leading-normal);overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;transition:background var(--transition-slow),color var(--transition-slow);-webkit-font-smoothing:antialiased}
main{flex:1} a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
:focus:not(:focus-visible){outline:none}
.pt-0{padding-top:0!important}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;height:64px;padding:0 var(--s8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:var(--nav-bg);border-bottom:1px solid var(--border)}
.nav-logo{position:absolute;left:var(--s8);font-family:var(--font-serif);font-size:var(--text-lg);color:var(--text-strong);letter-spacing:-.3px}
.nav-links{display:flex;gap:var(--s7)}
.nav-link{font-size:var(--text-sm);font-weight:500;color:var(--text-muted);letter-spacing:.2px;transition:color var(--transition)}
.nav-link:hover,.nav-link.active{color:var(--text-strong)}
.nav-link.active{font-weight:600}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:var(--s2);position:absolute;right:var(--s8)}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--text-strong);transition:var(--transition);border-radius:1px}
.nav-toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav.menu-open{border-bottom-color:transparent}

.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;z-index:99;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);flex-direction:column;padding:var(--s4) var(--s6)}
.mobile-menu.open{display:flex}
.mobile-link{font-size:var(--text-base);font-weight:500;padding:var(--s4) 0;color:var(--text-muted);border-bottom:1px solid var(--border);transition:color var(--transition)}
.mobile-link:last-child{border-bottom:none}
.mobile-link:hover,.mobile-link.active{color:var(--text-strong)}
.mobile-link.active{font-weight:600;border-bottom-color:transparent}

/* Theme toggle */
.theme-switch{position:fixed;top:20px;right:var(--s6);z-index:101;display:flex;align-items:center;gap:var(--s3);cursor:pointer;user-select:none}
.theme-label{font-size:10px;font-weight:600;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase}
.theme-label:first-child{opacity:.3} .theme-label:last-child{opacity:1}
[data-theme="dark"] .theme-label:first-child{opacity:1} [data-theme="dark"] .theme-label:last-child{opacity:.3}
.theme-track{width:36px;height:20px;background:var(--border);border-radius:50px;position:relative;transition:background var(--transition)}
.theme-thumb{position:absolute;top:3px;left:19px;width:14px;height:14px;border-radius:50%;background:var(--accent);transition:all var(--transition-slow)}
[data-theme="dark"] .theme-thumb{left:3px;background:var(--text-muted)}

/* Hero */
.hero-stacked{display:flex;flex-direction:column;align-items:center;padding:var(--s12) var(--s8) var(--s9);max-width:var(--max-width);margin:0 auto;width:100%;gap:var(--s7)}

.intro-card{width:100%;max-width:640px;text-align:center;opacity:0;animation:fadeUp .6s ease forwards .1s}
.intro-label{font-size:var(--text-sm);font-weight:500;color:var(--accent);letter-spacing:.5px;margin-bottom:var(--s4)}
.intro-name{font-family:var(--font-serif);font-size:var(--text-4xl);font-weight:400;font-style:italic;color:var(--text-strong);line-height:var(--leading-tight);letter-spacing:-1px;margin-bottom:var(--s6)}
.intro-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-bottom:var(--s6)}
.intro-role{font-size:var(--text-sm);font-weight:500;padding:var(--s2) var(--s4);background:var(--bg-subtle);border:1px solid var(--border);border-radius:50px;color:var(--text);transition:all var(--transition)}
.intro-role:hover{border-color:var(--accent-border);color:var(--accent)}
.intro-status{font-size:var(--text-sm);color:var(--green);display:inline-flex;align-items:center;gap:var(--s2)}
.intro-status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Buttons */
.hero-cta{display:flex;gap:var(--s4);opacity:0;animation:fadeUp .5s ease forwards .4s}
.btn{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;padding:var(--s3) var(--s6);border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:all var(--transition);display:inline-block;text-align:center}
.btn-primary{background:var(--text-strong);color:var(--bg);border-color:var(--text-strong)}
.btn-primary:hover{opacity:.85;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--border-hover);color:var(--text-strong);transform:translateY(-1px)}

.divider{width:48px;height:1px;background:var(--border);opacity:0;animation:fadeUp .4s ease forwards .5s}

/* About */
.about-below{width:100%;max-width:600px;text-align:center;opacity:0;animation:fadeUp .5s ease forwards .6s}
.about-below .section-header{margin-bottom:var(--s6)}
.about-text p{margin-bottom:var(--s4);color:var(--text);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.about-text p:last-child{margin-bottom:0}
.about-interests{margin-top:var(--s7)}
.about-interests h3{font-size:var(--text-sm);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--s4)}
.interest-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.tag{font-size:var(--text-xs);font-weight:500;padding:var(--s1) var(--s3);border:1px solid var(--border);border-radius:50px;color:var(--text-muted);transition:all var(--transition)}
.tag:hover{border-color:var(--accent-border);color:var(--accent)}

/* Sections */
.section{max-width:var(--max-width);margin:0 auto;padding:var(--s10) var(--s8)}
.section-header{margin-bottom:var(--s8)}
.section-header.centered{text-align:center}
.section-label{font-size:var(--text-sm);font-weight:500;color:var(--accent);margin-bottom:var(--s2)}
.section-header h2{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:400;font-style:italic;color:var(--text-strong);line-height:var(--leading-snug);letter-spacing:-.5px}

/* Page hero */
.page-hero{padding:var(--s12) var(--s8) var(--s8);max-width:var(--max-width);margin:0 auto}
.page-label{font-size:var(--text-sm);font-weight:500;color:var(--accent);margin-bottom:var(--s3);opacity:0;animation:fadeUp .4s ease forwards .1s}
.page-hero h1{font-family:var(--font-serif);font-size:var(--text-3xl);font-weight:400;font-style:italic;color:var(--text-strong);margin-bottom:var(--s4);line-height:var(--leading-tight);letter-spacing:-.5px;opacity:0;animation:fadeUp .5s ease forwards .2s}
.page-hero .subtitle{font-size:var(--text-md);color:var(--text-muted);max-width:480px;line-height:var(--leading-normal);opacity:0;animation:fadeUp .4s ease forwards .3s}

/* Project cards */
.project-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s6);margin-bottom:var(--s5);transition:all var(--transition)}
.project-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.project-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.project-status{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.status-dot{width:6px;height:6px;border-radius:50%}
.status-active .status-dot{background:var(--green)} .status-active{color:var(--green)}
.status-complete .status-dot{background:var(--accent)} .status-complete{color:var(--accent)}
.status-planned .status-dot{background:var(--text-muted)} .status-planned{color:var(--text-muted)}
.project-repo{font-size:var(--text-xs);color:var(--text-muted)}
.project-card h3{font-family:var(--font-serif);font-size:var(--text-xl);font-weight:400;font-style:italic;color:var(--text-strong);margin-bottom:var(--s3);line-height:var(--leading-snug)}
.project-desc{color:var(--text);font-size:var(--text-base);margin-bottom:var(--s5);line-height:var(--leading-normal)}
.project-tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.project-tag{font-size:var(--text-xs);font-weight:500;padding:var(--s1) var(--s3);border:1px solid var(--border);border-radius:50px;color:var(--text-muted)}
.project-link{display:inline-block;margin-top:var(--s5);font-size:var(--text-sm);font-weight:500;color:var(--accent);transition:color var(--transition)}
.project-link:hover{color:var(--accent-hover)}
.github-cta{text-align:center;padding:var(--s8) var(--s6);margin-top:var(--s5);border:1px dashed var(--border);border-radius:var(--radius-lg)}
.github-cta p{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--s5)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.contact-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s7) var(--s6);text-align:center;transition:all var(--transition)}
.contact-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.contact-icon{font-size:1.5rem;margin-bottom:var(--s4)}
.contact-card h3{color:var(--text-strong);font-size:var(--text-base);font-weight:600;margin-bottom:var(--s2)}
.contact-card p{font-size:var(--text-sm);color:var(--accent)}
.empty-state-hint{text-align:center;margin-top:var(--s8);font-size:var(--text-sm);color:var(--text-muted)}

/* Coming soon */
.coming-soon-section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:75vh;text-align:center;padding:var(--s12) var(--s6) var(--s8)}
.coming-soon-section .page-label{opacity:1;animation:none}
.coming-soon-title{font-family:var(--font-serif);font-size:var(--text-3xl);font-weight:400;font-style:italic;color:var(--text-strong);margin-bottom:var(--s4);letter-spacing:-.5px}
.coming-soon-text{font-size:var(--text-base);color:var(--text-muted);max-width:440px;line-height:var(--leading-relaxed);margin-bottom:var(--s7)}
.coming-soon-loader{display:flex;gap:var(--s2);margin-bottom:var(--s7)}
.coming-soon-loader span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:loaderPulse 1.6s ease-in-out infinite}
.coming-soon-loader span:nth-child(2){animation-delay:.2s} .coming-soon-loader span:nth-child(3){animation-delay:.4s}
@keyframes loaderPulse{0%,80%,100%{opacity:.15}40%{opacity:.6}}

/* Project Tabs */
.tabs{display:flex;gap:var(--s3);margin-bottom:var(--s7)}
.tab-btn{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;padding:var(--s3) var(--s6);border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;transition:color var(--transition),border-color var(--transition),background var(--transition)}
.tab-btn:hover{color:var(--text-strong)}
.tab-btn.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Footer */
.footer{border-top:1px solid var(--border);padding:var(--s5) var(--s8);background:var(--bg)}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:center;align-items:center;gap:var(--s5);flex-wrap:wrap}
.footer-name{font-size:var(--text-xs);color:var(--text-muted)}
.footer-links{display:flex;gap:var(--s5)}
.footer-link{font-size:var(--text-xs);color:var(--text-muted);transition:color var(--transition)}
.footer-link:hover{color:var(--text-strong)}
.footer-sep{color:var(--border);font-size:var(--text-xs)}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-in{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.fade-in:nth-child(2){transition-delay:.08s} .fade-in:nth-child(3){transition-delay:.16s} .fade-in:nth-child(4){transition-delay:.24s} .fade-in:nth-child(5){transition-delay:.32s}

/* Responsive */
@media(pointer:coarse){
    .nav-link,.mobile-link,.btn,.tag,.intro-role,.project-tag,.footer-link,.project-link,.contact-card{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
    .nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
    .project-card:hover,.contact-card:hover{transform:none;box-shadow:var(--shadow-sm)} .btn:hover{transform:none}
}
@media(max-width:900px){
    .nav-links{display:none} .nav-toggle{display:flex;right:var(--s5)} .nav{padding:0 var(--s5)} .nav-logo{left:var(--s5)}
    .theme-switch{right:calc(var(--s5) + 48px);top:20px} .theme-label{display:none}
    .hero-stacked{padding:var(--s11) var(--s5) var(--s8);gap:var(--s6)}
    .intro-name{font-size:var(--text-3xl)}
    .hero-cta{flex-direction:column;width:100%;max-width:320px} .hero-cta .btn{width:100%}
    .about-below{max-width:100%}
    .page-hero{padding:var(--s11) var(--s5) var(--s6)} .page-hero h1{font-size:var(--text-2xl)}
    .section{padding-left:var(--s5);padding-right:var(--s5)} .section-header h2{font-size:var(--text-xl)}
    .contact-grid{grid-template-columns:1fr;gap:var(--s4)}
    .project-card-header{flex-direction:column;align-items:flex-start;gap:var(--s2)}
    .footer{padding:var(--s4) var(--s5)}
}
@media(max-width:500px){
    .hero-stacked{padding:var(--s10) var(--s4) var(--s7);gap:var(--s5)}
    .intro-name{font-size:var(--text-2xl);letter-spacing:-.5px}
    .hero-cta{max-width:100%} .btn{width:100%;padding:var(--s4) var(--s5)}
    .section,.page-hero{padding-left:var(--s4);padding-right:var(--s4)}
    .page-hero h1{font-size:var(--text-xl)} .project-card{padding:var(--s5)} .project-card h3{font-size:var(--text-lg)}
    .about-text p{font-size:var(--text-base)} .coming-soon-title{font-size:var(--text-2xl)} .footer{padding:var(--s4)}
}
@media(max-height:500px)and(orientation:landscape){
    .hero-stacked{padding-top:var(--s9);padding-bottom:var(--s5);gap:var(--s4)}
    .coming-soon-section{min-height:auto;padding-top:var(--s9)}
}
@supports(padding-top:env(safe-area-inset-top)){
    .nav{padding-top:env(safe-area-inset-top);height:calc(64px + env(safe-area-inset-top))}
    .mobile-menu{top:calc(64px + env(safe-area-inset-top))}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    .fade-in,.intro-card,.about-below,.hero-cta,.divider,.page-label,.page-hero h1,.page-hero .subtitle{opacity:1;transform:none}
    html{scroll-behavior:auto}
}
@media(forced-colors:active){
    .btn-primary,.btn-secondary{border:2px solid ButtonText}
    .intro-status-dot,.status-dot{forced-color-adjust:none}
    .tag,.project-tag,.intro-role{border:1px solid ButtonText}
}
@media print{
    .nav,.theme-switch,.mobile-menu,.coming-soon-loader,.hero-cta,.github-cta{display:none!important}
    body{background:#fff;color:#000;font-size:11pt}
    .hero-stacked,.section,.page-hero{padding:1rem 0}
    .project-card,.contact-card{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#666}
    .btn::after{content:none}
}