.experience.experience-structured{min-height:0;padding-block:48px 80px}
.experience-intro{grid-column:span 4;min-width:0}
.experience-records{grid-column:span 8;min-width:0;padding-top:32px}
.experience-columns,.experience-record{display:grid;grid-template-columns:1fr 1fr 1.25fr;column-gap:24px}
.experience-columns{font-size:14px;line-height:20px;padding-bottom:20px;border-bottom:1px solid var(--color-structure)}
.experience-record{position:relative;grid-template-rows:auto 1fr;row-gap:16px;padding-block:32px;min-height:180px}
.experience-record+.experience-record{border-top:1px solid var(--color-structure)}
.experience-company{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:12px;font-size:22px;line-height:30px}
.experience-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--color-structure)}
.is-current .experience-dot{background:var(--color-accent)}
.experience-role,.experience-description{font-size:18px;line-height:28px;grid-row:1/3;position:relative}
.experience-role{grid-column:2}
.experience-role span{display:block;margin-top:4px}
.experience-description{grid-column:3}
.experience-role::before,.experience-description::before{content:'';position:absolute;left:-12px;top:0;bottom:0;border-left:1px solid var(--color-structure)}
.experience-tags{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-content:start;gap:6px;padding-left:20px}
.experience-tags li{font-size:12px;line-height:18px;padding:3px 8px;border-radius:5px;background:color-mix(in srgb,var(--color-structure) 50%,var(--color-base))}
.experience-record.is-current .experience-tags li{background:color-mix(in srgb,var(--color-accent) 10%,var(--color-base));color:var(--color-accent)}
.experience-art{width:min(100%,400px);margin-top:32px;animation:focus-art-float 6s ease-in-out infinite}
.experience-art-hover{transition:transform 350ms ease-out}
.experience-art img{display:block;width:100%;height:auto}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .experience-art:hover{animation-play-state:paused}
 .experience-art:hover .experience-art-hover{transform:scale(1.05) rotate(1deg)}
}
@media(min-width:768px) and (max-width:1199px){
 .experience-intro{grid-column:span 2}
 .experience-records{grid-column:span 6}
 .experience-art{width:100%;margin-top:24px}
 .experience-columns,.experience-record{column-gap:16px;grid-template-columns:1fr 1fr 1.15fr}
 .experience-company{font-size:16px;line-height:24px;gap:8px}
 .experience-role,.experience-description{font-size:14px;line-height:22px}
 .experience-tags{padding-left:16px;gap:4px}
 .experience-tags li{font-size:11px;padding:2px 5px}
 .experience-role::before,.experience-description::before{left:-8px}
}
@media(max-width:767px){
 .experience.experience-structured{padding-block:48px 64px}
 .experience-intro,.experience-records{grid-column:1/-1}
 .experience-art{width:min(80%,280px);margin-top:24px}
 .experience-records{padding-top:0}
 .experience-columns{display:none}
 .experience-record{display:flex;flex-direction:column;gap:16px;padding-block:28px;min-height:0}
 .experience-company{font-size:22px;line-height:30px}
 .experience-role,.experience-description{font-size:16px;line-height:24px}
 .experience-role::before,.experience-description::before{display:none}
 .experience-tags{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
 .experience-art{animation:none;transform:none}
 .experience-art-hover{transition:none;transform:none}
}