function ArchiveRecord() {
  const fields = [
    { k: "name", v: "Abdullahi Abdi" },
    { k: "also known as", v: <React.Fragment>Mulla · <span style={{ fontFamily: "'Noto Sans Shavian', serif" }}>𐑥𐑫𐑤𐑩</span></React.Fragment> },
    { k: "occupation", v: "Student, builder of small useful things" },
    { k: "studying", v: "CS & Economics, UMN '27" },
    { k: "filed from", v: "Minneapolis, Minnesota" },
    { k: "currently", v: "SpeakEz · Westinghouse Nuclear" },
    { k: "watching", v: <React.Fragment>Sentimental Value <Stars value={5} /></React.Fragment> },
    { k: "listening", v: "Mk.gee, on repeat" },
  ];

  return (
    <div style={{ background: "var(--paper-bright)", border: "1px solid var(--rule-strong)",
      borderRadius: 0, padding: 22 }}>
      <Kicker>Archive record</Kicker>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "1.3rem",
        lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--ink)", margin: "10px 0 4px" }}>
        Acc. No. 04 — Self
      </div>
      <Micro size={10} color="var(--ink-3)">class: person / builder</Micro>

      <div style={{ position: "relative", width: 92, height: 110, marginTop: 20,
        overflow: "hidden", borderRadius: 2,
        background: "linear-gradient(150deg, var(--earth-sienna), var(--earth-espresso))" }}>
        <span className="grain-field" />
        <img src="assets/headshot.png" alt="Mulla — archive portrait"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", objectPosition: "center top" }} />
      </div>

      <div style={{ marginTop: 22 }}>
        {fields.map((f, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "auto minmax(0,1fr)",
            gap: 16, alignItems: "baseline", padding: "11px 0",
            borderTop: i === 0 ? "none" : "1px solid var(--rule)" }}>
            <Micro size={9} color="var(--ink-3)">{f.k}</Micro>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.45,
              color: "var(--ink-2)", textAlign: "right" }}>{f.v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function About() {
  return (
    <section id="about" className="section" style={{ background: "var(--paper)" }}>
      <div className="cols cols--about">
        <Reveal>
          <Kicker>— About</Kicker>
          <p style={{ fontFamily: "var(--font-display)", fontWeight: 300,
            fontSize: "clamp(2rem,3.6vw,3.2rem)", lineHeight: 1.02, letterSpacing: "-0.03em",
            color: "var(--ink)", margin: "18px 0 0", maxWidth: "20ch" }}>
            I like to code. I like film. I like to write. Mostly, I like the space where they overlap.
          </p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "1.05rem", lineHeight: 1.6,
            color: "var(--ink-2)", maxWidth: "52ch", margin: "28px 0 0" }}>
            I'm a computer science and economics student at the University of Minnesota, finishing in December 2027. This year I'm on the software team at Westinghouse Nuclear, running WunderBar on the side, and helping run ColorStack on campus.
          </p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "1.05rem", lineHeight: 1.6,
            color: "var(--ink-2)", maxWidth: "52ch", margin: "18px 0 0" }}>
            The rest of the time I'm logging films (412 and counting), scrobbling more Mk.gee than is reasonable, and transliterating margin notes into Shavian. This site is an archive of the things that interest and intrigue me, kept in the open and free to take.
          </p>
          <div style={{ fontFamily: "var(--font-annotation)", fontSize: 24, lineHeight: 1.1,
            color: "var(--vermilion)", transform: "rotate(-2deg)", margin: "28px 0 0" }}>
            — with love, Mulla
          </div>
        </Reveal>

        <Reveal delay={80}>
          <ArchiveRecord />
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { About });