@layer components {
  :root {
    --color-bg-primary: #faf8f5;
    --color-bg-secondary: #f5f2ed;
    --color-bg-tertiary: #efeae3;
    --color-surface: #ffffff;
    --color-surface-hover: #f5f2ed;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #f5f2ed;
    --color-text-primary: #1a1a18;
    --color-text-secondary: #4a4844;
    --color-text-tertiary: #7a7873;
    --color-text-muted: #a8a6a1;
    --color-border: #e8e4dd;
    --color-border-hover: #dcd8d1;
    --color-accent: #c47a3a;
    --color-accent-hover: #b06a2e;
    --color-accent-muted: #f5e6d3;
    --color-accent-light: #fdf6ef;
  }
}

@layer components {
  .about {
    padding: var(--space-16) 0;
    background: var(--color-bg-primary);
  }

  .about__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }

  .about__content{
    display:flex;
    flex-direction:column;
    gap:var(--space-10);
}

/* ==========================
   INTRO
========================== */

.about__intro{
    max-width: 100%;
    margin: 0 0 var(--space-12);
    text-align: left;
}

.about__paragraph{
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
    margin: 0;
}

.about .section-header {
    margin-bottom: var(--space-8);
}

/* ==========================
   CARDS
========================== */

.about__cards{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:var(--space-6);
}

.about__card{

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    padding:var(--space-8);

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

    height:100%;
}

.about__card-title{

    font-family:var(--font-display);

    font-size:var(--text-3xl);

    font-weight:500;

    color:var(--color-text-primary);

    margin:0;
}

/* ==========================
   QUICK FACTS
========================== */

.about__fact{

    display:flex;

    flex-direction:column;

    gap:var(--space-2);

    padding-bottom:var(--space-4);

    border-bottom:1px solid var(--color-border);
}

.about__fact:last-child{

    border-bottom:none;

    padding-bottom:0;
}

.about__label{

    font-size:0.78rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:var(--color-text-tertiary);

    font-weight:600;
}

.about__value{

    font-size:var(--text-base);

    line-height:var(--leading-relaxed);

    color:var(--color-text-secondary);
}

.about__value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.about__value-list li {
    position: relative;
    padding-left: var(--space-3);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.about__value-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* ==========================
   CURRENTLY BUILDING
========================== */

.about__card-text{

    font-size: var(--text-lg);

    line-height: var(--leading-relaxed);

    color: var(--color-text-primary);

    margin: 0;
}

.about__projects-detailed {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-2);
}

.about__project-item {
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.about__project-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.about__project-desc {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
}

.about__projects{

    display:flex;

    flex-wrap:wrap;

    gap:var(--space-3);
}

.about__project{

    padding:.65rem 1rem;

    border-radius:999px;

    border:1px solid var(--color-border);

    background:var(--color-bg-secondary);

    font-size:var(--text-sm);

    color:var(--color-text-primary);

    font-weight:500;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:900px){

.about__cards{

grid-template-columns:1fr;

}

.about__intro{

max-width:100%;

}

}

@media (max-width:600px){

.about{

padding:var(--space-12) 0;

}

.about__paragraph{

font-size:var(--text-base);

}

.about__card{

padding:var(--space-6);

}

.about__card-title{

font-size:var(--text-2xl);

}

}