// ClawdKnit Blog — Atelier imprint
// Editorial. Same vocabulary as atelier.html: Newsreader / Inter Tight / JetBrains Mono.
// Two top-level components: <BlogIndex> and <Article>. Both palette-aware.

const BLOG_PALETTES = {
  morning: { bg: "#f3eee5", fg: "#1a1714", muted: "rgba(26,23,20,.6)", line: "rgba(26,23,20,.15)", accent: "#a23b1f", soft: "#ebe4d6", paper: "#fffaf2" },
  late:    { bg: "#15110d", fg: "#f1e8d6", muted: "rgba(241,232,214,.55)", line: "rgba(241,232,214,.13)", accent: "#e8a35c", soft: "#1d1812", paper: "#1d1812" },
  linen:   { bg: "#faf6ec", fg: "#2a261f", muted: "rgba(42,38,31,.55)", line: "rgba(42,38,31,.12)", accent: "#7a4d2b", soft: "#f1ebdc", paper: "#ffffff" },
};

const DISPLAY = "'Newsreader', Georgia, serif";
const BODY = "'Inter Tight', system-ui, sans-serif";
const MONO = "'JetBrains Mono', monospace";

// ─────────────────────────────────────────────────────────────
// POSTS — index of articles. Each article HTML file passes its
// own copy to <Article>; this list is the listing on the index.
// ─────────────────────────────────────────────────────────────
const POSTS = [
  {
    slug: "ai-for-small-business",
    issue: "No. 01",
    date: "March 1, 2026",
    kicker: "The Foundation",
    title: "How AI assistants are transforming small businesses in 2026",
    dek: "From automated customer support to intelligent scheduling, AI assistants are no longer a luxury reserved for enterprise. Here's what they actually do — and why this is the year to start.",
    minutes: 7,
    sector: "General",
  },
  {
    slug: "ai-for-restaurants",
    issue: "No. 02",
    date: "February 24, 2026",
    kicker: "Hospitality",
    title: "AI for restaurants: reservations, orders, and the calm dining room",
    dek: "Restaurants run on tight margins and tighter schedules. AI assistants can handle reservations, supplier orders, and review management — giving owners their evenings back.",
    minutes: 6,
    sector: "Restaurants",
  },
  {
    slug: "ai-for-real-estate",
    issue: "No. 03",
    date: "February 17, 2026",
    kicker: "Real Estate",
    title: "Why every real estate agent needs an AI assistant in 2026",
    dek: "Speed kills deals — or saves them. Agents who respond in minutes instead of hours close more. Here's how AI makes that possible without burning out.",
    minutes: 5,
    sector: "Real Estate",
  },
  {
    slug: "ai-for-law-firms",
    issue: "No. 04",
    date: "February 10, 2026",
    kicker: "Legal",
    title: "AI assistants for law firms: drafts, deadlines, and discretion",
    dek: "Legal work is detail-heavy and deadline-driven. AI can draft documents, manage intake, and track critical dates — without compromising client confidentiality.",
    minutes: 8,
    sector: "Legal",
  },
  {
    slug: "ai-for-healthcare",
    issue: "No. 05",
    date: "February 3, 2026",
    kicker: "Healthcare",
    title: "How AI is streamlining medical and dental practices",
    dek: "From appointment reminders to insurance verification, AI is helping practices reduce admin overhead and return their attention to patient care.",
    minutes: 6,
    sector: "Healthcare",
  },
];

window.BLOG_POSTS = POSTS;

// ─────────────────────────────────────────────────────────────
// Shared chrome — top nav + masthead + footer
// ─────────────────────────────────────────────────────────────
function BlogNav({ palette, pad }) {
  return (
    <header style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: `24px ${pad}px`, borderBottom: `1px solid ${palette.line}`,
      position: "sticky", top: 0, background: palette.bg, zIndex: 10,
      backdropFilter: "saturate(140%) blur(6px)",
    }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
        <a href="../atelier.html" style={{
          fontFamily: DISPLAY, fontSize: 24, fontWeight: 600, letterSpacing: "-.02em",
          color: palette.fg, textDecoration: "none",
        }}>ClawdKnit</a>
        <span style={{ fontFamily: MONO, fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: palette.muted }}>
          The Field Notes · A blog
        </span>
      </div>
      <nav style={{ display: "flex", gap: 32, fontFamily: MONO, fontSize: 12, letterSpacing: ".06em", textTransform: "uppercase", alignItems: "center" }}>
        <a href="./index.html" style={{ color: palette.fg, textDecoration: "none" }}>Issues</a>
        <a href="../atelier.html#what" style={{ color: palette.fg, textDecoration: "none" }}>What we do</a>
        <a href="../atelier.html#pricing" style={{ color: palette.fg, textDecoration: "none" }}>Pricing</a>
        <a href="../atelier.html" style={{ color: palette.muted, textDecoration: "none" }}>← Main site</a>
        <a href="../atelier.html#contact" style={{ color: palette.accent, textDecoration: "none" }}>Book →</a>
      </nav>
    </header>
  );
}

function BlogFooter({ palette, pad }) {
  return (
    <footer style={{
      padding: `40px ${pad}px`, fontFamily: MONO, fontSize: 11, letterSpacing: ".06em",
      color: palette.muted, display: "flex", justifyContent: "space-between",
      flexWrap: "wrap", gap: 16, textTransform: "uppercase",
      borderTop: `1px solid ${palette.line}`,
    }}>
      <span>© 2026 ClawdKnit · The Field Notes</span>
      <span>
        <a href="./index.html" style={{ color: palette.muted, textDecoration: "none" }}>All issues</a>
        <span style={{ margin: "0 12px" }}>·</span>
        <a href="../atelier.html" style={{ color: palette.muted, textDecoration: "none" }}>Main site</a>
        <span style={{ margin: "0 12px" }}>·</span>
        <a href="../atelier.html#contact" style={{ color: palette.muted, textDecoration: "none" }}>Contact</a>
      </span>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// Striped placeholder image — same vocabulary as atelier
// ─────────────────────────────────────────────────────────────
function PlaceholderArt({ label, palette, h = 360, tone = "warm" }) {
  // Tones rotate so the listing has visual variety without imagery.
  const tones = {
    warm: `repeating-linear-gradient(135deg, ${palette.accent}1a 0 8px, transparent 8px 18px), ${palette.soft}`,
    cool: `repeating-linear-gradient(45deg, ${palette.fg}10 0 6px, transparent 6px 14px), ${palette.soft}`,
    flat: `${palette.soft}`,
    rule: `repeating-linear-gradient(0deg, ${palette.line} 0 1px, transparent 1px 12px), ${palette.bg}`,
  };
  return (
    <div style={{
      width: "100%", height: h, background: tones[tone] || tones.warm,
      border: `1px solid ${palette.line}`,
      display: "flex", alignItems: "flex-end", justifyContent: "space-between",
      padding: 20, position: "relative", overflow: "hidden",
    }}>
      <span style={{ fontFamily: MONO, fontSize: 10, letterSpacing: ".15em", textTransform: "uppercase", color: palette.muted }}>
        [ {label} ]
      </span>
      <span style={{ fontFamily: MONO, fontSize: 10, letterSpacing: ".15em", textTransform: "uppercase", color: palette.muted }}>
        Plate · drop image
      </span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BLOG INDEX — three layouts, switchable via Tweaks
// ─────────────────────────────────────────────────────────────
function BlogIndex({ imprint = "morning", layout = "editorial", cadence = "measured" }) {
  const palette = BLOG_PALETTES[imprint] || BLOG_PALETTES.morning;
  const cadencePad = cadence === "slow" ? 112 : cadence === "brisk" ? 56 : 80;
  const pad = cadencePad;

  return (
    <div style={{ background: palette.bg, color: palette.fg, fontFamily: BODY, fontSize: 16, lineHeight: 1.6, minHeight: "100vh" }}>
      <BlogNav palette={palette} pad={pad} />

      {/* MASTHEAD */}
      <section style={{ padding: `${pad}px ${pad}px ${pad * 0.7}px`, borderBottom: `1px solid ${palette.line}` }}>
        <FadeUp>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
            <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase" }}>
              The Field Notes · {POSTS.length} issues · Vol. I
            </div>
            <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase" }}>
              Updated {POSTS[0].date}
            </div>
          </div>
        </FadeUp>
        <FadeUp delay={120}>
          <h1 style={{
            fontFamily: DISPLAY,
            fontSize: cadence === "slow" ? "clamp(56px, 8vw, 144px)" : cadence === "brisk" ? "clamp(44px, 6.4vw, 104px)" : "clamp(48px, 7vw, 124px)",
            fontWeight: 400, lineHeight: 0.95, letterSpacing: "-.025em", margin: 0,
            textWrap: "balance", maxWidth: "12ch",
          }}>
            Field Notes <em style={{ fontStyle: "italic", color: palette.accent }}>on AI</em><br/>for small business.
          </h1>
        </FadeUp>
        <FadeUp delay={300}>
          <p style={{ marginTop: 32, fontSize: 19, lineHeight: 1.55, maxWidth: 580, color: palette.muted }}>
            What we've learned, sector by sector, putting AI assistants into real businesses. No theatre. No predictions.
            What worked, what didn't, and what we'd build first.
          </p>
        </FadeUp>
      </section>

      {/* LISTING — switches based on layout */}
      {layout === "editorial" && <EditorialList posts={POSTS} palette={palette} pad={pad} />}
      {layout === "reading"   && <ReadingList   posts={POSTS} palette={palette} pad={pad} />}
      {layout === "catalog"   && <CatalogList   posts={POSTS} palette={palette} pad={pad} />}

      {/* CONTACT STRIP */}
      <section style={{ padding: `${pad * 0.9}px ${pad}px`, background: palette.fg, color: palette.bg, borderTop: `1px solid ${palette.line}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
          <h2 style={{ fontFamily: DISPLAY, fontSize: "clamp(36px, 4.5vw, 64px)", fontWeight: 400, lineHeight: 1.05, letterSpacing: "-.02em", margin: 0 }}>
            Reading is one thing. <em style={{ color: palette.accent }}>Building</em> is another.
          </h2>
          <div style={{ textAlign: "right" }}>
            <a href="../atelier.html#contact" style={{
              display: "inline-block", padding: "18px 32px",
              background: palette.accent, color: palette.bg,
              fontFamily: MONO, fontSize: 13, letterSpacing: ".08em", textTransform: "uppercase",
              textDecoration: "none",
            }}>Book a free consultation →</a>
            <div style={{ fontFamily: MONO, fontSize: 11, color: palette.bg, opacity: .55, letterSpacing: ".05em", marginTop: 16 }}>
              30 minutes. Free. Real numbers, real timeline.
            </div>
          </div>
        </div>
      </section>

      <BlogFooter palette={palette} pad={pad} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LAYOUT A — Editorial. Numbered list. Hard rules. Mono meta.
// One lead article gets a striped plate; rest are typographic.
// ─────────────────────────────────────────────────────────────
function EditorialList({ posts, palette, pad }) {
  const [lead, ...rest] = posts;
  return (
    <section style={{ padding: `${pad * 0.7}px ${pad}px ${pad}px`, borderBottom: `1px solid ${palette.line}` }}>
      <FadeUp>
        <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 24 }}>
          § The Lead
        </div>
      </FadeUp>

      {/* LEAD */}
      <FadeUp delay={120}>
        <a href={`./${lead.slug}.html`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
          <article style={{
            display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "stretch",
            paddingBottom: 56, borderBottom: `1px solid ${palette.line}`,
          }}>
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24, fontFamily: MONO, fontSize: 11, letterSpacing: ".1em", color: palette.muted, textTransform: "uppercase" }}>
                  <span>{lead.issue}</span>
                  <span style={{ width: 24, height: 1, background: palette.line }} />
                  <span>{lead.date}</span>
                  <span style={{ width: 24, height: 1, background: palette.line }} />
                  <span style={{ color: palette.accent }}>{lead.kicker}</span>
                </div>
                <h2 style={{
                  fontFamily: DISPLAY, fontSize: "clamp(40px, 4.5vw, 68px)", fontWeight: 400,
                  lineHeight: 1.04, letterSpacing: "-.022em", margin: 0, textWrap: "balance",
                }}>
                  {lead.title}
                </h2>
                <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.55, color: palette.muted, maxWidth: 520 }}>
                  {lead.dek}
                </p>
              </div>
              <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 20, borderTop: `1px solid ${palette.line}` }}>
                <span style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".08em", color: palette.muted, textTransform: "uppercase" }}>
                  Read · {lead.minutes} min
                </span>
                <span style={{ fontFamily: MONO, fontSize: 12, color: palette.accent, letterSpacing: ".06em", textTransform: "uppercase" }}>
                  Open issue →
                </span>
              </div>
            </div>
            <PlaceholderArt label={`Plate · ${lead.kicker}`} palette={palette} h={420} tone="warm" />
          </article>
        </a>
      </FadeUp>

      {/* THE REST — numbered list */}
      <div style={{ marginTop: 56 }}>
        <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 24 }}>
          § The Rest of the Issue
        </div>
        <div>
          {rest.map((p, i) => (
            <FadeUp key={p.slug} delay={120 + i * 80}>
              <a href={`./${p.slug}.html`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
                <BlogRow post={p} index={i + 2} palette={palette} />
              </a>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

function BlogRow({ post, index, palette }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid", gridTemplateColumns: "60px 140px 1fr 200px 100px",
        gap: 32, alignItems: "baseline", padding: "32px 0",
        borderTop: `1px solid ${palette.line}`,
        background: hover ? palette.soft : "transparent",
        paddingLeft: hover ? 16 : 0, paddingRight: hover ? 16 : 0,
        transition: "background .25s, padding .25s",
      }}
    >
      <div style={{ fontFamily: MONO, fontSize: 12, color: palette.muted, letterSpacing: ".1em" }}>
        {String(index).padStart(2, "0")} /
      </div>
      <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".1em", color: palette.muted, textTransform: "uppercase" }}>
        {post.date.split(",")[0]}
      </div>
      <div>
        <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: ".12em", color: palette.accent, textTransform: "uppercase", marginBottom: 8 }}>
          {post.kicker}
        </div>
        <h3 style={{ fontFamily: DISPLAY, fontSize: 28, fontWeight: 500, lineHeight: 1.15, letterSpacing: "-.012em", margin: 0, textWrap: "balance" }}>
          {post.title}
        </h3>
        <p style={{ marginTop: 10, color: palette.muted, fontSize: 15, lineHeight: 1.6, maxWidth: 620 }}>
          {post.dek}
        </p>
      </div>
      <div style={{ fontFamily: MONO, fontSize: 11, color: palette.muted, letterSpacing: ".06em", textTransform: "uppercase" }}>
        {post.sector}
      </div>
      <div style={{ fontFamily: MONO, fontSize: 12, color: hover ? palette.accent : palette.muted, letterSpacing: ".06em", textAlign: "right", textTransform: "uppercase", transition: "color .2s" }}>
        {post.minutes} min →
      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────
// LAYOUT B — Reading Room. Long single column. Lots of air.
// ─────────────────────────────────────────────────────────────
function ReadingList({ posts, palette, pad }) {
  return (
    <section style={{ padding: `${pad}px ${pad}px ${pad * 1.2}px`, borderBottom: `1px solid ${palette.line}` }}>
      <div style={{ maxWidth: 820, margin: "0 auto" }}>
        {posts.map((p, i) => (
          <FadeUp key={p.slug} delay={i * 100}>
            <a href={`./${p.slug}.html`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
              <article style={{
                padding: "64px 0", borderBottom: i === posts.length - 1 ? "none" : `1px solid ${palette.line}`,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24, fontFamily: MONO, fontSize: 11, letterSpacing: ".1em", color: palette.muted, textTransform: "uppercase" }}>
                  <span>{p.issue}</span>
                  <span style={{ width: 24, height: 1, background: palette.line }} />
                  <span>{p.date}</span>
                  <span style={{ width: 24, height: 1, background: palette.line }} />
                  <span style={{ color: palette.accent }}>{p.kicker}</span>
                  <span style={{ width: 24, height: 1, background: palette.line }} />
                  <span>{p.minutes} min read</span>
                </div>
                <h2 style={{
                  fontFamily: DISPLAY, fontSize: "clamp(36px, 4vw, 56px)", fontWeight: 400,
                  lineHeight: 1.05, letterSpacing: "-.02em", margin: 0, textWrap: "balance",
                }}>
                  {p.title}
                </h2>
                <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.7, color: palette.muted, maxWidth: 680 }}>
                  {p.dek}
                </p>
                <div style={{ marginTop: 28, fontFamily: MONO, fontSize: 12, color: palette.accent, letterSpacing: ".06em", textTransform: "uppercase" }}>
                  Continue reading →
                </div>
              </article>
            </a>
          </FadeUp>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// LAYOUT C — Catalog. Asymmetric grid with hover plates.
// ─────────────────────────────────────────────────────────────
function CatalogList({ posts, palette, pad }) {
  // Asymmetric: lead full-width, then 2x2 grid
  const [lead, ...rest] = posts;
  return (
    <section style={{ padding: `${pad * 0.7}px ${pad}px ${pad}px`, borderBottom: `1px solid ${palette.line}` }}>
      <FadeUp>
        <a href={`./${lead.slug}.html`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
          <CatalogCard post={lead} palette={palette} h={460} feature tone="warm" />
        </a>
      </FadeUp>
      <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
        {rest.map((p, i) => (
          <FadeUp key={p.slug} delay={i * 90}>
            <a href={`./${p.slug}.html`} style={{ textDecoration: "none", color: "inherit", display: "block", height: "100%" }}>
              <CatalogCard post={p} palette={palette} h={340} tone={["cool", "rule", "warm", "flat"][i % 4]} />
            </a>
          </FadeUp>
        ))}
      </div>
    </section>
  );
}

function CatalogCard({ post, palette, h, feature = false, tone = "warm" }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid",
        gridTemplateColumns: feature ? "1fr 1fr" : "1fr",
        gridTemplateRows: feature ? "auto" : "auto auto",
        gap: feature ? 0 : 0, height: "100%",
        border: `1px solid ${palette.line}`,
        background: hover ? palette.soft : "transparent",
        transition: "background .25s",
      }}
    >
      <PlaceholderArt label={post.kicker} palette={palette} h={h} tone={tone} />
      <div style={{ padding: 32, display: "flex", flexDirection: "column", justifyContent: "space-between", borderLeft: feature ? `1px solid ${palette.line}` : "none", borderTop: feature ? "none" : `1px solid ${palette.line}` }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20, fontFamily: MONO, fontSize: 10, letterSpacing: ".12em", color: palette.muted, textTransform: "uppercase" }}>
            <span>{post.issue}</span>
            <span style={{ width: 16, height: 1, background: palette.line }} />
            <span style={{ color: palette.accent }}>{post.kicker}</span>
          </div>
          <h2 style={{
            fontFamily: DISPLAY,
            fontSize: feature ? "clamp(32px, 3.4vw, 48px)" : 26,
            fontWeight: 500, lineHeight: 1.1, letterSpacing: "-.018em", margin: 0, textWrap: "balance",
          }}>
            {post.title}
          </h2>
          <p style={{ marginTop: 16, color: palette.muted, fontSize: feature ? 17 : 14, lineHeight: 1.6 }}>
            {post.dek}
          </p>
        </div>
        <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: MONO, fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase" }}>
          <span style={{ color: palette.muted }}>{post.date}</span>
          <span style={{ color: hover ? palette.accent : palette.muted, transition: "color .2s" }}>{post.minutes} min →</span>
        </div>
      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────
// ARTICLE — single post layout. Article HTML files invoke this.
// ─────────────────────────────────────────────────────────────
function Article({ slug, imprint = "morning", cadence = "measured", children }) {
  const palette = BLOG_PALETTES[imprint] || BLOG_PALETTES.morning;
  const cadencePad = cadence === "slow" ? 112 : cadence === "brisk" ? 56 : 80;
  const pad = cadencePad;

  const post = POSTS.find((p) => p.slug === slug) || POSTS[0];
  const idx = POSTS.findIndex((p) => p.slug === slug);
  const prev = idx > 0 ? POSTS[idx - 1] : null;
  const next = idx >= 0 && idx < POSTS.length - 1 ? POSTS[idx + 1] : null;

  // Reading progress
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const top = h.scrollTop || document.body.scrollTop;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? Math.min(1, Math.max(0, top / max)) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div style={{ background: palette.bg, color: palette.fg, fontFamily: BODY, fontSize: 16, lineHeight: 1.6, minHeight: "100vh" }}>
      {/* progress rail under sticky nav */}
      <div style={{ position: "fixed", left: 0, right: 0, top: 0, height: 2, zIndex: 50, pointerEvents: "none" }}>
        <div style={{ height: "100%", width: `${progress * 100}%`, background: palette.accent, transition: "width .1s linear" }} />
      </div>

      <BlogNav palette={palette} pad={pad} />

      {/* HEADER */}
      <section style={{ padding: `${pad}px ${pad}px ${pad * 0.5}px` }}>
        <FadeUp>
          <a href="./index.html" style={{
            fontFamily: MONO, fontSize: 11, letterSpacing: ".1em", color: palette.muted,
            textTransform: "uppercase", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            ← The Field Notes
          </a>
        </FadeUp>
        <FadeUp delay={100}>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 32, marginBottom: 24, fontFamily: MONO, fontSize: 11, letterSpacing: ".1em", color: palette.muted, textTransform: "uppercase", flexWrap: "wrap" }}>
            <span>{post.issue}</span>
            <span style={{ width: 24, height: 1, background: palette.line }} />
            <span>{post.date}</span>
            <span style={{ width: 24, height: 1, background: palette.line }} />
            <span style={{ color: palette.accent }}>{post.kicker}</span>
            <span style={{ width: 24, height: 1, background: palette.line }} />
            <span>{post.minutes} min read</span>
          </div>
        </FadeUp>
        <FadeUp delay={200}>
          <h1 style={{
            fontFamily: DISPLAY,
            fontSize: cadence === "slow" ? "clamp(44px, 6vw, 96px)" : cadence === "brisk" ? "clamp(36px, 4.4vw, 68px)" : "clamp(40px, 5.2vw, 84px)",
            fontWeight: 400, lineHeight: 1, letterSpacing: "-.025em", margin: 0,
            maxWidth: "16ch", textWrap: "balance",
          }}>
            {post.title}
          </h1>
        </FadeUp>
        <FadeUp delay={350}>
          <p style={{ marginTop: 32, fontSize: 22, lineHeight: 1.5, maxWidth: 720, color: palette.muted }}>
            {post.dek}
          </p>
        </FadeUp>
      </section>

      {/* HERO PLATE */}
      <section style={{ padding: `0 ${pad}px ${pad * 0.7}px` }}>
        <FadeUp delay={150}>
          <PlaceholderArt label={`Plate · ${post.kicker}`} palette={palette} h={Math.min(560, 480)} tone="warm" />
        </FadeUp>
      </section>

      {/* BODY — 2-col with sticky meta rail */}
      <section style={{ padding: `${pad * 0.4}px ${pad}px ${pad}px`, borderTop: `1px solid ${palette.line}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 64, alignItems: "start" }}>
          {/* sticky meta rail */}
          <aside style={{ position: "sticky", top: 96, fontFamily: MONO, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: palette.muted }}>
            <div style={{ paddingTop: 32, borderTop: `1px solid ${palette.line}` }}>
              <div style={{ marginBottom: 24 }}>
                <div style={{ marginBottom: 6, opacity: .65 }}>Filed under</div>
                <div style={{ color: palette.fg }}>{post.sector}</div>
              </div>
              <div style={{ marginBottom: 24 }}>
                <div style={{ marginBottom: 6, opacity: .65 }}>Issue</div>
                <div style={{ color: palette.fg }}>{post.issue}</div>
              </div>
              <div style={{ marginBottom: 24 }}>
                <div style={{ marginBottom: 6, opacity: .65 }}>Published</div>
                <div style={{ color: palette.fg }}>{post.date}</div>
              </div>
              <div style={{ marginBottom: 24 }}>
                <div style={{ marginBottom: 6, opacity: .65 }}>Read time</div>
                <div style={{ color: palette.fg }}>{post.minutes} minutes</div>
              </div>
            </div>
          </aside>

          {/* article body */}
          <div className="ck-article" style={{
            maxWidth: 720, fontFamily: BODY, fontSize: 19, lineHeight: 1.75, color: palette.fg,
          }}>
            {children}
          </div>
        </div>
      </section>

      {/* CTA STRIP */}
      <section style={{ padding: `${pad * 0.7}px ${pad}px`, background: palette.fg, color: palette.bg, borderTop: `1px solid ${palette.line}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
          <h2 style={{ fontFamily: DISPLAY, fontSize: "clamp(32px, 4vw, 56px)", fontWeight: 400, lineHeight: 1.05, letterSpacing: "-.02em", margin: 0 }}>
            Want this <em style={{ color: palette.accent }}>built</em> for your business?
          </h2>
          <div style={{ textAlign: "right" }}>
            <a href="../atelier.html#contact" style={{
              display: "inline-block", padding: "18px 32px",
              background: palette.accent, color: palette.bg,
              fontFamily: MONO, fontSize: 13, letterSpacing: ".08em", textTransform: "uppercase",
              textDecoration: "none",
            }}>Book a free consultation →</a>
            <div style={{ fontFamily: MONO, fontSize: 11, color: palette.bg, opacity: .55, letterSpacing: ".05em", marginTop: 16 }}>
              30 minutes. Free. Real numbers.
            </div>
          </div>
        </div>
      </section>

      {/* PREV / NEXT */}
      <section style={{ padding: `${pad * 0.7}px ${pad}px`, borderTop: `1px solid ${palette.line}` }}>
        <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 24 }}>
          § Continue reading
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          {prev ? <PrevNextCard post={prev} dir="prev" palette={palette} /> : <div />}
          {next ? <PrevNextCard post={next} dir="next" palette={palette} /> : <div />}
        </div>
      </section>

      <BlogFooter palette={palette} pad={pad} />

      <style>{`
        .ck-article > p { margin: 0 0 1.4em; }
        .ck-article > p:first-child::first-letter {
          font-family: ${DISPLAY}; font-weight: 500;
          font-size: 5.2em; line-height: 0.9; float: left;
          margin: 0.05em 0.12em -0.1em -0.04em;
          color: ${palette.accent};
        }
        .ck-article h2 {
          font-family: ${DISPLAY}; font-weight: 500;
          font-size: 1.85em; line-height: 1.15; letter-spacing: -.012em;
          margin: 2.4em 0 0.7em; color: ${palette.fg};
          text-wrap: balance;
        }
        .ck-article h3 {
          font-family: ${DISPLAY}; font-weight: 500;
          font-size: 1.35em; line-height: 1.2; letter-spacing: -.008em;
          margin: 2em 0 0.5em; color: ${palette.fg};
        }
        .ck-article ul, .ck-article ol { margin: 0 0 1.6em 1.4em; padding: 0; }
        .ck-article li { margin: 0 0 0.6em; }
        .ck-article a { color: ${palette.accent}; text-decoration: underline; text-underline-offset: 3px; }
        .ck-article blockquote {
          margin: 2em 0; padding: 0 0 0 28px;
          border-left: 2px solid ${palette.accent};
          font-family: ${DISPLAY}; font-style: italic; font-size: 1.4em; line-height: 1.35;
          color: ${palette.fg};
        }
        .ck-article blockquote cite {
          display: block; margin-top: 14px;
          font-family: ${MONO}; font-style: normal; font-size: .55em;
          letter-spacing: .1em; text-transform: uppercase; color: ${palette.muted};
        }
        .ck-article hr {
          border: none; border-top: 1px solid ${palette.line};
          margin: 2.6em 0;
        }
        .ck-article .pull {
          font-family: ${DISPLAY}; font-style: italic; font-weight: 400;
          font-size: 1.55em; line-height: 1.25; letter-spacing: -.01em;
          color: ${palette.fg}; text-wrap: balance;
          margin: 1.6em 0; padding: 0.4em 0;
          border-top: 1px solid ${palette.line};
          border-bottom: 1px solid ${palette.line};
        }
        .ck-article .lede {
          font-family: ${DISPLAY}; font-weight: 400;
          font-size: 1.25em; line-height: 1.4; color: ${palette.muted};
          margin-bottom: 1.6em;
        }
        .ck-article .meta-list {
          list-style: none; margin: 1.6em 0; padding: 0;
          border-top: 1px solid ${palette.line};
        }
        .ck-article .meta-list li {
          padding: 16px 0; border-bottom: 1px solid ${palette.line};
          display: grid; grid-template-columns: 36px 1fr; gap: 16px;
          margin: 0;
        }
        .ck-article .meta-list li::before {
          content: attr(data-n);
          font-family: ${MONO}; font-size: 0.7em;
          letter-spacing: .08em; color: ${palette.accent};
          padding-top: 0.45em;
        }
      `}</style>
    </div>
  );
}

function PrevNextCard({ post, dir, palette }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={`./${post.slug}.html`}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        textDecoration: "none", color: "inherit", display: "block",
        padding: 24, border: `1px solid ${palette.line}`,
        background: hover ? palette.soft : "transparent",
        transition: "background .25s",
        textAlign: dir === "next" ? "right" : "left",
      }}
    >
      <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".1em", color: palette.muted, textTransform: "uppercase", marginBottom: 16 }}>
        {dir === "prev" ? "← Previous" : "Next →"} · {post.issue}
      </div>
      <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: ".12em", color: palette.accent, textTransform: "uppercase", marginBottom: 8 }}>
        {post.kicker}
      </div>
      <div style={{ fontFamily: DISPLAY, fontSize: 24, fontWeight: 500, lineHeight: 1.2, letterSpacing: "-.012em", textWrap: "balance" }}>
        {post.title}
      </div>
    </a>
  );
}

// ─────────────────────────────────────────────────────────────
// useSystemImprint — copied so blog files don't need atelier
// ─────────────────────────────────────────────────────────────
function useSystemImprint(setting) {
  const getSysImprint = () =>
    (typeof window !== "undefined" && window.matchMedia &&
     window.matchMedia("(prefers-color-scheme: dark)").matches) ? "late" : "morning";
  const [sys, setSys] = React.useState(getSysImprint);
  React.useEffect(() => {
    if (!window.matchMedia) return;
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    const onChange = () => setSys(mq.matches ? "late" : "morning");
    mq.addEventListener ? mq.addEventListener("change", onChange) : mq.addListener(onChange);
    return () => {
      mq.removeEventListener ? mq.removeEventListener("change", onChange) : mq.removeListener(onChange);
    };
  }, []);
  return setting === "auto" ? sys : setting;
}

window.BlogIndex = BlogIndex;
window.Article = Article;
window.useSystemImprint = useSystemImprint;
window.BLOG_PALETTES = BLOG_PALETTES;