.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 85% 35%, color-mix(in srgb, var(--palette-plum) 22%, transparent), transparent 55%), radial-gradient(ellipse at 75% 15%, color-mix(in srgb, var(--palette-violet) 12%, transparent), transparent 60%); }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
.hero h1 { max-width: 12ch; }
.hero-subtitle { font-size: var(--text-lg); max-width: 40ch; line-height: 1.6; color: var(--color-muted); }
.hero-logo { width: 190px; justify-self: start; }
.hero-actions { margin-top: var(--space-3); }
.about-intro { margin-bottom: var(--space-8); }
.skills-heading { margin-top: var(--space-8); margin-bottom: var(--space-6); }
.contact-grid { --grid-gap: var(--space-8); }
.certification { margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); }
.notes { margin-top: var(--space-7); }
.project-number { color: var(--color-link); font-family: var(--font-mono); font-size: var(--text-xs); }
.swatch { min-height: 7rem; padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: end; }
.swatch--bg { background: var(--color-bg); }.swatch--surface { background: var(--color-surface); }.swatch--accent { background: var(--color-accent); color: var(--color-on-accent); }.swatch--text { background: var(--color-text); color: var(--color-bg); }
.reference-section { padding-block: var(--space-8); border-top: var(--border-width) solid var(--color-border); }
.reference-label { color: var(--color-muted); font: var(--text-xs) var(--font-mono); }
.spacing-sample { height: var(--space-4); width: var(--sample-width); background: var(--color-accent); border-radius: var(--radius-sm); }
code { font-family: var(--font-mono); font-size: .85em; color: var(--color-link); overflow-wrap: anywhere; }
@media (min-width: 48rem) { .hero-grid { grid-template-columns: 1fr 280px; } .hero-logo { width: 220px; justify-self: center; } }
@media (max-width: 47.99rem) { .hero-logo { width: 140px; grid-row: 1; } }

@media (min-width: 48rem) and (max-width: 63.99rem) { #contact-form .grid { grid-template-columns: minmax(0,1fr); } }

#reveal-fun { display: flex; width: fit-content; max-width: 100%; margin-top: var(--space-6); font-size: var(--text-xs); padding: var(--space-2) var(--space-4); }