function About() {
  return (
    <section style={{ background: 'var(--wht)' }}>
      <div style={{ padding: '88px 48px 32px', borderBottom: '1px solid var(--blk)' }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 18 }}>ABOUT · DC SINCE 2019</div>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontSize: 120, margin: 0,
          textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 0.88,
        }}>About the<br/>squirrel.</h1>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 480, borderBottom: '1px solid var(--blk)' }}>
        <div style={{ padding: '56px 48px', display: 'flex', flexDirection: 'column', gap: 16, fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)' }}>
          <p style={{ margin: 0 }}>
            <b style={{ color: 'var(--blk)' }}>Black squirrels are a DC thing.</b> In the late 1800s the National Zoo
            released a handful. They didn't leave. You've seen them in Meridian Hill,
            on the Mall, on your block. We named the brand after them because they're local,
            stubborn, and look good in black.
          </p>
          <p style={{ margin: 0 }}>
            We make clothes the way we'd want them made. Heavyweight cotton.
            Screen-printed in the DMV. Boxy fits that don't pretend to be slim.
            One stupidly good red tee per drop, and a small rotation of black-and-white staples.
          </p>
          <p style={{ margin: 0 }}>
            We're small. Two people, a basement studio in Petworth, and a print partner
            in Hyattsville. If you email us, we'll write back.
          </p>
        </div>
        <div style={{
          background: 'var(--cream)', padding: '56px 48px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 28,
          borderLeft: '1px solid var(--blk)',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 64,
            textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 0.95,
          }}>"DC's other<br/>native species."</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 12 }}>
            <img src="../../assets/squirrel-mark.png" alt="" style={{ width: 64 }} />
            <div style={{ fontSize: 13, color: 'var(--fg-3)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              The mark · since 2019
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: '56px 48px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {[
          { k: '01', t: 'Made in the DMV', d: 'Cut and sewn locally where we can. Always screen-printed in Hyattsville, MD.' },
          { k: '02', t: 'Heavyweight cotton', d: '6oz on tees. 14oz brushed-back fleece on hoodies. Built to outlast the season.' },
          { k: '03', t: 'Small, on purpose', d: 'Two people, finite drops, no markdowns. If it sells out, it sells out.' },
        ].map(b => (
          <div key={b.k} style={{ borderTop: '2px solid var(--blk)', paddingTop: 16 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: 'var(--red)', letterSpacing: '0.08em' }}>{b.k}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, textTransform: 'uppercase', letterSpacing: '-0.01em', margin: '6px 0 8px' }}>{b.t}</div>
            <div style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.5 }}>{b.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.About = About;