/* We Own AI: Kickstarter story images. Shared styles.
   Tokens copied from WeOwnAI/aibook-fun marketing-site/styles/globals.css (@theme). */
:root {
  --paper: #fcfbf8; --paper-2: #f6f4ee; --card: #ffffff; --ink: #1a1613; --muted: #6e675e;
  --line: #e7e1d7; --line-2: #d8d1c4; --pine: #1c5d4c; --pine-deep: #12463a;
  --pine-tint: rgba(28,93,76,.1); --pine-wash: rgba(28,93,76,.06); --amber: #b4791f;
  --mint: #8fbeae; --cream: #f3eee2;
  --display: "Fraunces", Georgia, serif; --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace; --emoji: "Noto Color Emoji";
  --sh-sm: 0 1px 2px rgba(26,22,19,.05), 0 1px 3px rgba(26,22,19,.04);
  --sh-md: 0 4px 10px rgba(26,22,19,.06), 0 2px 4px rgba(26,22,19,.04);
  --sh-lg: 0 18px 40px -12px rgba(26,22,19,.14), 0 6px 14px rgba(26,22,19,.05);
}
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #fff; }
body { font-family: var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
ul, ol { list-style: none; }
svg { display: block; }
.emoji { font-family: var(--emoji); font-style: normal; }

/* ---------- canvas (CSS px; rendered at 2x) ---------- */
.canvas { width: 680px; background: var(--paper-2); position: relative; overflow: hidden; padding: 32px; }
.canvas.fixed { overflow: hidden; }
.spec { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--pine); }
.lead { font-family: var(--display); font-weight: 600; font-size: 25px; letter-spacing: -0.02em; line-height: 1.15; margin: 8px 0 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-sm); }
.foot-note { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: .02em; margin-top: 18px; }
.ico { width: 24px; height: 24px; color: var(--pine); flex: none; }
.ico svg { width: 100%; height: 100%; }

/* ---------- section header 680 x 150 ---------- */
.hdr { width: 680px; height: 150px; padding: 0 36px; display: flex; align-items: center; gap: 22px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 88% 0%, rgba(255,255,255,.08), transparent 55%), linear-gradient(120deg, #1f6653, var(--pine-deep) 55%, #0f3b30); }
.hdr .tabs { position: absolute; top: 0; right: 36px; display: flex; gap: 6px; }
.hdr .tabs span { width: 34px; height: 8px; border-radius: 0 0 4px 4px; background: rgba(243,238,226,.18); }
.hdr .tabs span:first-child { background: var(--amber); opacity: .9; }
.hdr .mark { position: absolute; right: -34px; bottom: -58px; width: 230px; height: 230px; opacity: .10; }
.hdr .badge { width: 78px; height: 78px; border-radius: 999px; background: var(--paper); display: grid; place-items: center; flex: none;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(26,22,19,.06); }
.hdr .badge .emoji { font-size: 40px; line-height: 1; }
.hdr .kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin-bottom: 8px; }
.hdr h1 { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: -0.028em; color: var(--cream); white-space: nowrap; }
.hdr .rule { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--amber) 0 64px, transparent 64px); }

/* ---------- photo slots (owner-supplied images) ---------- */
.slot { position: relative; overflow: hidden; background: var(--paper-2); }
.slot.filled { background-size: cover; background-position: center; }
.slot .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: repeating-linear-gradient(135deg, #efebe2 0 10px, #f4f1ea 10px 20px); border: 2px dashed #c9c0b0; border-radius: inherit; color: var(--muted); padding: 10px; }
.slot.filled .ph { display: none; }
.slot .ph b { font-family: var(--body); font-weight: 700; font-size: 16px; color: #5b554d; }
.slot .ph small { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.slot .ph svg { width: 30px; height: 30px; color: #8d8579; }