/* About, Career, CTA, Contact. Values follow the reference (spec section 1). */

/* ---------- About ---------- */
.about-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: var(--cWidth);
  margin: auto;
  z-index: 2;
}

.about-me {
  padding: 40px 0 0;
  width: 100%;
  max-width: calc(100% - 15px);
}

.about-me .title {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 15px;
}

.about-me .para {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 1px;
  word-spacing: 2px;
  margin: 1em 0;
}

.title,
.para {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

@media only screen and (max-width: 768px) {
  .about-section {
    justify-content: flex-start;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .about-me {
    width: 100%;
    max-width: 100%;
    padding: 30px 0;
  }
  .about-me .title {
    font-size: 16px;
    letter-spacing: 3px;
    margin-bottom: 12px;
  }
  .about-me .para {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.5px;
    overflow-wrap: break-word;
  }
}

@media only screen and (min-width: 600px) {
  .about-section { justify-content: center; }
  .about-me { width: 500px; }
  .about-me .title {
    font-size: 22px;
    letter-spacing: 6px;
  }
  .about-me .para {
    font-size: 28px;
    line-height: 32px;
  }
}

@media only screen and (min-width: 768px) {
  .about-me {
    width: 500px;
    max-width: calc(100% - 70px);
  }
  .about-me .title {
    font-size: 25px;
    letter-spacing: 7px;
  }
  .about-me .para {
    font-size: 33px;
    line-height: 36px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .about-section { padding: 120px 0 40px; }
}

@media only screen and (min-width: 1025px) {
  /* Same layer as the fixed character (tokens: --z-avatar) and later in the page, so it paints
     above it: while About scrolls in, its text passes over the big bust's shoulder instead of
     being hidden behind it. The nav fade (12) still sits on top. */
  .about-section {
    justify-content: flex-end;
    max-width: 1920px;
    height: var(--vh);
    padding: 0;
    z-index: var(--z-avatar);
  }
  .about-me {
    padding: 0;
    width: 50%;
  }
  .about-me .para {
    font-size: 1.9vw;
    line-height: 2.3vw;
  }
}

@media only screen and (min-width: 1950px) {
  .about-me .para {
    font-size: 2.5rem;
    line-height: 2.7rem;
  }
}

/* Compact live story: About is a screen and a half tall and its text holds in the lower half
   (sticky), over the floor fade, while the character turns above it and then the camera pulls
   back to the desk (avatar/choreography-compact.js T1, T2). */
@media only screen and (max-width: 1024px) {
  html.choreo-compact .about-section {
    display: block;
    height: calc(var(--vh) * 1.5);
    min-height: 0;
    padding: 0 15px;
    z-index: var(--z-avatar);
  }
  html.choreo-compact .about-me {
    position: sticky;
    top: calc(var(--vh) * 0.56);
    padding: 0;
    margin: 0 auto;
  }
}

/* ---------- Career ---------- */
.career-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: auto;
  margin: auto auto 250px;
  padding: 120px 0;
}

.career-container { width: 100%; }

.career-section h2 {
  font-size: 70px;
  line-height: 70px;
  font-weight: 400;
  text-align: center;
  background: linear-gradient(0deg, #7f40ff, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 50px 0 90px;
}

.career-section h2 > span { font-weight: 300; }

.career-info {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.career-info-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.career-info-box > p {
  width: 40%;
  font-size: 14px;
  font-weight: 300;
  margin: 0;
  line-height: 20px;
}

.career-info-in {
  display: flex;
  width: 40%;
  justify-content: space-between;
  gap: 50px;
}

.career-info .career-when {
  font-size: 48px;
  margin: 0;
  font-weight: 500;
  line-height: 45px;
  white-space: nowrap;
}

.career-info h3 {
  font-size: 33px;
  line-height: 30px;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin: 0;
}

.career-info .career-org {
  font-weight: 400;
  letter-spacing: 0.7px;
  font-size: 20px;
  margin: 10px 0;
  color: var(--accent);
}

.career-timeline {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background-image: linear-gradient(to top, var(--accent-timeline) 20%, var(--accent) 50%, transparent 95%);
}

.career-dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  background-color: var(--accent-timeline);
  width: 10px;
  height: 10px;
  border-radius: 50px;
  box-shadow: 0 0 5px 2px #d29bff, 0 0 15px 8px #d097ff, 0 0 110px 20px #f2c0ff;
  animation: timeline 0.8s linear infinite forwards;
}

@keyframes timeline {
  10%, 20%, 50%, 70%, 90% { box-shadow: 0 0 5px 2px #d29bff; }
  0%, 30%, 64%, 80%, 100% { box-shadow: 0 0 5px 2px #d29bff, 0 0 15px 5px #d097ff, 0 0 110px 20px #f2c0ff; }
}

@media only screen and (max-width: 1400px) {
  .career-section h2 { font-size: 50px; line-height: 50px; }
  .career-info h3 { font-size: 22px; line-height: 24px; }
  .career-info .career-role { width: 180px; }
  .career-info .career-org { font-size: 17px; }
  .career-info .career-when { font-size: 40px; }
  .career-info-in { width: 45%; gap: 20px; }
  .career-info-box > p { width: 45%; }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .career-section h2 { font-size: 48px; line-height: 48px; }
  .career-info .career-when { font-size: 38px; }
}

@media only screen and (max-width: 1025px) {
  .career-section { padding: 100px 0 70px; margin-top: 0; margin-bottom: 0; }
}

@media only screen and (max-width: 900px) {
  .career-info-box {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 70px;
  }
  .career-info-in,
  .career-info-box > p {
    width: 100%;
    padding-left: 10%;
    box-sizing: border-box;
  }
  .career-timeline { left: 0; }
  .career-container { width: calc(100% - 25px); }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
  .career-section h2 { font-size: 42px; line-height: 44px; }
  .career-info .career-when { font-size: 36px; }
  .career-info h3 { font-size: 20px; }
}

@media only screen and (max-width: 600px) {
  .career-info { margin: 0; }
  .career-section h2 {
    width: 100%;
    font-size: 45px;
    line-height: 45px;
    margin-top: 0;
  }
  .career-info-in { gap: 0; }
  .career-info .career-when { font-size: 33px; }
  .career-info-in,
  .career-info-box > p { padding-left: 5%; }
  .career-section {
    padding-top: 90px;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-dot { animation: none; }
}

html.reduced-motion .career-dot { animation: none; }

/* ---------- CTA ---------- */
.cta-section {
  box-sizing: border-box;
  width: 100%;
  padding: 80px 20px;
  background-color: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 52px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  min-width: 220px;
}

.cta-btn-hire {
  background: var(--accent);
  color: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 4px 24px #c2a4ff40;
}

.cta-btn-hire:hover,
.cta-btn-hire:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 10px 40px #c2a4ff73;
  transform: translateY(-3px);
  color: var(--bg);
}

@media only screen and (max-width: 768px) {
  .cta-section { padding: 60px 20px; }
  .cta-btn {
    width: 100%;
    max-width: 280px;
    padding: 14px 36px;
    font-size: 15px;
    box-sizing: border-box;
  }
}

/* ---------- Contact ---------- */
.contact-section {
  margin: 0 auto;
  padding-bottom: 150px;
  position: relative;
  z-index: 1;
  background-color: var(--bg);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-section h2 {
  font-size: 32px;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.5;
}

.contact-note {
  margin: 0 0 36px;
  max-width: 34em;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: #ffffffb3;
}

.contact-flex {
  display: flex;
  justify-content: space-between;
}

.contact-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-flex h3 {
  font-weight: 500;
  margin: 0;
  opacity: 0.6;
  font-size: 14px;
}

.contact-flex p {
  margin-top: 8px;
  margin-bottom: 15px;
  font-size: 14px;
}

.contact-social-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

a.contact-social {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 8px;
  transition: color 0.3s, border-color 0.3s;
}

a.contact-social svg {
  width: 0.8em;
  height: 0.8em;
}

a.contact-social:hover { border-color: var(--accent); }

.contact-credit .credit {
  font-weight: 400;
  font-size: 16px;
  margin: 0;
  line-height: 22px;
  max-width: 14em;
}

.contact-credit .credit > span { color: var(--accent); }

.contact-credit .credit-year {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  display: flex;
  gap: 8px;
  opacity: 0.5;
  margin: 20px 0 10px;
}

.contact-credit .credit-built {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.45;
  max-width: 22em;
  margin: 0;
}

@media only screen and (min-width: 600px) {
  .contact-section h2 { font-size: 40px; }
  .contact-credit .credit,
  a.contact-social { font-size: 18px; }
  .contact-flex h3,
  .contact-flex p { font-size: 15px; }
}

@media only screen and (min-width: 900px) {
  .contact-section h2 { font-size: 48px; }
  .contact-credit .credit { font-size: 20px; }
  a.contact-social { font-size: 22px; }
}

@media only screen and (min-width: 1300px) {
  .contact-section h2 { font-size: 55px; }
  .contact-credit .credit { font-size: 22px; }
  a.contact-social { font-size: 24px; }
}

@media only screen and (min-width: 1600px) {
  .contact-section h2 { font-size: 60px; }
  .contact-note { margin-bottom: 40px; }
  .contact-credit .credit { font-size: 23px; }
  a.contact-social { font-size: 25px; }
  .contact-flex p { margin-top: 10px; margin-bottom: 20px; }
  .contact-credit .credit-year { font-size: 20px; line-height: 20px; gap: 10px; }
}

@media only screen and (max-width: 900px) {
  .contact-flex {
    flex-direction: column;
    gap: 40px;
  }
  .contact-flex p { margin-bottom: 0; }
  .contact-section { margin-top: 50px; padding-bottom: 50px; }
}

@media (pointer: coarse) {
  a.contact-social,
  .contact-flex p a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  a.contact-social { margin-bottom: 4px; }
}

.career-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}