/*!
    Title: Joseph Ziegler, Personal Site
    Description: Hand-rolled styles, no Bootstrap. Mobile-first, CSS custom
    properties drive light/dark theming, compiled via Gulp to /css/styles.css.

    Contents:
        1. Variables & tokens
        2. Reset & base
        3. Layout helpers
        4. Header & nav
        5. Hero
        6. About
        7. Skills
        8. Experience timeline
        9. Cards (education / extra curricular)
        10. Contact
        11. Footer
        12. Buttons & icon buttons
        13. Scroll-reveal
        14. Media queries
*/:root{--bg: #0b1220;--bg-elevated: #0f1826;--surface: #131f30;--surface-hover: #182740;--border: #223349;--text: #c7d2e0;--text-muted: #8b98ac;--heading: #f2f5f9;--accent: #2dd4bf;--accent-strong: #5eead4;--accent-contrast: #04211d;--accent-soft: rgba(45, 212, 191, 0.14);--shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);--focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.45);--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--container: 960px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--header-h: 64px;color-scheme:dark}:root[data-theme=light]{--bg: #f7f9fc;--bg-elevated: #ffffff;--surface: #ffffff;--surface-hover: #eef2f8;--border: #e1e7f0;--text: #3b4657;--text-muted: #6b7789;--heading: #101828;--accent: #0d9488;--accent-strong: #0f766e;--accent-contrast: #ffffff;--accent-soft: rgba(13, 148, 136, 0.1);--shadow: 0 20px 40px -20px rgba(16, 24, 40, 0.18);--focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.35);color-scheme:light}@media(prefers-color-scheme: light){:root:not([data-theme=dark]){--bg: #f7f9fc;--bg-elevated: #ffffff;--surface: #ffffff;--surface-hover: #eef2f8;--border: #e1e7f0;--text: #3b4657;--text-muted: #6b7789;--heading: #101828;--accent: #0d9488;--accent-strong: #0f766e;--accent-contrast: #ffffff;--accent-soft: rgba(13, 148, 136, 0.1);--shadow: 0 20px 40px -20px rgba(16, 24, 40, 0.18);--focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.35);color-scheme:light}}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color 0.25s ease}h1,h2,h3,h4{color:var(--heading);font-weight:700;line-height:1.2;margin:0 0 .5em}h1{font-size:clamp(2.4rem,5vw + 1rem,4rem)}h2{font-size:clamp(1.7rem,2.5vw + 1rem,2.4rem)}h3{font-size:1.15rem}p{margin:0 0 1em}a{color:var(--accent);text-decoration:none;transition:color 0.2s ease}a:hover{color:var(--accent-strong)}img{max-width:100%;display:block}ul,ol{list-style:none;margin:0;padding:0}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.skip-link{position:absolute;left:1rem;top:-3rem;background:var(--accent);color:var(--accent-contrast);padding:.6em 1em;border-radius:var(--radius-sm);z-index:1000;transition:top 0.2s ease}.skip-link:focus{top:1rem}.icon{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.eyebrow{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 .6em}.section-inner{max-width:var(--container);margin:0 auto;padding:5rem 1.5rem}.section-alt{background:var(--bg-elevated)}#site-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100;border-bottom:1px solid rgba(0,0,0,0);transition:border-color 0.25s ease}#site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb, var(--bg) 78%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}#site-header.scrolled{border-bottom-color:var(--border)}.header-inner{max-width:var(--container);height:100%;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{font-family:var(--font-mono);font-weight:600;font-size:1.1rem;color:var(--heading)}.brand:hover{color:var(--heading)}.brand-dot{color:var(--accent)}#site-nav ul{display:flex;gap:.25rem}#site-nav a{display:block;padding:.5em .85em;border-radius:var(--radius-sm);color:var(--text);font-size:.95rem}#site-nav a:hover{color:var(--heading);background:var(--surface-hover)}#site-nav a.is-active{color:var(--accent)}.header-actions{display:flex;align-items:center;gap:.25rem}#mobile-menu-toggle{display:none}.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--header-h) + 2rem) 1.5rem 4rem;overflow:hidden}.hero-bg{position:absolute;inset:-10%;z-index:-1;background:radial-gradient(circle at 18% 20%, var(--accent-soft), transparent 45%),radial-gradient(circle at 82% 75%, var(--accent-soft), transparent 40%);filter:blur(10px)}.hero-content{max-width:40rem}.hero-title{font-family:var(--font-mono);color:var(--text);font-size:clamp(1rem,1.4vw + .7rem,1.25rem);margin-bottom:.75em}.hero-lede{color:var(--text-muted);font-size:1.05rem;max-width:32rem;margin-left:auto;margin-right:auto}.hero-actions{display:flex;gap:.85rem;justify-content:center;margin-top:1.75rem;flex-wrap:wrap}.hero-scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:var(--text-muted);animation:bob 2.4s ease-in-out infinite}.hero-scroll-cue:hover{color:var(--accent)}@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}.about-grid{display:grid;grid-template-columns:200px 1fr;gap:3rem;align-items:start}.portrait{width:100%;aspect-ratio:1;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow)}.about-copy p:last-child{margin-bottom:0}.skills-groups{display:grid;grid-template-columns:repeat(2, 1fr);gap:2.5rem 3rem;margin-top:2.5rem}.skills-group h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:.9em}.chip-list{display:flex;flex-wrap:wrap;gap:.5rem}.chip{font-family:var(--font-mono);font-size:.82rem;padding:.45em .8em;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text);transition:all 0.2s ease}.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.timeline{position:relative;margin-top:2.5rem;padding-left:1.75rem;border-left:2px solid var(--border)}.timeline-item{position:relative;padding-bottom:3rem}.timeline-item:last-child{padding-bottom:0}.timeline-marker{position:absolute;left:calc(-1.75rem - 6px);top:.4rem;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}.timeline-card{max-width:42rem}.timeline-date{display:inline-block;font-family:var(--font-mono);font-size:.8rem;color:var(--accent);margin-bottom:.6em}.timeline-org{display:flex;align-items:center;gap:.6rem;margin-bottom:.2em}.timeline-logo{width:24px;height:24px;border-radius:6px;-o-object-fit:cover;object-fit:cover;background:#fff;border:1px solid var(--border)}.timeline-company{font-family:var(--font-mono);font-size:.85rem;color:var(--text-muted)}.timeline-company:hover{color:var(--accent)}.timeline-role{margin-bottom:.6em}.timeline-summary{color:var(--text-muted)}.timeline-bullets{display:grid;gap:.5em}.timeline-bullets li{position:relative;padding-left:1.1em;color:var(--text);font-size:.95rem}.timeline-bullets li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--accent)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));gap:1.5rem;margin-top:2.5rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.75rem;transition:transform 0.25s ease}.card:hover{transform:translateY(-3px)}.card-date{display:block;font-family:var(--font-mono);font-size:.8rem;color:var(--accent);margin-bottom:.6em}.card-detail{color:var(--text-muted);margin-bottom:0}.card-detail+.card-detail{margin-top:.6em}.card-list{margin-top:.75em;display:grid;gap:.35em}.card-list li{font-size:.9rem;color:var(--text-muted)}.contact-inner{max-width:34rem}.contact-lede{color:var(--text-muted)}.form-row{margin-bottom:1rem}input,textarea{width:100%;padding:.85em 1em;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);resize:vertical;transition:border-color 0.2s ease}input::-moz-placeholder, textarea::-moz-placeholder{color:var(--text-muted)}input::placeholder,textarea::placeholder{color:var(--text-muted)}input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}.form-status{margin:.85em 0 0;font-size:.9rem;min-height:1.2em}.form-status[data-state=success]{color:var(--accent-strong)}.form-status[data-state=error]{color:#f87171}footer{border-top:1px solid var(--border)}.footer-inner{max-width:var(--container);margin:0 auto;padding:2.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.copyright{color:var(--text-muted);font-size:.9rem;margin:0}.copyright a{color:var(--text-muted)}.copyright a:hover{color:var(--accent)}.social-list{display:flex;gap:.4rem}.social-list a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--text-muted);transition:all 0.2s ease}.social-list a:hover{color:var(--accent);background:var(--surface-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75em 1.6em;border-radius:var(--radius-sm);font-weight:600;font-size:.95rem;border:1px solid rgba(0,0,0,0);transition:all 0.2s ease}.btn-primary{background:var(--accent);color:var(--accent-contrast)}.btn-primary:hover{background:var(--accent-strong);color:var(--accent-contrast);transform:translateY(-1px)}.btn-ghost{border-color:var(--border);color:var(--heading)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--text);transition:all 0.2s ease}.icon-btn:hover{color:var(--accent);background:var(--surface-hover)}#theme-toggle .icon-moon{display:none}@media(prefers-color-scheme: light){:root:not([data-theme=dark]) #theme-toggle .icon-sun{display:none}:root:not([data-theme=dark]) #theme-toggle .icon-moon{display:block}}:root[data-theme=light] #theme-toggle .icon-sun{display:none}:root[data-theme=light] #theme-toggle .icon-moon{display:block}#mobile-menu-toggle .icon-close{display:none}body.nav-open #mobile-menu-toggle .icon-menu{display:none}body.nav-open #mobile-menu-toggle .icon-close{display:block}.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(0.2, 0.6, 0.2, 1),transform .6s cubic-bezier(0.2, 0.6, 0.2, 1)}.reveal.is-visible{opacity:1;transform:none}@media(prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}@media(max-width: 860px){.about-grid{grid-template-columns:1fr}.portrait{width:160px;margin:0 auto}.skills-groups{grid-template-columns:1fr}}@media(max-width: 720px){#site-nav{position:fixed;inset:var(--header-h) 0 0 0;background:var(--bg);transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto}#site-nav ul{flex-direction:column;padding:1.5rem;gap:.25rem}#site-nav a{padding:.9em 1em;font-size:1.1rem}body.nav-open #site-nav{transform:translateX(0)}#mobile-menu-toggle{display:inline-flex}.section-inner{padding:3.5rem 1.25rem}.footer-inner{flex-direction:column;text-align:center}}