/* =========================================================
   experience.css: one featured block per position
   ========================================================= */

.feature{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--deep);
  box-shadow:inset 0 1px 0 rgba(0,245,255,.15)}
.feature + .feature{margin-top:20px}
.feature .when{font:500 14px var(--mono);color:var(--violet-text)}
.feature .org{margin-top:6px;color:var(--muted);font-size:15px}
.feature h3{font:700 22px/1.3 var(--sans)}
.feature .thesis{margin-top:10px;font:500 16px/1.5 var(--mono);color:var(--cyan)}
.feature p{margin-top:14px;color:var(--muted);max-width:62ch}
.feature .sup{margin-top:16px;font-size:15px;color:var(--muted)}
.feature .sup b{color:var(--text);font-weight:600}

@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:14px;padding:24px}
}