/* Experience page refinements — 28 Aug 2026 */

/* Experience numbering only: large and faded at rest, then a muted/faded
   orange when the corresponding experience card is hovered. */
body[data-page="experience"] .experience-card time{
  align-self:start;
  color:color-mix(in srgb,var(--text) 13%,transparent);
  font:900 clamp(50px,4.8vw,58px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:-.06em;
  text-transform:none;
  transition:color 200ms ease;
}

body[data-page="experience"] .experience-card:hover time{
  color:color-mix(in srgb,var(--orange) 46%,transparent);
}

/* Match the approved reference: professional roles together, then a clearly
   separated training/development block. */
body[data-page="experience"] .experience-groups{
  display:grid;
  gap:64px;
}

body[data-page="experience"] .experience-group-head{
  margin-bottom:24px;
}

body[data-page="experience"] .experience-group-head .kicker{
  display:block;
  margin-bottom:14px;
}

/* Roles and Structured DevOps learning use the same heading scale. */
body[data-page="experience"] .experience-group-head h2{
  margin:0;
  font-size:clamp(40px,4.2vw,44px) !important;
  line-height:1.04;
  letter-spacing:-.035em;
}

body[data-page="experience"] .experience-role-list{
  display:grid;
  gap:18px;
}

/* Compact technical metadata row used in the approved screenshot. */
body[data-page="experience"] .experience-label-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:9px;
  row-gap:4px;
  margin-bottom:9px;
}

body[data-page="experience"] .experience-type{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted-2);
  font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

body[data-page="experience"] .experience-type::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 9px color-mix(in srgb,var(--green) 42%,transparent);
}

body[data-page="experience"] .experience-company{
  display:inline-block;
  color:var(--orange);
  font:900 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media(max-width:820px){
  body[data-page="experience"] .experience-card time{
    margin-bottom:2px;
    font-size:46px;
  }

  body[data-page="experience"] .experience-groups{
    gap:52px;
  }

  body[data-page="experience"] .experience-group-head h2{
    font-size:clamp(36px,8vw,42px) !important;
  }
}

@media(max-width:520px){
  body[data-page="experience"] .experience-label-row{
    column-gap:8px;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="experience"] .experience-card time{
    transition:none;
  }
}