/* ============================================
   ABOUT.CSS — STELLA
   About page styles only.
   All colors and fonts reference global.css variables.
   ============================================ */

/* ============================================
   SECTION 1 — ABOUT COPY
   Two paragraphs. Nothing more.
   ============================================ */

.about-body {
  padding: var(--space-section) var(--space-side);
  border-bottom: 0.5px solid var(--color-border);
}

.about-p1 {
  font-size: var(--size-body);
  line-height: 1.95;
  color: var(--color-text-primary);
  margin-bottom: var(--space-gap);
}

.about-rule {
  width: 28px;
  height: 1px;
  background: var(--color-green);
  margin-bottom: var(--space-gap);
}

.about-p2 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-weight: var(--weight-light);
}

/* ============================================
   SECTION 2 — CONTACT FORM
   Name, Email, Message, Send.
   Nothing stored beyond responding.
   ============================================ */

.contact {
  padding: var(--space-section) var(--space-side);
}

.contact-intro {
  font-size: var(--size-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-gap);
  line-height: 1.8;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-sm);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 0.5px solid var(--color-border);
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-normal);
  outline: none;
  transition: border-color var(--transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-text-muted);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--color-green);
}

.contact-form textarea {
  resize: none;
  height: 100px;
}

.contact-submit {
  align-self: flex-start;
  margin-top: var(--space-gap-sm);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-green);
  border: none;
  padding: 14px 28px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: opacity var(--transition);
}

.contact-submit:hover {
  opacity: 0.85;
}

.contact-note {
  margin-top: var(--space-gap);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.about-title {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 40px;
}