/* ============ SpineFactory public site — shared sheet ============
   Self-hosted fonts, the light "construction site" tokens, and the chrome every
   public page shares: header bar, footer, and the prose layout the generated pages
   (docs, FAQ, examples, use cases, legal) render into. The landing page keeps its own
   inline sheet for the hero and sections, and links this one for fonts + footer.
   Pages are generated by scripts/gen_public_site.mjs — edit landing/site.json and
   landing/src/, never the generated HTML. */

/* fonts: latin subsets, SIL OFL 1.1 (licences beside the files) */
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/landing/assets/fonts/saira-condensed-600-latin.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/landing/assets/fonts/saira-condensed-700-latin.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/landing/assets/fonts/saira-condensed-800-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/landing/assets/fonts/space-grotesk-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/landing/assets/fonts/jetbrains-mono-latin.woff2) format("woff2")}

:root{
  color-scheme:light;
  --bg:#E9E7E1; --srf:#FCFBF8; --srf2:#F3F1EB; --srf3:#FFFFFF;
  --line:#E4E0D8; --line2:#D6D2C9; --line3:#C6C1B6; --frame:#CFCABF;
  --txt:#17161A; --body-txt:#4A463F; --mut:#5F5B54; --faint:#6B675F;
  --acc:#F5A623; --acc-icon:#E09000; --acc-head:#935700; --acc-tint:#8A5200; --acc-edge:#D98D06; --acc-ink:#2A1C00; --acc-line:#EBD3A2; --acc-dim:#FBEFD8;
  --ok:#2E9E63; --ok-txt:#1E6B44; --bad:#B0343C;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --disp:"Saira Condensed","Arial Narrow",sans-serif;
  --body:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --tape:repeating-linear-gradient(-45deg,#F5A623 0 12px,#2B2924 12px 24px);
  --grad:linear-gradient(180deg,#F7B23C,#EE9C10);
}

/* ---------- shared chrome (sf-*) ---------- */
.sf-wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:28px}
.sf-mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--txt);text-decoration:none}
.sf-mark b{color:var(--acc-head);font-weight:700}
.sf-mark svg{width:26px;height:26px;flex-shrink:0}

.sf-top{position:sticky;top:0;z-index:10;background:rgba(251,250,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid #DCD8D0}
.sf-bar{display:flex;align-items:center;gap:22px;height:72px}
.sf-grow{flex:1}
.sf-nav{display:flex;gap:22px;font-size:15px}
.sf-nav a{color:var(--body-txt);text-decoration:none}
.sf-nav a:hover,.sf-nav a[aria-current="page"]{color:var(--acc-tint)}
.sf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:11px;
  background:var(--grad);border:1px solid var(--acc-edge);color:var(--acc-ink);font-weight:600;font-size:15px;text-decoration:none;
  box-shadow:0 2px 8px rgba(214,140,10,.3);white-space:nowrap}
.sf-btn:hover{background:#FFC24F}

.sf-foot{position:relative;z-index:2;border-top:1px solid #DCD8D0;background:var(--srf2);padding:40px 0 44px;color:var(--faint);font-size:14px}
.sf-foot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 48px;align-items:start}
.sf-foot .sf-mark{font-size:19px}
.sf-foot .sf-mark svg{width:22px;height:22px}
.sf-def{margin:12px 0 0;max-width:460px;color:var(--body-txt);line-height:1.6;text-wrap:pretty}
.sf-foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.sf-foot-nav a{color:var(--body-txt);text-decoration:none}
.sf-foot-nav a:hover{color:var(--acc-tint)}
.sf-legal{grid-column:1/-1;margin:6px 0 0;padding-top:18px;border-top:1px solid var(--line2);font:12px/1.8 var(--mono);color:var(--mut)}
.sf-legal a{color:var(--mut)}

a:focus-visible,button:focus-visible{outline:3px solid var(--acc-edge);outline-offset:4px}

/* ---------- generated pages ---------- */
.sf-page{margin:0;background:var(--bg);color:var(--txt);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
.sf-page .hazard{height:8px;background:var(--tape)}
.sf-main{padding:44px 0 88px}
.sf-crumbs{font:12.5px var(--mono);letter-spacing:1px;color:var(--mut);margin:0 0 22px;text-transform:uppercase}
.sf-crumbs a{color:var(--acc-tint);text-decoration:none}
.sf-crumbs span[aria-hidden]{margin:0 8px;color:var(--line3)}

.sf-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.sf-layout.with-side{grid-template-columns:230px minmax(0,1fr)}
.sf-side{position:sticky;top:96px;align-self:start;background:var(--srf);border:1px solid var(--line2);border-radius:14px;padding:16px 12px}
.sf-side h2{font:11.5px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--acc-head);margin:2px 8px 10px}
.sf-side ul{list-style:none;margin:0;padding:0}
.sf-side a{display:block;padding:7px 10px;border-radius:8px;color:var(--body-txt);text-decoration:none;font-size:14.5px}
.sf-side a:hover{background:var(--srf2)}
.sf-side a[aria-current="page"]{background:var(--acc-dim);color:var(--acc-tint);font-weight:600}

.prose{max-width:780px}
.prose .eyebrow{font:12.5px var(--mono);letter-spacing:2.4px;color:var(--acc-tint);text-transform:uppercase;margin:0 0 14px}
.prose h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(38px,5vw,60px);line-height:.98;letter-spacing:.4px;margin:0 0 18px}
.prose h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3vw,34px);line-height:1.05;letter-spacing:.5px;margin:48px 0 14px}
.prose h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:22px;line-height:1.1;letter-spacing:.3px;margin:30px 0 8px}
.prose p,.prose li,.prose td{color:var(--body-txt)}
.prose p{margin:0 0 14px;text-wrap:pretty}
.prose b,.prose strong{color:var(--txt);font-weight:600}
.prose a{color:var(--acc-tint);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acc-line)}
.prose a:hover{text-decoration-color:var(--acc-tint)}
.prose .lead{font-size:19px;line-height:1.6;color:var(--body-txt);margin:0 0 26px;max-width:720px}
.prose .lead b{color:var(--txt)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:24px}
.prose li{margin:6px 0}
.prose code{font:14px var(--mono);background:var(--srf2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.prose kbd{display:inline-block;padding:1px 7px 2px;border:1px solid var(--line3);border-bottom-width:2px;border-radius:6px;background:var(--srf3);
  font:12.5px var(--mono);color:var(--txt)}
.prose .chip{display:inline-block;padding:0 7px;border:1px solid var(--line2);border-radius:7px;background:var(--srf3);color:var(--txt);font-weight:600;font-size:.94em;white-space:nowrap}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14.5px;background:var(--srf);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
.prose th{font:11.5px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);background:var(--srf2)}
.prose .updated{font:12px var(--mono);letter-spacing:1.4px;color:var(--acc-tint);text-transform:uppercase;margin:0 0 10px}
.prose pre.licence{white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.6 var(--mono);color:var(--body-txt);background:var(--srf);border:1px solid var(--line2);border-radius:12px;padding:16px 18px;margin:8px 0 18px}
.prose .note{background:var(--acc-dim);border:1px solid var(--acc-line);border-radius:12px;padding:14px 18px;margin:20px 0;font-size:14.5px;color:var(--body-txt)}
.prose .answer{background:var(--srf);border:1px solid var(--line2);border-left:4px solid var(--acc-icon);border-radius:12px;padding:16px 20px;margin:0 0 26px}
.prose .answer p:last-child{margin-bottom:0}
.prose figure{margin:22px 0 28px}
.prose figure img{display:block;max-width:100%;height:auto;border:1px solid var(--line2);border-radius:12px;background:#fff}
.prose figcaption{margin-top:8px;font-size:13.5px;color:var(--mut)}

.sf-steps{counter-reset:st;list-style:none;padding:0!important}
.sf-steps li{counter-increment:st;position:relative;padding:2px 0 2px 44px;margin:12px 0}
.sf-steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:3px;font:12.5px var(--mono);color:var(--acc-head);
  border:1px solid var(--acc-line);background:var(--acc-dim);border-radius:7px;padding:1px 6px}
.sf-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 26px;padding:0;list-style:none}
.sf-flow li{background:var(--srf);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;margin:0}
.sf-flow b{display:block;font-family:var(--disp);text-transform:uppercase;font-size:18px;letter-spacing:.3px}
.sf-flow span{font-size:14px}

.sf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:18px 0 28px;padding:0;list-style:none}
.sf-cards li{margin:0}
.sf-cards a{display:block;height:100%;background:var(--srf);border:1px solid var(--line2);border-radius:14px;padding:18px 20px;text-decoration:none;color:var(--body-txt);transition:border-color .15s,transform .15s}
.sf-cards a:hover{border-color:#E2B75C;transform:translateY(-2px)}
.sf-cards b{display:block;font-family:var(--disp);text-transform:uppercase;font-size:22px;color:var(--txt);margin-bottom:4px}
.sf-cards span{font-size:14.5px;line-height:1.55}

.sf-faq{margin:0;padding:0}
.sf-faq dt{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:23px;line-height:1.12;letter-spacing:.3px;margin:34px 0 8px;scroll-margin-top:96px}
.sf-faq dt a{color:var(--txt);text-decoration:none}
.sf-faq dd{margin:0;padding:0 0 22px;border-bottom:1px solid var(--line2);color:var(--body-txt)}

.sf-examples{display:grid;gap:26px;margin:26px 0}
.sf-example{background:var(--srf);border:1px solid var(--line2);border-radius:16px;overflow:hidden}
.sf-example .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line2)}
.sf-example figure{margin:0;background:#fff;position:relative}
.sf-example figure img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border:0;border-radius:0}
.sf-example figcaption{position:absolute;top:12px;left:12px;margin:0;font:11px var(--mono);letter-spacing:1.4px;background:var(--srf3);
  border:1px solid var(--line3);border-radius:7px;padding:4px 9px;color:var(--body-txt)}
.sf-example .txt{padding:18px 22px}
.sf-example h2{margin:0 0 6px;font-size:26px}

.sf-cta{margin:46px 0 0;background:var(--srf);border:1px solid var(--line2);border-radius:16px;padding:30px 32px;position:relative;overflow:hidden}
.sf-cta::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--tape)}
.sf-cta h2{margin:6px 0 8px}
.sf-cta p{margin:0 0 18px}

@media (max-width:920px){
  .sf-layout.with-side{grid-template-columns:minmax(0,1fr)}
  .sf-side{position:static;order:2}      /* on a phone the page comes first, the docs list after it */
  .sf-foot-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .sf-wrap{padding-inline:16px}
  .sf-bar{gap:12px;height:64px}
  .sf-mark{font-size:19px;gap:7px}
  .sf-mark svg{width:22px;height:22px}
  .sf-nav{display:none}
  .sf-btn{padding:0 14px;font-size:14px}
  .sf-main{padding:28px 0 60px}
  .prose .lead{font-size:17px}
  .sf-example .pair{grid-template-columns:minmax(0,1fr)}
  .sf-cta{padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}