.hero { display: flex; align-items: center; gap: 2.5rem; padding: 2.5rem 0; flex-wrap: wrap; } .hero-text h1 { margin: 0 0 0.4rem; font-size: 1.8rem; } .hero-text .role { margin: 0; color: var(--color-accent); } .hero-text .tagline { margin: 0.75rem 0 0; color: var(--color-accent-dim); max-width: 34ch; } .status-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-dim); margin: 0 0 0.75rem; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent-dim); animation: blink 1.6s step-end infinite; } section { margin: 3rem 0; } .about p { max-width: 68ch; } .timeline { border-left: var(--border); margin: 0; padding: 0 0 0 1.5rem; list-style: none; } .timeline-item { position: relative; margin-bottom: 2rem; } .timeline-item::before { content: ''; position: absolute; left: -1.6rem; top: 0.4rem; width: 8px; height: 8px; background: var(--color-accent); box-shadow: 0 0 6px var(--color-accent-dim); } .timeline-item__meta { color: var(--color-silver); font-size: 0.85rem; } .timeline-item__role { color: var(--color-accent); margin: 0.15rem 0 0.5rem; font-size: 1rem; } .timeline-item ul { margin: 0; padding-left: 1.2rem; } .timeline-item li::marker { color: var(--color-accent-dim); } .contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .contact-list a::before { content: '$ '; color: var(--color-accent-dim); } .skill-group { margin-bottom: 1.25rem; } .skill-group:last-child { margin-bottom: 0; } .skill-group__title { color: var(--color-silver); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; } .edu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; } .edu-item__year { color: var(--color-silver); font-size: 0.8rem; } .edu-item__degree { color: var(--color-fg); font-weight: 600; margin: 0.15rem 0; } .edu-item__school { color: var(--color-silver); font-size: 0.9rem; } .edu-item__detail { color: var(--color-silver); font-size: 0.83rem; opacity: 0.85; margin-top: 0.1rem; } @media (max-width: 640px) { .hero { flex-direction: column; align-items: flex-start; } }