/* Black Flag — LinkedIn Graphics
 * Carousel slides for "The Platform Thesis" (fintech / forward-deployed builders).
 * Palette + type from bfd-design-system. Single accent: crimson #E04848 ("The Cannon").
 * Slides render at 1080x1350 (LinkedIn 4:5). ?only=<id> isolates one slide for capture.
 */

:root{
  --ink:#18181B;      /* The Flag — obsidian */
  --ink2:#171717;
  --paper:#F4F4F5;    /* The Harbor */
  --paper2:#FAFAFA;   /* The Chart */
  --surface:#E4E4E7;  /* The Hull */
  --muted:#71717A;    /* The Helm */
  --muted-ink:#A1A1AA;
  --border:#D4D4D8;   /* The Rigging */
  --accent:#E04848;   /* The Cannon */
  --font-sans:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Monaco,Consolas,"Courier New",monospace;
}

*{box-sizing:border-box}

/* ── Gallery chrome (screen view / the deliverable) ───────────── */
body{
  margin:0;
  background:var(--surface);
  color:var(--ink2);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:1240px;margin:0 auto;padding:56px 40px 96px}
.masthead{border-bottom:2px solid var(--ink2);padding-bottom:22px;margin-bottom:40px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.masthead h1{font-size:34px;font-weight:800;letter-spacing:-0.02em;margin:0}
.masthead .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.masthead .meta{font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;color:var(--muted);text-align:right;line-height:1.7}
.lede{font-size:17px;line-height:1.65;color:#3f3f46;max-width:760px;margin:0 0 44px}

.post{background:var(--paper2);border:1px solid var(--border);border-radius:6px;padding:34px 34px 40px;margin-bottom:34px}
.post-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.post-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#fff;background:var(--ink2);padding:5px 9px;border-radius:3px}
.post-head h2{font-size:21px;font-weight:700;letter-spacing:-0.01em;margin:0}
.caption{white-space:pre-wrap;font-size:14.5px;line-height:1.62;color:#27272a;background:var(--paper);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:4px;padding:18px 20px;margin:14px 0 26px;font-family:var(--font-sans)}
.thumbs{display:flex;gap:22px;flex-wrap:wrap}
.thumb{width:344px;height:430px;overflow:hidden;border:1px solid var(--border);border-radius:4px;box-shadow:0 1px 0 var(--border);flex:0 0 auto;position:relative}
.thumb .slide{transform:scale(.31852);transform-origin:top left}  /* 344/1080 */
.thumb-n{position:absolute;bottom:8px;right:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);background:rgba(250,250,250,.85);padding:2px 6px;border-radius:3px;z-index:3}

/* ── The slide (1080x1350, LinkedIn 4:5) ──────────────────────── */
.slide{
  width:1080px;height:1350px;position:relative;overflow:hidden;
  padding:104px 96px;display:flex;flex-direction:column;justify-content:space-between;
  font-family:var(--font-sans);
}
.slide.ink{background:var(--ink);color:var(--paper2)}
.slide.paper{background:var(--paper);color:var(--ink2)}
.slide .accent{color:var(--accent)}

/* top rail */
.rail{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);
  font-size:24px;letter-spacing:0.24em;text-transform:uppercase}
.slide.ink .rail{color:var(--muted-ink)}
.slide.paper .rail{color:var(--muted)}
.rail .n{font-weight:500}
.rail .n b{color:var(--accent);font-weight:700}

/* body — quote */
.body{display:flex;flex-direction:column;justify-content:center;flex:1;padding:36px 0}
.q{font-weight:800;letter-spacing:-0.025em}
.q.xl{font-size:118px;line-height:1.0}
.q.lg{font-size:96px;line-height:1.04}
.q.md{font-size:78px;line-height:1.08}
.q.sm{font-size:66px;line-height:1.12}
.mark{font-size:150px;font-weight:800;line-height:0;color:var(--accent);height:40px;display:block;margin-bottom:10px;opacity:.9}

/* contrast slide */
.pair{display:flex;flex-direction:column;gap:40px}
.row .lbl{font-family:var(--font-mono);font-size:26px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.row .big{font-size:104px;font-weight:800;letter-spacing:-0.02em;line-height:1}
.row.def .big{color:var(--ink2)}
.divider{height:2px;background:var(--border);margin:6px 0}
.kicker-note{font-size:40px;font-weight:600;line-height:1.25;margin-top:26px}

/* stat slide */
.stat-wrap{display:flex;flex-direction:column;justify-content:center;flex:1}
.stat{font-weight:800;letter-spacing:-0.04em;line-height:.9;color:var(--accent);font-size:360px;white-space:nowrap}
.stat.two{font-size:220px}
.stat-label{font-size:52px;font-weight:600;line-height:1.16;margin-top:28px;max-width:820px}
.slide.ink .stat-label{color:var(--paper2)}
.slide.paper .stat-label{color:var(--ink2)}

/* footer */
.foot{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:18px}
/* Official Black Flag mark (from the marketing site). Monochrome, inherits slide color. */
.flag{width:76px;height:38px;flex:0 0 auto;display:block}
.wordmark{font-weight:600;letter-spacing:0.22em;font-size:26px}
.source{font-family:var(--font-mono);font-size:22px;letter-spacing:0.06em;text-transform:uppercase}
.slide.ink .source{color:var(--muted-ink)}
.slide.paper .source{color:var(--muted)}
.swipe{font-family:var(--font-mono);font-size:23px;letter-spacing:0.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.swipe .arrow{color:var(--accent);font-size:28px}

/* ── Isolate mode (?only=ID) → single 1080x1350 canvas for capture ── */
body.isolate{background:#000;margin:0;padding:0;overflow:hidden}
body.isolate .slide{transform:none}