/* Homepage career snapshot. Reuses the site's tokens and reveal observer. */
.career { position: relative; overflow: clip; isolation: isolate; }
.career__years { position: absolute; top: 0; left: 3%; z-index: -1; color: var(--color-text); opacity: .035; white-space: nowrap; font: 900 clamp(5rem, 16vw, 15rem)/1 var(--font-display); letter-spacing: -.07em; pointer-events: none; }
.career__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.career__media { position: sticky; top: 7rem; margin: 1rem 0 0; min-width: 0; }
.career__stage { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--color-bg-alt); }
.career__image { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .45s ease, transform .7s ease; }
.career__image.is-active { opacity: 1; transform: scale(1); }
.career__caption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; font-size: .65rem; letter-spacing: .14em; color: var(--color-text-dim); }
.career__caption::before { content: ''; width: 24px; height: 2px; background: var(--color-accent); align-self: center; }
.career__text { min-width: 0; }
.career__title { font: 800 clamp(1.7rem, 3vw, 2.7rem)/1.08 var(--font-display); letter-spacing: -.045em; margin-bottom: 1.5rem; }
.career__title .accent { display: inline-block; font-size: clamp(4.5rem, 8vw, 7rem); line-height: 1; margin-left: -.045em; }
.career__intro { color: var(--color-text-dim); font-size: .95rem; max-width: 52ch; margin-bottom: 2rem; }
.career__index { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.career__entry { position: relative; border-bottom: 1px solid var(--color-border); }
.career__entry:first-child { border-top: 1px solid var(--color-border); }
.career__entry::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: var(--color-accent-hi); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.career__entry.is-active::after, .career__entry:focus-within::after { transform: scaleX(1); }
.career__trigger { width: 100%; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) 1rem; gap: 1rem; align-items: start; text-align: left; color: inherit; background: none; border: 0; padding: 1.2rem 0; cursor: pointer; font: inherit; }
.career__number { font: 600 1.9rem/1 var(--font-display); color: var(--color-text-dim); transition: color .25s; }
.career__name { display: block; font: 800 clamp(1.05rem, 1.7vw, 1.45rem)/1.15 var(--font-display); letter-spacing: -.025em; }
.career__meta { display: block; margin-top: .45rem; font-size: .61rem; line-height: 1.6; letter-spacing: .07em; color: var(--color-text-dim); }
.career__arrow { color: var(--color-accent-hi); transition: transform .25s; }
.career__entry.is-active .career__arrow { transform: translate(2px, -2px); }
.career__entry.is-active .career__number { color: var(--color-accent-hi); }
.career__inline img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.career__inline:not([hidden]) { margin-bottom: 1rem; }
@media (min-width: 801px) and (hover: hover) and (pointer: fine) { .career__inline { display: none; } }
@media (max-width: 800px) {
  .career__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .career__media { position: relative; top: auto; margin-top: 0; }
  .career__stage { max-height: 65svh; }
  .career__title { font-size: clamp(1.5rem, 5.5vw, 2.7rem); }
  .career__title .accent { font-size: clamp(4.5rem, 18vw, 7rem); }
  .career__trigger { gap: .7rem; grid-template-columns: 2.3rem minmax(0, 1fr) 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .career *, .career *::after { transition: none !important; animation: none !important; }
  .career__image, .career__entry.is-active .career__arrow { transform: none; }
}

/* Preserve both OLAS members in the square artist photograph. */
.career__image[data-career-image="olas"], #career-olas img { object-fit: contain; background: var(--color-bg-alt); }

/* Keep the complete performance scene visible. */
.career__image[data-career-image="tejas-laiks"], #career-tejas-laiks img { object-fit: contain; background: var(--color-bg-alt); }

/* Align the compact rating with the project title; keep it a separate link. */
.career__entry:has(.career__rating) .career__name { padding-right: 7.5rem; }
.career__rating { position: absolute; top: 1.2rem; right: 2rem; display: inline-flex; align-items: baseline; gap: .4rem; color: var(--color-text-dim); font-size: .7rem; line-height: 1.7; text-decoration: none; white-space: nowrap; }
.career__rating strong { color: var(--color-accent-hi); }
.career__rating > span { display: none; }
.career__rating:hover, .career__rating:focus-visible { color: var(--color-text); text-decoration: underline; }
@media(max-width:480px) {
 .career__entry:has(.career__rating) .career__name { padding-right: 6.1rem; }
 .career__rating { right: 1.7rem; font-size: .6rem; gap: .3rem; }
 .career__entry:has(.career__rating) .career__name { font-size: 1rem; }
}

.career__image[data-career-image="zelta-mikrofons"], #career-zelta-mikrofons img { object-fit: contain; background: var(--color-bg-alt); }

.career__image[data-career-image="palladium"], #career-palladium img { object-fit: contain; background: var(--color-bg-alt); }

.career__image[data-career-image="reik-mic-show"], #career-reik-mic-show img { object-fit: contain; background: var(--color-bg-alt); }