@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');
@import url('./style.css');

:root {
  --bg: #ffcb09;
  --fg: #7d3021;
  --muted: #6f4036;
  --secondary: #ffc14a;
  --secondary-fg: #7d3021;
  --border: #d18a3c;
  --gold: #ef6d2c;
  --gold-dark: #7d3021;
  --warm-100: #ffe48a;
  --gold-gradient: linear-gradient(135deg, #ef6d2c, #ffcb09);
  --radius: 0.6rem;
}

body {
  background: #ffcb09;
  color: #7d3021;
  font-family: 'Barlow', Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Barlow Semi Condensed', 'Barlow', Arial, Helvetica, sans-serif;
  letter-spacing: 0.01em;
}

.gold-line {
  height: 4px;
  background: linear-gradient(90deg, #ef6d2c, #7d3021);
}

.gold-line--short {
  width: 100vw; /* w-24 */
}

@media (min-width: 768px) {
    .divider-wrap {
        padding: 0;
    }
}

.divider-wrap {
    max-width: 100vw;
    padding: 0;
}

header.header-inner {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
  padding: 5.2rem 2.4rem;
  background: #7d3021;
}

.header-inner {
  gap: 3rem;
}

.header-text h1,
.header-text .subtitle,
.header-text .contact-links,
.header-text .contact-links a,
.header-text .contact-links span,
.header-text .contact-links svg {
  color: #fff;
}

.subtitle {
  font-weight: 500;
}

.contact-links a:hover {
  color: #ffcb09;
}

.portrait {
  border: 5px solid #ffcb09;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}

main {
  max-width: 1100px;
}

.cv-section {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.6rem;
}

.cv-section-toggle {
  background: #ef6d2c;
  padding: 1.8rem 1.6rem;
}
/*
.cv-section:nth-of-type(2n) .cv-section-toggle {
  background: #7d3021;
}
*/
.cv-section-toggle h2,
.cv-section-toggle .chevron {
  color: #fff;
}

.cv-section-toggle:hover h2 {
  color: #ffcb09;
}

.cv-section-body-inner {
  background: #fff8e9;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.cv-section-body-inner > *:first-child {
  padding-top: 16px;
}

.cv-entry-content,
.muted,
.value-card p,
.evolution-intro,
.evolution-step p,
.future-card p,
.future-metric span,
footer p,
.footer-links {
  color: #7d3021;
}

.period {
  color: #ef6d2c;
  font-weight: 700;
}

.value-card,
.evolution-chart,
.future-card {
  border: 2px solid #ef6d2c;
  background: #fff;
}

.value-icon,
.icon-gold,
.future-icon {
  color: #ef6d2c;
}

.step-badge {
  background: #ef6d2c;
  color: #fff;
  border-radius: 6px;
}

.skill-tag {
  background: #ffd84a;
  border-color: #ef6d2c;
  color: #7d3021;
}

.evolution-section {
  margin: 0.8rem 0;
}

.future-section {
  margin-top: 2.6rem;
  background: linear-gradient(135deg, #ffcb09, #ef6d2c);
  border-top: 0;
  border-bottom: 0;
}

.future-inner h2,
.future-quote,
.future-metric strong {
  color: #7d3021;
}

.future-metric + .future-metric {
  border-left: 1px solid rgba(125, 48, 33, 0.4);
}

footer {
  background: #7d3021;
  padding: 0 0 3.2rem;
}

#footer-copy {
  padding-top: 2.8rem;
}

footer p,
.footer-links,
.footer-links a,
.footer-links span {
  color: #fff;
}

.footer-links a:hover {
  color: #ffcb09;
}

@media (min-width: 768px) {
  header.header-inner {
    padding: 6.2rem 4.8rem;
  }

  .cv-section-toggle {
    padding: 2rem 2rem;
  }

  .cv-section-body-inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}