sourceful.css

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --paper: #fafaf7;
  --cream: #f5f2e1;
  --ink: #0a0a0a;
  --body: #171717;
  --muted: #676762;
  --line: #d9d8d1;
  --line-dark: rgba(245, 242, 225, 0.18);
  --signal: #e85d1f;
  --signal-light: #fff0e8;
  --surface: #ffffff;
  --confirmed: #53c878;
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
p { text-wrap: pretty; }
code, pre, .nav-links, .product-name, .project-state, .section-kicker,
.project-facts dt, .runtime-card, .cap-number, .panel-tag, .map-label,
.license-line, .footer-links > div > span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.wrap { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--signal); color: var(--ink); }
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid var(--line-dark);
}
.nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { display: block; width: 34px; height: 34px; }
.brand-sourceful { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.brand-divider { width: 1px; height: 22px; margin-inline: 4px; background: var(--line-dark); }
.product-name { color: var(--signal); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-links a { color: var(--cream); text-decoration: none; opacity: 0.68; }
.nav-links a:hover { opacity: 1; }
.nav-links .nav-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px; background: var(--signal); color: var(--ink); opacity: 1; font-weight: 700; }

.hero { background: var(--cream); border-bottom: 1px solid var(--line); }
.hero-layout { min-height: min(860px, calc(100svh - 68px)); display: grid; grid-template-columns: minmax(0, 7fr) minmax(410px, 5fr); gap: 72px; align-items: center; padding-block: 72px; }
.project-state { display: flex; align-items: center; gap: 10px; margin: 0 0 30px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 870px; margin-bottom: 28px; color: var(--ink); font-size: clamp(4.4rem, 7.3vw, 7.4rem); font-weight: 900; line-height: 0.91; letter-spacing: -0.055em; text-wrap: balance; }
h1 em { color: var(--signal); font-style: normal; }
.hero-lede { max-width: 690px; margin-bottom: 0; color: var(--muted); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 20px; border: 1px solid currentColor; color: var(--ink); background: transparent; font-size: 14px; font-weight: 500; text-decoration: none; }
.btn:hover { opacity: 0.72; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.btn-primary { border-color: var(--signal); background: var(--signal); color: var(--ink); }
.btn-ghost { border-color: var(--ink); }
.project-facts { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 760px; margin: 56px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
.project-facts div { padding-right: 14px; border-right: 1px solid var(--line); }
.project-facts div + div { padding-left: 18px; }
.project-facts div:last-child { border-right: 0; }
.project-facts dt { margin-bottom: 4px; color: var(--muted); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; }
.project-facts dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 500; }

.runtime-card { align-self: center; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); box-shadow: 14px 14px 0 var(--signal); }
.runtime-topbar, .runtime-footer, .code-title, .code-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 16px; border-bottom: 1px solid var(--line-dark); color: rgba(245, 242, 225, 0.58); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.runtime-live { display: flex; align-items: center; gap: 7px; color: var(--confirmed); }
.runtime-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.energy-state { padding: 28px; }
.state-reading { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.state-reading .reading-label { grid-column: 1 / -1; margin-bottom: 10px; color: rgba(245, 242, 225, 0.55); font-size: 9px; letter-spacing: 0.14em; }
.state-reading strong { color: var(--cream); font-size: clamp(2.8rem, 4.2vw, 4.6rem); font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.state-reading > span:last-child { color: var(--confirmed); font-size: 10px; text-transform: uppercase; }
.flow-line { position: relative; height: 34px; margin: 18px 0; border-left: 1px solid var(--signal); }
.flow-line::after { content: ""; position: absolute; left: -3px; bottom: -1px; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
.flow-line span { position: absolute; left: 0; right: 0; top: 33px; height: 1px; background: var(--line-dark); }
.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-dark); }
.flow-grid div { display: flex; justify-content: space-between; gap: 14px; padding: 14px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.flow-grid div:nth-child(2n) { border-right: 0; }
.flow-grid div:nth-last-child(-n + 2) { border-bottom: 0; }
.flow-grid span { color: rgba(245, 242, 225, 0.5); font-size: 9px; }
.flow-grid strong { color: var(--cream); font-size: 11px; font-weight: 500; }
.runtime-stack { border-top: 1px solid var(--line-dark); }
.runtime-stack > div { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line-dark); }
.runtime-stack span { color: var(--signal); font-size: 9px; }
.runtime-stack b { font-size: 11px; font-weight: 500; }
.runtime-stack small { color: rgba(245, 242, 225, 0.48); font-size: 9px; }
.runtime-footer { border: 0; }
.runtime-footer span:last-child { color: var(--signal); }

.quickstart { padding: 56px 0; background: var(--ink); color: var(--cream); }
.quickstart-layout { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 36px 72px; }
.section-kicker { margin-bottom: 20px; color: var(--signal); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.quickstart h2 { margin: 0; color: var(--cream); font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.035em; }
.install-command { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 14px; padding: 22px; border: 1px solid var(--line-dark); background: #111; color: var(--cream); overflow: auto; }
.install-command .prompt { color: var(--signal); font-family: "JetBrains Mono", monospace; }
.install-command code { font-size: 13px; white-space: nowrap; }
.start-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.start-links a { display: grid; gap: 20px; min-height: 126px; padding: 20px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); color: var(--cream); font-weight: 500; text-decoration: none; }
.start-links a:hover { background: rgba(245, 242, 225, 0.05); }
.start-links span { color: var(--signal); font-family: "JetBrains Mono", monospace; font-size: 9px; }
.start-links b { align-self: end; color: rgba(245, 242, 225, 0.48); font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 400; text-transform: uppercase; }

.section { padding: 104px 0; border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-bottom: 64px; }
.section-head .section-kicker { grid-column: 1 / 4; margin-top: 8px; }
h2 { color: var(--ink); font-size: clamp(3.2rem, 5.8vw, 5.8rem); font-weight: 300; line-height: 0.99; letter-spacing: -0.045em; text-wrap: balance; }
.section-head h2 { grid-column: 4 / -1; max-width: 980px; margin-bottom: 22px; }
.section-intro { color: var(--muted); font-size: 18px; }
.section-head .section-intro { grid-column: 4 / span 7; margin-bottom: 0; }

.architecture { background: var(--paper); }
.system-map { display: grid; grid-template-columns: 1fr 52px 1.25fr 52px 1fr; align-items: stretch; padding: 24px; border: 1px solid var(--line); background-color: var(--cream); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; }
.system-column { padding: 20px; border: 1px solid var(--line); background: var(--paper); }
.map-label { margin-bottom: 26px; color: var(--muted); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.map-node { padding: 16px 0; border-top: 1px solid var(--line); }
.map-node span { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 500; }
.map-node small { color: var(--muted); }
.map-connector { display: grid; place-items: center; color: var(--signal); font-family: "JetBrains Mono", monospace; }
.system-core { padding: 24px; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); }
.core-heading { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); }
.core-heading img { display: block; }
.core-heading strong, .core-heading small { display: block; }
.core-heading strong { font-size: 20px; }
.core-heading small { color: rgba(245, 242, 225, 0.5); }
.system-core ol { margin: 20px 0 0; padding: 0; list-style: none; }
.system-core li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
.system-core li:last-child { border-bottom: 0; }
.system-core li span { color: var(--signal); font-family: "JetBrains Mono", monospace; font-size: 9px; }
.architecture-note { display: flex; justify-content: space-between; gap: 32px; padding-top: 22px; }
.architecture-note p { max-width: 750px; margin: 0; color: var(--muted); font-size: 14px; }
.architecture-note p span { margin-right: 10px; color: var(--signal); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.architecture-note a, .text-link { color: var(--ink); font-weight: 500; text-decoration-color: var(--signal); text-underline-offset: 5px; white-space: nowrap; }

.capabilities { background: var(--cream); }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.capability-grid article { min-height: 300px; display: flex; flex-direction: column; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.cap-number { color: var(--signal); font-size: 9px; letter-spacing: 0.13em; }
.capability-grid h3 { margin: 60px 0 14px; color: var(--ink); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.capability-grid p { margin-bottom: 30px; color: var(--muted); }
.capability-grid code { margin-top: auto; color: var(--muted); font-size: 11px; }

.extend { background: var(--paper); }
.extend-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; }
.extend-copy h2 { margin-bottom: 28px; }
.extend-copy > p:not(.section-kicker) { max-width: 650px; color: var(--muted); font-size: 18px; }
.check-list { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.check-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.check-list li::before { content: "+"; color: var(--signal); font-family: "JetBrains Mono", monospace; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
.code-window { border: 1px solid var(--ink); background: var(--ink); color: var(--cream); box-shadow: 14px 14px 0 var(--signal); }
.code-window pre { margin: 0; padding: 32px; overflow: auto; font-size: 13px; line-height: 1.8; }
.code-window .code-title { color: rgba(245, 242, 225, 0.6); }
.code-window .code-footer { justify-content: flex-start; gap: 28px; border-top: 1px solid var(--line-dark); border-bottom: 0; }
.code-key { color: #ff8a54; }
.code-call { color: #f5f2e1; }
.code-string { color: #8fd9a7; }
.code-number { color: #a8c8ff; }

.community { background: var(--signal); border-color: var(--ink); }
.community-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; }
.community .section-kicker { color: var(--ink); }
.community-intro h2 { margin-bottom: 28px; }
.community-intro > p:not(.section-kicker) { max-width: 600px; color: rgba(10, 10, 10, 0.72); font-size: 18px; }
.license-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.license-line span, .panel-tag { display: inline-flex; padding: 7px 9px; border: 1px solid var(--ink); color: var(--ink); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.community-panels { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.community-panels article { display: flex; flex-direction: column; padding: 28px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--cream); }
.community-panels h3 { margin: 52px 0 16px; color: var(--ink); font-size: 27px; font-weight: 500; line-height: 1.1; }
.community-panels p { color: var(--muted); }
.panel-tag { align-self: flex-start; border-color: var(--signal); background: var(--signal-light); }
.panel-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 30px; }
.panel-links a { color: var(--ink); font-weight: 500; text-decoration-color: var(--signal); text-underline-offset: 4px; }

.organizations { background: var(--ink); color: var(--cream); border-color: var(--line-dark); }
.organizations-layout { display: grid; grid-template-columns: 1fr 0.8fr; gap: 100px; }
.organizations h2 { max-width: 780px; margin-bottom: 24px; color: var(--cream); }
.organizations .section-intro { max-width: 680px; color: rgba(245, 242, 225, 0.62); }
.organizations .btn { margin-top: 14px; }
.service-list { border-top: 1px solid var(--line-dark); }
.service-list > div { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-dark); }
.service-list > div > span { color: var(--signal); font-family: "JetBrains Mono", monospace; font-size: 9px; }
.service-list p { margin: 0; color: rgba(245, 242, 225, 0.58); }
.service-list strong { display: block; margin-bottom: 4px; color: var(--cream); font-weight: 500; }

.project-cta { padding: 84px 0; background: var(--cream); }
.project-cta-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: end; }
.project-cta h2 { margin-bottom: 0; }
.project-cta-layout > div:last-child > p { max-width: 520px; color: var(--muted); font-size: 20px; }

footer { padding: 62px 0 26px; background: var(--ink); color: var(--cream); }
.footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-bottom: 60px; }
.footer-brand { display: flex; align-items: flex-start; gap: 16px; }
.footer-brand img { display: block; }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand strong { margin-bottom: 5px; font-size: 20px; }
.footer-brand span { max-width: 400px; color: rgba(245, 242, 225, 0.5); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-links > div > span { margin-bottom: 8px; color: rgba(245, 242, 225, 0.42); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-links a { color: var(--cream); text-decoration: none; }
.footer-links a:hover { color: var(--signal); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line-dark); color: rgba(245, 242, 225, 0.44); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-bottom a { color: var(--cream); text-decoration: none; }

@media (max-width: 1120px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.75fr); gap: 48px; }
  .project-facts { grid-template-columns: 1fr 1fr; }
  .project-facts div:nth-child(2) { border-right: 0; }
  .project-facts div:nth-child(n + 3) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .system-map { grid-template-columns: 1fr 38px 1.2fr 38px 1fr; }
  .community-layout, .organizations-layout { gap: 56px; }
}

@media (max-width: 860px) {
  .wrap { width: min(var(--max), calc(100% - 36px)); }
  .hero-layout { display: block; min-height: auto; padding-block: 64px 76px; }
  h1 { max-width: 740px; font-size: clamp(4rem, 13vw, 6.8rem); }
  .runtime-card { max-width: 620px; margin: 64px 14px 0 0; }
  .quickstart-layout, .extend-layout, .community-layout, .organizations-layout, .project-cta-layout, .footer-main { grid-template-columns: 1fr; }
  .start-links { grid-template-columns: 1fr 1fr; }
  .section-head { display: block; }
  .section-head .section-kicker { margin-top: 0; }
  .section-head h2 { max-width: 760px; }
  .section-head .section-intro { max-width: 650px; }
  .system-map { grid-template-columns: 1fr; gap: 18px; }
  .map-connector { min-height: 18px; transform: rotate(90deg); }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .extend-layout { gap: 60px; }
  .code-window { margin-right: 14px; }
  .community-layout { gap: 54px; }
  .organizations-layout { gap: 60px; }
  .project-cta-layout { gap: 38px; align-items: start; }
  .footer-main { gap: 52px; }
}

@media (max-width: 600px) {
  .nav { min-height: 62px; }
  .brand-sourceful { font-size: 15px; }
  .brand-divider { display: none; }
  .product-name { display: none; }
  .nav-links .nav-cta { min-height: 34px; padding-inline: 11px; }
  .hero-layout { padding-block: 54px 66px; }
  .project-state { align-items: flex-start; line-height: 1.5; }
  h1 { font-size: clamp(3.25rem, 15.5vw, 4.5rem); }
  .hero-lede { font-size: 18px; }
  .hero-actions .btn { width: 100%; }
  .project-facts { grid-template-columns: 1fr 1fr; }
  .project-facts div + div { padding-left: 12px; }
  .runtime-card, .code-window { margin-right: 8px; box-shadow: 8px 8px 0 var(--signal); }
  .runtime-stack > div { grid-template-columns: 28px 1fr; }
  .runtime-stack small { grid-column: 2; }
  .runtime-footer { align-items: flex-start; flex-direction: column; }
  .quickstart { padding-block: 48px; }
  .quickstart-layout { gap: 30px; }
  .install-command { padding: 18px; }
  .start-links { grid-template-columns: 1fr; }
  .start-links a { min-height: 108px; }
  .section { padding: 76px 0; }
  .section-head { margin-bottom: 42px; }
  h2 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .architecture-note { align-items: flex-start; flex-direction: column; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article { min-height: 260px; }
  .community-panels { grid-template-columns: 1fr; }
  .community-panels article { min-height: 390px; }
  .license-line { align-items: flex-start; flex-direction: column; }
  .project-cta { padding-block: 68px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}