/* openfeo.com: the layout of this site only. Tokens come from tokens.css and components from
   ofo.css, both copied from the design system. A rule that another surface could use belongs
   in the design system, not here. No inline styles anywhere: the content security policy in
   _headers refuses them. */

html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }

/* The page column: 1120px of content inside the desktop gutter. */
:root { --site-column: calc(1120px + 2 * var(--space-6)); }

/* Headings break into even lines and prose avoids a last line of one word, where supported. */
.ofo-hero__title, .ofo-section__title { text-wrap: balance; }
.ofo p, .ofo dd { text-wrap: pretty; }

/* A hyphenated word that must not split across lines. */
.nb { white-space: nowrap; }

.site-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); }
.skip:focus { top: var(--space-3); }

/* ---------- header: the rule spans the window, the bar sits on the page column ---------- */
.site-top { border-bottom: 1px solid var(--line); }
.site-top .ofo-siteheader { max-width: var(--site-column); margin: 0 auto; border-bottom: 0; }
.ofo-siteheader img, .ofo-sitefoot__brand img { width: auto; }
@media (max-width: 760px) { .site-top .ofo-siteheader { padding: 0 var(--space-4); } }
/* ofo.css hides the links below 640px; the button then needs to find the right edge itself. */
@media (max-width: 640px) { .ofo-siteheader > .ofo-btn { margin-left: auto; } }

/* ---------- hero ---------- */
.site-hero { max-width: var(--site-column); margin: 0 auto; }
/* The payoff stays in one piece: "A kernel and" / "one binary." */
.ofo-hero__title em { white-space: nowrap; }
.site-art { display: grid; place-items: center; }
.site-art svg { width: 64%; height: auto; overflow: visible; }
/* MarkMotion on oxide-deep (the design system's MarkMotion guideline). */
.site-art .fe { fill: var(--oxide-bright); }
.site-art .o { fill: var(--on-oxide-deep); }
.site-art .bond { stroke: var(--on-oxide-deep); stroke-width: 1.25; }
.site-art .trail { stroke: var(--on-oxide-deep); stroke-width: 2.5; }
.site-art .trail-glow { stroke: var(--oxide-bright); stroke-width: 8; }
.site-art .packet { fill: var(--on-oxide-deep); }
.site-art .packet-halo { fill: var(--oxide-bright); }

/* ---------- sections ---------- */
.site-rule { border-top: 1px solid var(--line); }
.ofo-section__eyebrow { margin: 0; }

/* ---------- the idea ---------- */
.idea { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.idea .ofo-section__lede { margin-bottom: var(--space-4); }
.idea__name { margin: var(--space-5) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 760px) { .idea { grid-template-columns: 1fr; gap: var(--space-6); } }

.rootfs { margin: 0; }
.rootfs__list { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13px; line-height: 20px; }
.rootfs__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-5); padding: var(--space-3) var(--space-4); }
.rootfs__row + .rootfs__row { border-top: 1px solid var(--line); }
.rootfs__row dd { margin: 0; color: var(--ink-muted); }
.rootfs__row--init dt { color: var(--oxide); font-weight: 600; }
.rootfs figcaption { margin-top: var(--space-3); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- why: six goals, three to a row ---------- */
.why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } }

/* ---------- the plan ---------- */
.plan { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.plan__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); align-items: start; padding: var(--space-4) var(--space-5); }
.plan__row + .plan__row { border-top: 1px solid var(--line); }
.plan__id { font: 500 16px/24px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.plan__row--now .plan__id { color: var(--oxide); }
.plan__title { margin: 0; font: 600 16px/24px var(--font-sans); }
.plan__text { margin: 2px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.plan__state { display: grid; justify-items: end; gap: var(--space-1); }
.plan__date { font: 450 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.plan__asof { margin: var(--space-3) 0 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 560px) {
  .plan__row { grid-template-columns: 40px minmax(0, 1fr); padding: var(--space-4); }
  .plan__state { grid-column: 2; display: flex; align-items: center; gap: var(--space-3); }
}

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-7) 0 0; }
.facts dt { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.facts dd { margin: var(--space-2) 0 0; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* ---------- not found ---------- */
.site-404 { max-width: 560px; margin: 0 auto; padding: var(--space-9) var(--space-4); }