/* Final responsive and hierarchy refinements */

/* Keep the desktop composition focused instead of stretching edge-to-edge. */
.topbar,
.page-shell {
  width: min(1180px, calc(100% - 32px));
}

/* Preserve the original Manrope typography for the visual identity. */
body,
h1,
h2,
blockquote,
.quote-mark {
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Hero actions: clear hierarchy without hiding useful options. */
.hero .actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  gap: 10px;
}

.button.secondary {
  border-color: rgba(31,37,34,.24);
  background: rgba(255,255,255,.9);
}

.button.tertiary {
  color: var(--muted);
  background: rgba(255,255,255,.42);
}

/* Make the upcoming HF clearly visible without making it look like a current role. */
.development-note {
  position: relative;
  border: 1px solid rgba(184,136,50,.34);
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, rgba(184,136,50,.12), rgba(255,255,255,.48));
  box-shadow: 0 10px 28px rgba(31,37,34,.05);
}

.development-label {
  color: var(--accent-dark);
}

.development-note strong {
  color: var(--ink);
  font-size: 1.14rem;
}

/* Current role: highlight with surface and badge, not an extra vertical border. */
.timeline li.current {
  border: 0;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(184,136,50,.105), rgba(255,255,255,.42));
  box-shadow: 0 10px 28px rgba(31,37,34,.04), inset 0 0 0 1px rgba(184,136,50,.22);
}

.current-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.current-heading h3 {
  margin-bottom: 0;
}

.current-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: rgba(184,136,50,.14);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.timeline li.current p {
  margin-top: 6px;
}

/* Give the date column a little more breathing room on desktop. */
@media (min-width: 901px) {
  .timeline::before {
    left: 158px;
  }

  .timeline li {
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 48px;
  }

  /* Marker outer diameter is 19px, so 148.5px centers regular rows on the 158px line. */
  .timeline li::before {
    left: 148.5px;
  }

  .timeline li.current {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  /* The highlighted row starts 12px further left; compensate only its marker. */
  .timeline li.current::before {
    left: 160.5px;
  }
}

@media (max-width: 900px) {
  .topbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .page-shell {
    width: calc(100% - 20px);
    padding-top: 8px !important;
  }
}

@media (max-width: 620px) {
  /* Balance the hero heading stack: name sits evenly between eyebrow and role. */
  .hero .eyebrow {
    margin-bottom: 16px;
  }

  .hero h1 {
    margin: 0;
  }

  .hero .role-block {
    margin-top: 16px;
  }

  .development-note {
    padding: 16px 17px;
    border-left-width: 4px;
    background: linear-gradient(135deg, rgba(184,136,50,.14), rgba(255,255,255,.72));
  }

  .development-label {
    display: inline-block;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(184,136,50,.13);
    font-size: .76rem;
  }

  .development-note strong {
    margin-top: 2px;
    font-size: 1.05rem;
  }

  /* Timeline marker belongs clearly to the date label. */
  .timeline::before {
    left: 6px;
  }

  .timeline li::before {
    top: 19px;
    left: -4px;
  }

  .timeline li.current {
    margin-inline: 0;
    padding-left: 28px;
    padding-right: 12px;
    box-shadow: 0 10px 28px rgba(31,37,34,.04), inset 0 0 0 1px rgba(184,136,50,.20);
  }

  /* All four contact actions remain available on mobile. */
  .hero .actions {
    position: static;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hero .actions .button:nth-child(n+3) {
    display: inline-flex !important;
  }

  /* Contact options already exist above; keep the mobile footer quiet. */
  .footer-contact {
    display: none;
  }

  footer {
    padding-top: 18px;
  }
}

@media (max-width: 430px) {
  .hero .actions {
    grid-template-columns: 1fr 1fr;
  }

  .hero .actions .button {
    padding-inline: 8px;
    font-size: .82rem;
  }

  .current-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}