(function(){
/* global React */
// CCC Launch Kit — eight production artboards.
// Brand rules: Frank Ruhl Libre + Inter; Inkwell/Vellum/Sage/Oxblood/Charcoal;
// sentence case; tally ▍▍▍ as recurring stamp; "Blue skies and green lights." sign-off.
// ONE dominant move per surface (50–70% of frame).
// Each headline unique. Illustrated portrait appears ONCE — Landscape Referral only.

const C = {
  inkwell: "#1C492C",
  vellum: "#F4F0C2",
  sage: "#AFCC75",
  oxblood: "#4B781C",
  charcoal: "#22382A"
};

const FONT_DISPLAY = `"Frank Ruhl Libre", "Tiempos Headline", Georgia, serif`;
const FONT_BODY = `"Inter", "Söhne", "GT America", -apple-system, sans-serif`;
const FONT_MONO = `"JetBrains Mono", ui-monospace, "SF Mono", monospace`;

// ─── Tally — three strokes; the recurring brand stamp ────────────────────
function Tally({ size = 24, color = "currentColor", strokeWidth = 2.4 }) {
  const w = size * 1.6;
  const h = size;
  return (
    <svg width={w} height={h} viewBox="0 0 48 30" fill="none" aria-hidden="true" style={{ display: "block" }}>
      <path d="M8 3.2 L7.2 27.4" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
      <path d="M19 2.6 L19.4 27.8" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
      <path d="M30 3.6 L29.6 27.2" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
    </svg>);

}

function CCCMono({ children, color = C.charcoal, size = 10, style = {} }) {
  return (
    <div style={{
      fontFamily: FONT_MONO, fontSize: size, letterSpacing: "0.14em",
      textTransform: "uppercase", color, ...style
    }}>{children}</div>);

}

function CCCRule({ color = "currentColor", thickness = 1, style = {} }) {
  return <div style={{ height: thickness, background: color, width: "100%", ...style }} />;
}

// Hand-drawn oxblood underline.
function Underline({ color = C.oxblood, thickness = 4, bottom = -8 }) {
  return (
    <svg width="100%" height={thickness * 3 + 4} viewBox="0 0 600 14" preserveAspectRatio="none"
    style={{ position: "absolute", left: 0, bottom, pointerEvents: "none" }}>
      <path d="M2 7 Q 150 2, 300 7 T 598 7" stroke={color} strokeWidth={thickness} fill="none" strokeLinecap="round" />
    </svg>);

}

// Shared scannable QR — implemented in lib-brand-system.jsx (CCC_QRCode).
// Renders the website QR on print pieces; quiet placeholder if missing.
function QRCode(props) {
  const Impl = window.CCC_QRCode;
  if (!Impl) return <div style={{ width: props.size || 100, height: props.size || 100, background: props.bg || C.vellum }} />;
  return <Impl {...props} />;
}

// ─────────────────────────────────────────────────────────────────────────
// 1. PRINT FLYER — EVERGREEN  (8.5 × 11, Vellum)
//    Dominant: "Recovery is possible." 220 pt FRL, upper two-thirds.
//    Sub: "You're worth it." italic, oxblood-underlined, 60 pt.
// ─────────────────────────────────────────────────────────────────────────
function FlyerEvergreen() {
  return (
    <div style={{
      width: "100%", height: "100%", background: C.vellum, color: C.inkwell,
      fontFamily: FONT_BODY, position: "relative",
      padding: "60px 64px 56px",
      display: "flex", flexDirection: "column"
    }}>
      {/* tiny header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <CCCMono color={C.inkwell} size={10}>Chances. Choices. Changes.</CCCMono>
        <CCCMono color={`${C.inkwell}88`} size={10}>An eight-week peer-led recovery program</CCCMono>
      </div>
      <CCCRule color={`${C.inkwell}55`} style={{ marginTop: 14 }} />

      {/* dominant — fills upper two-thirds */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-start", paddingTop: 40 }}>
        <h1 style={{
          fontFamily: FONT_DISPLAY, fontWeight: 500, margin: 0,
          // rendered artboard is 850 wide minus 128 padding = 722 usable.
          fontSize: 158, lineHeight: 0.88, letterSpacing: "-0.04em",
          color: C.inkwell, textAlign: "left"
        }}>
          Recovery<br />is&nbsp;possible.
        </h1>

        <div style={{ marginTop: 36, position: "relative", display: "inline-block", alignSelf: "flex-start" }}>
          <span style={{
            fontFamily: FONT_DISPLAY, fontStyle: "italic", fontWeight: 400,
            fontSize: 60, lineHeight: 1, letterSpacing: "-0.02em", color: C.inkwell
          }}>
            You're worth it.
          </span>
          <svg width="100%" height="10" viewBox="0 0 480 10" preserveAspectRatio="none"
          style={{ position: "absolute", left: 0, bottom: -6 }}>
            <path d="M2 5 Q 120 1, 240 5 T 478 5" stroke={C.oxblood} strokeWidth="3.5" fill="none" strokeLinecap="round" />
          </svg>
        </div>
      </div>

      {/* bottom band — body + contact + tally */}
      <div style={{ marginTop: 24 }}>
        <CCCRule color={`${C.inkwell}55`} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 40, paddingTop: 22, alignItems: "flex-end" }}>
          <p style={{
            fontFamily: FONT_BODY, fontSize: 14, lineHeight: 1.55,
            color: C.charcoal, margin: 0, maxWidth: 460
          }}>Eight Mondays. A small group. Honest conversation about the work of staying sober — daytimers and to-do lists, boundaries and phone calls, quality over quantity. Led by Debra King, with lived experience, understanding, and the language to match.




          </p>
          <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end", gap: 24 }}>
            <div style={{ textAlign: "right" }}>
              <div style={{ display: "flex", justifyContent: "flex-end" }}>
                <Tally size={20} color={C.inkwell} strokeWidth={2.2} />
              </div>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 17, color: C.inkwell, letterSpacing: "-0.005em", marginTop: 12, whiteSpace: "nowrap" }}>
                (289) 207-2617 · cccrecovery.ca
              </div>
              <CCCMono color={`${C.inkwell}88`} size={9} style={{ marginTop: 10 }}>
                Blue skies and green lights.
              </CCCMono>
            </div>
            <div style={{ flexShrink: 0 }}>
              <QRCode value="https://cccrecovery.ca" size={104} fg={C.inkwell} bg={C.vellum} quiet={2} />
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 2. PRINT FLYER — COHORT LAUNCH  (8.5 × 11, Inkwell)
//    Dominant: "JUNE 1." 320 pt FRL cream on navy, fills upper half.
// ─────────────────────────────────────────────────────────────────────────
function FlyerCohort() {
  return (
    <div style={{
      width: "100%", height: "100%", background: C.inkwell, color: C.vellum,
      fontFamily: FONT_BODY, position: "relative",
      padding: "60px 64px 56px",
      display: "flex", flexDirection: "column"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <CCCMono color={C.vellum} size={10}>Chances. Choices. Changes.</CCCMono>
        <CCCMono color={C.sage} size={10}>Now enrolling · Cohort 01</CCCMono>
      </div>
      <CCCRule color={`${C.vellum}55`} style={{ marginTop: 14 }} />

      {/* DATE = the page */}
      <div style={{
        flex: 1, display: "flex", flexDirection: "column",
        justifyContent: "center", paddingTop: 24
      }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontWeight: 500,
          fontSize: 320, lineHeight: 0.84, letterSpacing: "-0.045em",
          color: C.vellum, marginLeft: -8
        }}>
          June 1.
        </div>

        <CCCMono color={C.sage} size={14} style={{ marginTop: 36, letterSpacing: "0.18em" }}>
          Eight Mondays · 7–9 p.m. · Cohort 01
        </CCCMono>

        <div style={{
          marginTop: 28,
          fontFamily: FONT_DISPLAY, fontStyle: "italic", fontWeight: 400,
          fontSize: 40, lineHeight: 1.05, letterSpacing: "-0.018em",
          color: C.vellum
        }}>
          The work of staying sober.
        </div>
      </div>

      {/* bottom band — pricing, contact, tally */}
      <div>
        <CCCRule color={`${C.vellum}55`} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, paddingTop: 22, alignItems: "flex-end" }}>
          <div>
            <CCCMono color={`${C.vellum}88`} size={9}>Tuition</CCCMono>
            <div style={{ marginTop: 8, fontFamily: FONT_DISPLAY, fontSize: 22, color: C.vellum, lineHeight: 1.2 }}>
              $249 founders' rate<br />$499 regular
            </div>
          </div>
          <div style={{ textAlign: "center" }}>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <Tally size={20} color={C.vellum} strokeWidth={2.2} />
            </div>
            <CCCMono color={`${C.vellum}88`} size={9} style={{ marginTop: 12 }}>
              Blue skies and green lights.
            </CCCMono>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end", gap: 18 }}>
            <div style={{ textAlign: "right" }}>
              <CCCMono color={`${C.vellum}88`} size={9}>Apply</CCCMono>
              <div style={{ marginTop: 8, fontFamily: FONT_DISPLAY, fontSize: 18, color: C.vellum, lineHeight: 1.3 }}>
                cccrecovery.ca<br />(289) 207-2617
              </div>
            </div>
            <div style={{ background: C.vellum, padding: 8 }}>
              <QRCode value="https://cccrecovery.ca" size={88} fg={C.inkwell} bg={C.vellum} quiet={2} />
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 3. IG SQUARE — BRAND INTRO  (1080 × 1080, Vellum)
//    Dominant: frontispiece, "You're not behind. / You're exactly where..."
//    "exactly where" oxblood-underlined.
// ─────────────────────────────────────────────────────────────────────────
function IGIntro() {
  return (
    <div style={{
      width: "100%", height: "100%", background: C.vellum, color: C.inkwell,
      fontFamily: FONT_BODY,
      padding: "70px 64px",
      display: "flex", flexDirection: "column", justifyContent: "space-between"
    }}>
      {/* tiny header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <CCCMono color={`${C.inkwell}88`} size={11}>Frontispiece</CCCMono>
        <CCCMono color={`${C.inkwell}88`} size={11}>Cohort 01</CCCMono>
      </div>

      {/* Monumental headline */}
      <div style={{
        fontFamily: FONT_DISPLAY, fontWeight: 500,
        fontSize: 144, lineHeight: 0.94, letterSpacing: "-0.034em",
        color: C.inkwell, textWrap: "balance"
      }}>
        You're not<br />behind.<br />
        <span style={{ display: "inline-block", marginTop: 8 }}>
          You're{" "}
          <span style={{ position: "relative", display: "inline-block" }}>
            exactly where
            <svg width="100%" height="14" viewBox="0 0 600 14" preserveAspectRatio="none"
            style={{ position: "absolute", left: 0, bottom: -8 }}>
              <path d="M2 7 Q 150 2, 300 7 T 598 7" stroke={C.oxblood} strokeWidth="4" fill="none" strokeLinecap="round" />
            </svg>
          </span>
          <br />you're supposed<br />to be.
        </span>
      </div>

      {/* Footer — tally + small caps */}
      <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
        <Tally size={22} color={C.inkwell} strokeWidth={2.4} />
        <CCCMono color={C.inkwell} size={11}>Chances. Choices. Changes.</CCCMono>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 4. IG SQUARE — INSPIRATIONAL  (1080 × 1080, Inkwell)
//    Dominant: "You're worth it." italic FRL, oxblood under "worth".
// ─────────────────────────────────────────────────────────────────────────
function IGInspirational() {
  return (
    <div style={{
      width: "100%", height: "100%", background: C.inkwell, color: C.vellum,
      fontFamily: FONT_BODY,
      padding: "70px 64px",
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      position: "relative"
    }}>
      {/* small caps overline */}
      <div>
        <CCCMono color={C.sage} size={12} style={{ letterSpacing: "0.22em" }}>
          Eight Mondays · The work of staying sober
        </CCCMono>
      </div>

      {/* monumental italic */}
      <div style={{
        fontFamily: FONT_DISPLAY, fontStyle: "italic", fontWeight: 400,
        fontSize: 240, lineHeight: 0.94, letterSpacing: "-0.034em",
        color: C.vellum
      }}>
        You're<br />
        <span style={{ position: "relative", display: "inline-block" }}>
          worth
          <svg width="100%" height="14" viewBox="0 0 380 14" preserveAspectRatio="none"
          style={{ position: "absolute", left: 0, bottom: -4 }}>
            <path d="M2 7 Q 95 2, 190 7 T 378 7" stroke={C.oxblood} strokeWidth="5" fill="none" strokeLinecap="round" />
          </svg>
        </span>
        {" "}it.
      </div>

      {/* footer */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <Tally size={22} color={C.vellum} strokeWidth={2.4} />
          <CCCMono color={`${C.vellum}cc`} size={11}>Blue skies and green lights.</CCCMono>
        </div>
        <CCCMono color={`${C.vellum}88`} size={11}>cccrecovery.ca</CCCMono>
      </div>

      {/* quiet companion mark — inverted phone, lower-right */}
      <div style={{
        position: "absolute", right: 56, bottom: 130,
        opacity: 0.18, pointerEvents: "none"
      }}>
        <img src="launch-assets/phone-coffee.png" alt=""
        style={{
          width: 200, height: 200, objectFit: "contain",
          filter: "invert(1) brightness(1.2)"
        }} />
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 5. IG SQUARE — COHORT LAUNCH PROMO  (1080 × 1080, Vellum)
//    Dominant: "JUNE 1." ~480pt FRL on Vellum, upper two-thirds.
// ─────────────────────────────────────────────────────────────────────────
function IGCohort() {
  return (
    <div style={{
      width: "100%", height: "100%", background: C.vellum, color: C.inkwell,
      fontFamily: FONT_BODY,
      padding: "60px 60px 60px",
      display: "flex", flexDirection: "column"
    }}>
      <CCCMono color={C.oxblood} size={12} style={{ letterSpacing: "0.22em" }}>
        Now enrolling · Cohort 01
      </CCCMono>

      {/* the date */}
      <div style={{
        flex: 1, display: "flex", flexDirection: "column", justifyContent: "center",
        marginTop: 8, marginBottom: 8
      }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontWeight: 500,
          // ~480pt on a 1080 square → ~480px
          fontSize: 480, lineHeight: 0.84, letterSpacing: "-0.05em",
          color: C.inkwell, marginLeft: -10
        }}>
          June 1.
        </div>

        <div style={{
          marginTop: 24,
          fontFamily: FONT_DISPLAY, fontStyle: "italic", fontWeight: 400,
          fontSize: 40, lineHeight: 1.1, letterSpacing: "-0.018em",
          color: C.charcoal
        }}>
          Eight Mondays. The work of staying sober.
        </div>
      </div>

      {/* footer band */}
      <div>
        <CCCRule color={`${C.inkwell}55`} />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 18 }}>
          <CCCMono color={C.inkwell} size={11}>$249 founders' · $499 regular · cccrecovery.ca</CCCMono>
          <Tally size={20} color={C.inkwell} strokeWidth={2.2} />
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 6. STORY — EVERGREEN  (1080 × 1920, Vellum)
//    Dominant: FEAR acrostic as full vertical spine.
// ─────────────────────────────────────────────────────────────────────────
function StoryEvergreen() {
  const rows = [
  ["F", "uck"],
  ["E", "verything"],
  ["A", "nd"],
  ["R", "ecover"]];

  return (
    <div style={{
      width: "100%", height: "100%", background: C.vellum, color: C.inkwell,
      fontFamily: FONT_BODY,
      padding: "70px 64px",
      display: "flex", flexDirection: "column"
    }}>
      {/* header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Tally size={26} color={C.inkwell} strokeWidth={2.4} />
        <CCCMono color={C.oxblood} size={11}>F.E.A.R. — and what to do with it</CCCMono>
      </div>

      {/* acrostic — the spine */}
      <div style={{
        flex: 1, display: "flex", flexDirection: "column",
        justifyContent: "space-evenly", paddingTop: 24
      }}>
        {rows.map(([L, rest], i) =>
        <div key={i} style={{
          display: "flex", alignItems: "baseline", gap: 28,
          borderBottom: i < rows.length - 1 ? `1px solid ${C.inkwell}22` : "none",
          paddingBottom: 16
        }}>
            <span style={{
            fontFamily: FONT_DISPLAY, fontWeight: 500, fontSize: 260,
            lineHeight: 0.86, letterSpacing: "-0.04em", color: C.oxblood,
            width: 200, display: "inline-block"
          }}>{L}</span>
            <span style={{
            fontFamily: FONT_DISPLAY, fontWeight: 400, fontSize: 80,
            lineHeight: 0.95, letterSpacing: "-0.02em", color: C.charcoal
          }}>{rest}</span>
          </div>
        )}
      </div>

      {/* Debra-voice line */}
      <div style={{
        fontFamily: FONT_DISPLAY, fontStyle: "italic", fontWeight: 400,
        fontSize: 32, lineHeight: 1.35, letterSpacing: "-0.012em",
        color: C.inkwell, marginTop: 28, maxWidth: 880
      }}>
        Some weeks recovery is a list of phone calls<br />
        you didn't make.<br />
        Today is not one of those weeks.
      </div>

      <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <CCCMono color={C.inkwell} size={11}>cccrecovery.ca</CCCMono>
        <CCCMono color={`${C.inkwell}88`} size={11}>Blue skies and green lights.</CCCMono>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 7. STORY — COHORT LAUNCH  (1080 × 1920, Inkwell)
//    Dominant: "JUNE 1." ~600pt vertical scale, fills upper half.
// ─────────────────────────────────────────────────────────────────────────
function StoryCohort() {
  return (
    <div style={{
      width: "100%", height: "100%", background: C.inkwell, color: C.vellum,
      fontFamily: FONT_BODY,
      padding: "70px 64px",
      display: "flex", flexDirection: "column"
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <CCCMono color={C.sage} size={12} style={{ letterSpacing: "0.22em" }}>
          Day one · Cohort 01
        </CCCMono>
        <Tally size={26} color={C.vellum} strokeWidth={2.4} />
      </div>

      {/* monumental date — fills upper half */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-start", paddingTop: 32 }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontWeight: 500,
          fontSize: 520, lineHeight: 0.84, letterSpacing: "-0.05em",
          color: C.vellum, marginLeft: -12
        }}>
          June<br />1.
        </div>
      </div>

      {/* middle band */}
      <div style={{ borderTop: `1px solid ${C.vellum}33`, borderBottom: `1px solid ${C.vellum}33`, padding: "26px 0", margin: "24px 0" }}>
        <CCCMono color={C.vellum} size={20} style={{ letterSpacing: "0.18em" }}>
          Eight Mondays · 7–9 p.m. · $249
        </CCCMono>
      </div>

      {/* bottom band */}
      <div>
        <CCCMono color={`${C.vellum}cc`} size={14} style={{ letterSpacing: "0.18em" }}>
          Apply at cccrecovery.ca · (289) 207-2617
        </CCCMono>
        <div style={{ marginTop: 22, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Tally size={26} color={C.vellum} strokeWidth={2.4} />
          <CCCMono color={`${C.vellum}88`} size={12}>Blue skies and green lights.</CCCMono>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 8. LANDSCAPE — REFERRAL  (1200 × 630, Vellum)
//    LEFT 40%: Debra illustrated portrait at FEATURE scale (full vertical).
//    RIGHT 60%: headline + body + contact.
//    The ONLY artboard with the illustrated portrait.
// ─────────────────────────────────────────────────────────────────────────
function LandscapeReferral() {
  return (
    <div style={{
      width: "100%", height: "100%", background: C.vellum, color: C.inkwell,
      fontFamily: FONT_BODY,
      display: "grid", gridTemplateColumns: "0.4fr 0.6fr"
    }}>
      {/* LEFT — portrait at feature scale */}
      <div style={{
        position: "relative", padding: "32px 24px 32px 36px",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        borderRight: `1px solid ${C.inkwell}22`,
        background: `linear-gradient(180deg, ${C.vellum} 0%, #ECE3CF 100%)`
      }}>
        <img src="launch-assets/debra-illustrated.png" alt="Debra King — illustrated portrait"
        style={{
          position: "absolute",
          top: 0, left: "50%", transform: "translateX(-50%)",
          height: "100%", width: "auto", maxWidth: "100%",
          objectFit: "contain", objectPosition: "center"
        }} />
        <div style={{ position: "relative", zIndex: 2 }}>
          <Tally size={18} color={C.inkwell} strokeWidth={2.2} />
          <CCCMono color={C.inkwell} size={9} style={{ marginTop: 8 }}>
            Debra King — peer counsellor
          </CCCMono>
        </div>
      </div>

      {/* RIGHT — copy */}
      <div style={{
        padding: "44px 48px 36px", display: "flex", flexDirection: "column", justifyContent: "space-between"
      }}>
        <CCCMono color={C.oxblood} size={10}>For referral partners</CCCMono>

        <div>
          <h2 style={{
            fontFamily: FONT_DISPLAY, fontWeight: 500, margin: 0,
            fontSize: 60, lineHeight: 1.0, letterSpacing: "-0.022em",
            color: C.inkwell, textWrap: "balance"
          }}>
            An eight-week guided<br />recovery program<br />
            for adults who've{" "}
            <span style={{ position: "relative", display: "inline-block" }}>
              tried other things.
              <svg width="100%" height="10" viewBox="0 0 480 10" preserveAspectRatio="none"
              style={{ position: "absolute", left: 0, bottom: -4 }}>
                <path d="M2 5 Q 120 1, 240 5 T 478 5" stroke={C.oxblood} strokeWidth="3" fill="none" strokeLinecap="round" />
              </svg>
            </span>
          </h2>

          <div style={{
            marginTop: 22,
            fontFamily: FONT_DISPLAY, fontStyle: "italic", fontWeight: 400,
            fontSize: 20, lineHeight: 1.4, color: C.charcoal
          }}>
            Led by Debra King — peer counsellor with lived experience.
          </div>

          <p style={{
            margin: "16px 0 0", fontFamily: FONT_BODY, fontSize: 13,
            lineHeight: 1.55, color: C.charcoal, maxWidth: 520
          }}>
            Mondays, 7–9 p.m., starting June 1. A small group, live on Zoom.
            Suitable for adults who have completed detox or stabilization
            and want a structured peer-led environment for the work of
            staying sober.
          </p>
        </div>

        <div>
          <CCCRule color={`${C.inkwell}55`} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, paddingTop: 14, alignItems: "center" }}>
            <CCCMono color={C.inkwell} size={10}>cccrecovery.ca</CCCMono>
            <CCCMono color={C.inkwell} size={10} style={{ textAlign: "center" }}>(289) 207-2617</CCCMono>
            <CCCMono color={`${C.inkwell}88`} size={10} style={{ textAlign: "right" }}>
              Blue skies and green lights.
            </CCCMono>
          </div>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// CANVAS COMPOSITION
// ─────────────────────────────────────────────────────────────────────────
function App() {
  const { DesignCanvas, DCSection, DCArtboard } = window;
  return (
    <DesignCanvas>
      <DCSection id="print" title="Print flyers" subtitle="8.5 × 11 in. Type is the design.">
        <DCArtboard id="flyer-evergreen" label="01 — Print flyer · evergreen" width={850} height={1100}>
          <FlyerEvergreen />
        </DCArtboard>
        <DCArtboard id="flyer-cohort" label="02 — Print flyer · cohort launch" width={850} height={1100}>
          <FlyerCohort />
        </DCArtboard>
      </DCSection>

      <DCSection id="ig" title="Instagram square" subtitle="1080 × 1080. The launch sequence.">
        <DCArtboard id="ig-intro" label="03 — IG · brand intro" width={1080} height={1080}>
          <IGIntro />
        </DCArtboard>
        <DCArtboard id="ig-inspirational" label="04 — IG · inspirational" width={1080} height={1080}>
          <IGInspirational />
        </DCArtboard>
        <DCArtboard id="ig-cohort" label="05 — IG · cohort launch" width={1080} height={1080}>
          <IGCohort />
        </DCArtboard>
      </DCSection>

      <DCSection id="story" title="Vertical story" subtitle="1080 × 1920. Full-height typographic moves.">
        <DCArtboard id="story-evergreen" label="06 — Story · evergreen (FEAR acrostic)" width={1080} height={1920}>
          <StoryEvergreen />
        </DCArtboard>
        <DCArtboard id="story-cohort" label="07 — Story · cohort launch" width={1080} height={1920}>
          <StoryCohort />
        </DCArtboard>
      </DCSection>

      <DCSection id="landscape" title="Landscape" subtitle="1200 × 630. The one artboard where Debra's portrait appears at feature scale.">
        <DCArtboard id="landscape-referral" label="08 — Landscape · referral" width={1200} height={630}>
          <LandscapeReferral />
        </DCArtboard>
      </DCSection>
    </DesignCanvas>);

}


Object.assign(window, {
  LK_FlyerEvergreen: typeof FlyerEvergreen !== 'undefined' ? FlyerEvergreen : null,
  LK_FlyerCohort: typeof FlyerCohort !== 'undefined' ? FlyerCohort : null,
  LK_IGIntro: typeof IGIntro !== 'undefined' ? IGIntro : null,
  LK_IGInspirational: typeof IGInspirational !== 'undefined' ? IGInspirational : null,
  LK_IGCohort: typeof IGCohort !== 'undefined' ? IGCohort : null,
  LK_StoryEvergreen: typeof StoryEvergreen !== 'undefined' ? StoryEvergreen : null,
  LK_StoryCohort: typeof StoryCohort !== 'undefined' ? StoryCohort : null,
  LK_LandscapeReferral: typeof LandscapeReferral !== 'undefined' ? LandscapeReferral : null
});
})();