/* ══════════════════════════════════════════════════════════════════════
   COMMIT · SITE CHROME for static pages (header, footer, beta modal)
   The homepage's header and footer, reproduced as static markup + CSS for the
   /blog/ pages. The source of truth is the homepage bundle:
     header  src/src-06-2544cd25.jsx  V9Hero <nav>   (fixed, 66px, hide on
             scroll-down / show on scroll-up, transparent until 8px of scroll)
     button  src/src-05-7b4192f2.jsx  V9Btn / .v9btn-pri (Forge · Electric)
     footer  src/src-08-3ec30482.jsx  V9Footer
     (the "Join the beta" dialog is beta-modal.css / beta-modal.js)
   Every value below is the resolved "Forge · Electric" palette the homepage
   ships with by default (src/src-09-72060911.jsx). If the homepage chrome
   changes, change this file to match — tools/blog-chrome.js writes the markup.

   Everything is namespaced cx-* so it cannot collide with a page's own CSS.
   The old .lp-nav / .lp-foot classes are deliberately NOT reused: legal.css
   styles them for the other static pages and would leak in. The SEO audit
   treats .cx-nav / .cx-foot as chrome, the same way it treats .lp-*.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/4a25a6c1-baa9-42e1-9ce3-d7342aed7a15.woff2") format("woff2");}

.cx-nav,.cx-foot,.cx-modal{
  --cx-bg:#FAFAF3; --cx-bg2:#EFEFE5; --cx-surface:#FFFFFF;
  --cx-ink:#14140F; --cx-ink70:rgba(20,20,15,0.70); --cx-ink45:rgba(20,20,15,0.45);
  --cx-line:rgba(20,20,15,0.14); --cx-hl:#BEFF50; --cx-em:#3C6300; --cx-err:#C0392B;
  --cx-display:"Funnel Display",system-ui,sans-serif;
  --cx-ui:"Plus Jakarta Sans",system-ui,sans-serif;
  --cx-serif:"Instrument Serif",Georgia,serif;
  --cx-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}
.cx-nav *,.cx-foot *,.cx-modal *{box-sizing:border-box;}

/* .v9-shell */
.cx-shell{max-width:1240px;margin:0 auto;padding:0 20px;position:relative;}
@media(min-width:900px){.cx-shell{padding:0 40px;}}

/* ── buttons (.v9btn .v9btn-pri, brutal) ─────────────────────────── */
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  text-decoration:none;white-space:nowrap;font-family:var(--cx-display);font-weight:800;
  padding:12px 20px;font-size:14.5px;line-height:normal;background:var(--cx-hl);color:var(--cx-ink);
  border-radius:14px;border:2px solid var(--cx-ink);box-shadow:4px 4px 0 var(--cx-ink);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s;}
.cx-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--cx-ink);color:var(--cx-ink);}
.cx-btn--big{padding:16px 28px;font-size:16.5px;}
.cx-btn .pdot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55;}
.cx-btn:focus-visible,.cx-nav a:focus-visible,.cx-nav button:focus-visible,.cx-foot a:focus-visible{outline:3px solid var(--cx-em);outline-offset:3px;}

/* ── wordmark (V9Wordmark + the palette dot it carries on the homepage) ── */
.cx-brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;text-decoration:none;color:var(--cx-ink);}
.cx-msc{display:inline-block;width:26px;line-height:0;flex:0 0 auto;}
.cx-msc svg{width:100%;height:auto;overflow:visible;display:block;}
.cx-word{position:relative;display:inline-flex;width:max-content;flex:0 0 auto;align-items:baseline;
  padding-right:12px;font-family:var(--cx-display);font-weight:800;font-size:21px;letter-spacing:-0.03em;
  color:var(--cx-ink);line-height:1;}
.cx-sq{position:absolute;left:calc(100% - 9px);bottom:-1px;width:9px;height:9px;border-radius:3px;
  background:var(--cx-hl);border:1.5px solid var(--cx-ink);box-shadow:0 0 0 3px rgba(190,255,80,.2);}

/* mascot idle motion — the same loops V9Mascot runs in the homepage header */
@keyframes cxBlink{0%,91.5%,100%{transform:scaleY(1);}94%{transform:scaleY(.12);}96.5%{transform:scaleY(1);}}
@keyframes cxLook{0%,24%,100%{transform:translate(0,0);}34%,48%{transform:translate(5px,-1.5px);}62%,78%{transform:translate(-4.5px,1px);}}
@keyframes cxWobble{0%,86%,100%{transform:rotate(0);}90%{transform:rotate(-2.4deg);}95%{transform:rotate(1.6deg);}}
@keyframes cxShadow{0%,100%{transform:scaleX(1);opacity:.18;}50%{transform:scaleX(.82);opacity:.10;}}
.cx-msc .m-shadow{transform-origin:100px 226px;animation:cxShadow 3.4s ease-in-out infinite;}
.cx-msc .m-wobble{transform-origin:100px 190px;animation:cxWobble 7s ease-in-out infinite;}
.cx-msc .m-look{animation:cxLook 8.5s ease-in-out infinite;}
.cx-msc .m-eyeL{transform-origin:77px 142px;animation:cxBlink 5.2s linear infinite;}
.cx-msc .m-eyeR{transform-origin:123px 142px;animation:cxBlink 5.2s linear .07s infinite;}

/* ── HEADER ──────────────────────────────────────────────────────── */
.cx-nav{position:fixed;top:0;left:0;right:0;z-index:50;margin:0;background:transparent;
  border-bottom:2px solid transparent;
  transition:transform .24s ease,background .2s,border-color .2s,backdrop-filter .2s;
  transform:translateY(0);will-change:transform;}
.cx-nav.is-scrolled,.cx-nav.is-open{background:rgba(250,250,243,.933);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--cx-ink);}
.cx-nav.is-hidden:not(.is-open){transform:translateY(-110%);}
.cx-nav-spacer{height:66px;}
.cx-bar{height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.cx-right{display:flex;align-items:center;gap:16px;min-width:0;}
.cx-links{display:none;gap:22px;}
.cx-links a{font-family:var(--cx-ui);font-weight:600;font-size:13.5px;color:var(--cx-ink70);
  text-decoration:none;white-space:nowrap;}
.cx-links a:hover{color:var(--cx-ink);}
.cx-burger{appearance:none;-webkit-appearance:none;cursor:pointer;width:42px;height:42px;border-radius:11px;
  background:var(--cx-surface);border:2px solid var(--cx-ink);display:inline-flex;align-items:center;
  justify-content:center;flex-direction:column;gap:4px;flex-shrink:0;padding:0;}
.cx-burger span{width:17px;height:2px;border-radius:2px;background:var(--cx-ink);transition:transform .2s,opacity .15s;}
.cx-nav.is-open .cx-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.cx-nav.is-open .cx-burger span:nth-child(2){opacity:0;}
.cx-nav.is-open .cx-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* the drop-down menu (.v9-mobile-menu) */
.cx-menu{position:absolute;top:66px;left:0;right:0;border-top:1px solid var(--cx-line);
  border-bottom:2px solid var(--cx-ink);padding:10px 20px 18px;display:flex;flex-direction:column;gap:4px;
  background:rgba(250,250,243,.969);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 0 var(--cx-hl);max-height:calc(100vh - 66px);max-height:calc(100dvh - 66px);overflow-y:auto;
  opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden;
  transition:opacity .26s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;}
.cx-nav.is-open .cx-menu{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;
  transition:opacity .26s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s;}
.cx-menu a:not(.cx-btn){font-family:var(--cx-display);font-weight:700;font-size:18px;letter-spacing:-0.01em;
  color:var(--cx-ink);text-decoration:none;padding:11px 4px;border-bottom:1px solid var(--cx-line);}
.cx-menu .cx-menu-k{font-family:var(--cx-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cx-ink45);padding:8px 4px 2px;}
.cx-menu .cx-btn{margin-top:12px;width:100%;}

/* The homepage shows four links from 900px. The blog header carries six
   section links, which need ~1100px before they fit beside the CTA, so the
   burger stays in charge until then instead of hiding two sections. */
@media(min-width:1100px){
  .cx-links{display:flex;}
  .cx-burger,.cx-menu{display:none !important;}
}
@media(max-width:380px){
  .cx-right{gap:10px;}
  .cx-nav .cx-bar .cx-btn{padding:11px 14px;font-size:14px;}
}

/* ── FOOTER (V9Footer) ───────────────────────────────────────────── */
.cx-foot{background:var(--cx-bg2);border-top:2px solid var(--cx-ink);padding:clamp(40px,5vw,64px) 0 40px;
  color:var(--cx-ink);font-family:var(--cx-ui);margin:0;}
.cx-foot-in{display:flex;flex-direction:column;gap:32px;}
.cx-foot-g{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px;}
.cx-foot-g > *{min-width:0;}
.cx-foot-brand{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.cx-foot-brand .cx-brand{gap:10px;}
.cx-foot-tag{font-family:var(--cx-ui);font-size:15px;line-height:1.45;color:var(--cx-ink70);max-width:270px;margin:0;}
.cx-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;}
.cx-badge{display:inline-flex;align-items:center;gap:11px;padding:9px 17px;border-radius:12px;text-decoration:none;
  border:2px solid var(--cx-ink);white-space:nowrap;}
.cx-badge--ios{background:var(--cx-ink);color:var(--cx-bg);box-shadow:3px 3px 0 var(--cx-hl);}
.cx-badge--android{background:transparent;color:var(--cx-ink);box-shadow:3px 3px 0 var(--cx-ink);}
.cx-badge .t{display:flex;flex-direction:column;line-height:1.1;text-align:left;}
.cx-badge .k{font-family:var(--cx-mono);font-weight:700;font-size:8.5px;letter-spacing:.1em;opacity:.82;}
.cx-badge .n{font-family:var(--cx-display);font-weight:800;font-size:16px;letter-spacing:-0.01em;}
.cx-foot-col{display:flex;flex-direction:column;gap:10px;}
.cx-meta{font-family:var(--cx-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-ink45);}
.cx-foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.cx-foot-col li{margin:0;padding:0;}
.cx-foot-col a{font-family:var(--cx-ui);font-size:13.5px;line-height:1.35;color:var(--cx-ink70);
  text-decoration:none;overflow-wrap:anywhere;}
.cx-foot-col a:hover{color:var(--cx-ink);}
.cx-foot-col a.more{color:var(--cx-ink);font-weight:600;}
.cx-foot-base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  border-top:1px solid var(--cx-line);padding-top:22px;}
@media(min-width:620px){.cx-foot-g{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){
  .cx-foot-g{grid-template-columns:1.4fr repeat(5,1fr);gap:28px;}
  .cx-foot-brand{grid-column:auto;}
}

@media(prefers-reduced-motion:reduce){
  .cx-msc *,.cx-eyebrow .dot{animation:none !important;}
  .cx-nav,.cx-menu,.cx-btn{transition:none !important;}
  .cx-btn:hover{transform:none;}
}