/* Keep everything inside the about page width */
.exp{
  margin-top: 28px;
  width: 100%;
}

/* Header row: line_left | EXPERIENCE | line_right */
.exp-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 18px auto 18px;
  text-align: center;
}

.exp-line{
  width: min(220px, 22vw);
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(212,175,55,0.10));
}

.exp-title{
  margin: 0;
  font-family: "Cinzel", serif;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: rgba(230,216,181,0.92);
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
}

/* Accordion container */
.exp-accordion{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

/* Each item */
.exp-item{
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(10,10,14,0.38);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* Trigger row */
.exp-trigger{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.40),
    rgba(0,0,0,0.70)
  );

  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.exp-trigger:hover{
  outline: 1px solid rgba(212,175,55,0.28);
}

.exp-trigger-left{
  display: grid;
  gap: 4px;
}

.exp-role{
  font-family: "Cinzel", serif;
  letter-spacing: 0.10em;
  color: rgba(230,216,181,0.95);
  font-size: 1.05rem;
}

.exp-company{
  font-family: "Cinzel", serif;
  letter-spacing: 0.14em;
  color: rgba(230,216,181,0.70);
  font-size: 0.85rem;
}

.exp-trigger-right{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.exp-dates{
  font-family: "Cinzel", serif;
  letter-spacing: 0.14em;
  color: rgba(230,216,181,0.70);
  font-size: 0.85rem;
}

.exp-icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.25);
  background: rgba(0,0,0,0.35);
  color: rgba(230,216,181,0.95);
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease;
}

/* Panel */
.exp-panel{
  border-top: 1px solid rgba(212,175,55,0.14);
}

.exp-panel-inner{
  padding: 14px 16px 16px;
}

/* Meta rows */
.exp-meta{
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.exp-meta-row{
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.exp-meta-label{
  font-family: "Cinzel", serif;
  letter-spacing: 0.18em;
  color: rgba(230,216,181,0.60);
  font-size: 0.78rem;
  min-width: 86px;
}

.exp-meta-value,
.exp-meta-link{
  color: rgba(230,216,181,0.88);
  text-decoration: none;
}

.exp-meta-link:hover{
  text-decoration: underline;
}

/* Summary + bullets */
.exp-summary{
  margin: 8px 0 10px;
  color: rgba(230,216,181,0.86);
  line-height: 1.75;
}

.exp-bullets{
  margin: 0 0 12px;
  padding-left: 18px;
  color: rgba(230,216,181,0.86);
  line-height: 1.75;
}

.exp-bullets li{
  margin: 6px 0;
}

/* Tags */
.exp-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.exp-pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.28);
  background: rgba(0,0,0,0.22);
  color: rgba(230,216,181,0.88);
  font-size: 0.85rem;
}

/* Open state styles (driven by JS toggling aria-expanded) */
.exp-trigger[aria-expanded="true"] .exp-icon{
  transform: rotate(45deg); /* + becomes x-ish */
}

@media (max-width: 700px){
  .exp-line{ width: min(160px, 18vw); }
  .exp-trigger{ padding: 14px 14px; }
  .exp-role{ font-size: 1rem; }
}