function Manifesto() {
  return (
    <section id="about" style={{
      padding: "140px 0 140px",
      background: "var(--paper)",
      position: "relative",
    }}>
      <div className="container" style={{
        display: "grid", gap: 44,
      }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
          <img
            src={assetBase + "assets/images/ana3.jpg"}
            alt="Ana Paula Celis en el estudio"
            loading="lazy"
            decoding="async"
            style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: 0 }}
          />
          <img
            src={assetBase + "assets/images/ana2.jpg"}
            alt="Ana Paula Celis en sesión editorial"
            loading="lazy"
            decoding="async"
            style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: 0 }}
          />
        </div>
        <div style={{ maxWidth: 980 }}>
          <div className="eyebrow">About · Manifiesto</div>
          <h2 className="display" style={{
            fontSize: "clamp(42px, 5.4vw, 74px)",
            margin: "20px 0 24px",
            color: "var(--coffee)",
          }}>
            {t('manifestoHeadline1')}
            <span className="italic" style={{ color: "var(--rose)" }}>{t('manifestoHeadline2')}</span>
          </h2>
          <div style={{ fontSize: 16, lineHeight: 1.85, color: "var(--coffee-soft)", textWrap: "pretty" }}>
            <p>{t('manifestoP1')}</p>
            <p>{t('manifestoP2')}</p>
            <p>{t('manifestoP3')}</p>
            <p>{t('manifestoP4')}</p>
            <p style={{ marginBottom: 0 }}>{t('manifestoP5')}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Manifesto = Manifesto;