/* ==========================================================================
   FURCATE OS — DESIGN SYSTEM  ·  furcate.org

   Derived from Pentagram's civic and public-interest identities — Central
   Park Conservancy, the Obama Presidential Center, OMNY, Dream.org — and from
   nothing else. What those share: a bold modernist sans at signage scale; one
   dominant colour that belongs to the subject (Central Park's emerald); a
   geometric mark with a reason (the "park mark" cut to the park's own
   proportions); and a pattern grown from the thing itself (a taxonomy of the
   park's leaves). Plain, public, accessible, authoritative.

   Applied here. The colour is the amber the console itself speaks in. The mark
   is the fork — Furcate — and the pattern is that fork repeated, the way the
   failure-domain tree branches. The faces have civic reasons: Big Shoulders
   was cut for civic signage; Public Sans was cut for public digital services;
   Ubuntu Mono is the terminal of the system underneath, for what the machine
   declares. Light ground, because a public thing is read in daylight.
   ========================================================================== */

@font-face {
  font-family: 'Big Shoulders';
  src: url('/assets/fonts/bigshoulders-400-900.woff2') format('woff2-variations');
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/publicsans-300-800.woff2') format('woff2-variations');
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/publicsans-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu Mono';
  src: url('/assets/fonts/ubuntumono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu Mono';
  src: url('/assets/fonts/ubuntumono-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --ground:    oklch(0.985 0.005 90);
  --ground-2:  oklch(0.958 0.009 88);
  --ink:       oklch(0.175 0.012 60);
  --ink-2:     oklch(0.400 0.012 60);
  --ink-3:     oklch(0.560 0.012 60);
  --rule:      oklch(0.830 0.012 80);
  --hair:      oklch(0.900 0.010 85);

  /* The colour — used as a colour: bands, plates, fills. Not a highlighter. */
  --amber:     oklch(0.805 0.170 82);
  --amber-ink: oklch(0.520 0.135 85);   /* amber that can carry type on light */
  --on-amber:  oklch(0.175 0.012 60);
  --fault:     oklch(0.550 0.200 28);

  /* the machine, quoted */
  --term-bg:   oklch(0.140 0.008 76);
  --term-dim:  oklch(0.640 0.000 76);
  --term-hair: oklch(0.300 0.000 76);
  --amber-lit: oklch(0.840 0.175 80);

  --display: 'Big Shoulders', 'Archivo', system-ui, sans-serif;
  --sans:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'Ubuntu Mono', ui-monospace, Menlo, Consolas, monospace;
  --measure: 66ch;

  /* The pattern: the fork, the wordmark's own glyph, repeated like a taxonomy. */
  --fork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='%23c78d1a' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M48 92V56M48 56C48 36 20 40 20 16M48 56C48 36 76 40 76 16'/%3E%3C/svg%3E");
}

/* -- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--ground); color: var(--ink-2);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word; font-synthesis: none;
}
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber-ink);
    text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
a:hover { color: var(--amber-ink); }
a:focus-visible { outline: 2px solid var(--amber-ink); outline-offset: 3px; }
::selection { background: var(--amber); color: var(--on-amber); }

.sheet { max-width: 84rem; margin: 0 auto; padding: 0 1.4rem; }
@media (min-width: 60rem) { .sheet { padding: 0 3rem; } }

/* -- Type: the display face is for signage, the sans for reading ---------- */

h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.2rem, 9.5vw, 7.4rem); line-height: 0.92; letter-spacing: 0.004em;
}
h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 0.98; letter-spacing: 0.006em;
  margin-bottom: 1.2rem;
}
h3 { font-weight: 700; font-size: 1.02rem; line-height: 1.3; margin-bottom: 0.4rem; }
h4 { font-weight: 700; font-size: 0.94rem; margin-bottom: 0.3rem; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.45; color: var(--ink-2); max-width: 50ch; }
strong { color: var(--ink); font-weight: 700; }
em { font-style: normal; color: var(--ink); box-shadow: inset 0 -0.45em 0 oklch(0.805 0.170 82 / 0.38); }
.col { max-width: var(--measure); }

/* What the machine declares is set in its own terminal face. */
.v, code, kbd { font-family: var(--mono); font-size: 0.95em; color: var(--ink); font-variant-ligatures: none; }
code { background: var(--ground-2); border: 1px solid var(--hair); padding: 0.05em 0.4em; }

/* Field labels: signage small caps. */
.field { font-weight: 700; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.field-amber { color: var(--amber-ink); }
.brk { display: flex; align-items: center; gap: 1rem; margin: 2.8rem 0 1.3rem; }
.brk::after { content: ""; flex: 1; border-top: 2px solid var(--rule); }

/* -- Masthead: a signage band ---------------------------------------------- */

header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.1rem 0 1rem; border-top: 10px solid var(--amber); border-bottom: 2px solid var(--ink);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none;
  font-family: var(--display); font-weight: 900; font-size: 1.75rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink);
}
.wordmark b { color: var(--amber-ink); font-weight: 900; }
.wordmark svg { width: 1.6rem; height: 1.6rem; color: var(--amber-ink); stroke-width: 2.4; }
nav.top { display: flex; flex-wrap: wrap; gap: 1.4rem; }
nav.top a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 0.86rem; }
nav.top a:hover { color: var(--amber-ink); }

/* -- Hero: the typographic façade, over the pattern ---------------------- */

.hero {
  padding: 4rem 0 3.4rem; position: relative;
  background: var(--fork) repeat; background-size: 96px 96px;
}
@media (min-width: 62rem) { .hero { padding: 6rem 0 4.6rem; } }
.hero > * { position: relative; }
.hero .kicker { display: block; margin-bottom: 1.6rem; }
.hero .lede { margin-top: 1.8rem; }

/* -- Declaration: the manifest as a plate ---------------------------------- */
/* os-release, set as a sign: the colour carries it, the machine's face fills it. */

.decl { background: var(--amber); color: var(--on-amber); margin-top: 2.6rem; padding: 0.4rem 1.5rem 0.6rem; }
.decl .row {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.3rem 1.4rem;
  padding: 0.7rem 0; border-bottom: 1px solid oklch(0.175 0.012 60 / 0.22); align-items: baseline;
}
.decl .row:last-child { border-bottom: 0; }
@media (max-width: 40rem) { .decl .row { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }
.decl .k { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-amber); opacity: 0.8; }
.decl .val { font-family: var(--mono); font-size: 1.02rem; color: var(--on-amber); }
.decl .val .note { opacity: 0.65; }

/* -- Buttons: the colour, as an action -------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.4rem; }
.btn {
  display: inline-block; text-decoration: none;
  border: 2px solid var(--ink); background: var(--ink); color: var(--ground);
  padding: 0.72rem 1.35rem; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em;
}
.btn:hover { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.btn-line { background: none; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* -- Sections: numbered like a signage system ----------------------------- */

section.arm {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 3.4rem;
  padding: 3.6rem 0; border-top: 2px solid var(--rule);
}
@media (min-width: 62rem) { section.arm { grid-template-columns: 13rem minmax(0, 1fr); padding: 5.4rem 0; } }
section.arm.heavy { border-top: 10px solid var(--amber); }
.stem { font-size: 0.8rem; line-height: 1.5; }
.stem .n { display: block; font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1;
           letter-spacing: 0.02em; color: var(--amber-ink); margin-bottom: 0.35rem; }
.stem .nm { display: block; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.stem .st { display: block; margin-top: 1rem; color: var(--ink-3); font-size: 0.82rem; }
@media (max-width: 61.99rem) {
  .stem { margin-bottom: 1.4rem; display: flex; align-items: baseline; gap: 0.8rem; }
  .stem .n { font-size: 1.8rem; margin: 0; }
  .stem .st { display: none; }
}

/* -- Editions ------------------------------------------------------------- */

.editions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2.6rem; margin-top: 2rem; border-top: 10px solid var(--amber); }
@media (min-width: 58rem) { .editions { grid-template-columns: repeat(3, 1fr); } }
.edition { padding: 1.5rem 0 1.7rem; border-bottom: 2px solid var(--rule); }
@media (min-width: 58rem) { .edition { border-bottom: 0; } }
.edition .name { font-family: var(--display); font-weight: 800; text-transform: uppercase;
                 font-size: 2.1rem; line-height: 1; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 0.3rem; }
.edition .status { font-family: var(--mono); font-size: 0.86rem; margin-bottom: 0.9rem; }
.edition .status.now { color: var(--amber-ink); font-weight: 700; }
.edition .status.not { color: var(--ink-3); }
.edition p { font-size: 0.94rem; }
.edition .decl { margin-top: 1.1rem; padding: 0.2rem 1rem 0.3rem; }
.edition .decl .row { grid-template-columns: 6.5rem minmax(0, 1fr); padding: 0.45rem 0; }
.edition .decl .val { font-size: 0.88rem; }

/* -- Grids / parts -------------------------------------------------------- */

.pair, .tri, .quad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.7rem 2.8rem; margin-top: 1.9rem; }
@media (min-width: 46rem) { .pair { grid-template-columns: 1fr 1fr; } .tri, .quad { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .tri { grid-template-columns: repeat(3, 1fr); } .quad { grid-template-columns: repeat(4, 1fr); } }
.part { border-top: 3px solid var(--ink); padding-top: 0.85rem; }
.part .field { display: block; margin-bottom: 0.45rem; }
.part p { font-size: 0.92rem; margin: 0; }
.part .refuses { display: block; margin-top: 0.6rem; font-size: 0.86rem; color: var(--ink-2);
                 padding-left: 0.85rem; border-left: 4px solid var(--amber); }

/* -- Console specimen: the machine, quoted ---------------------------------- */

figure.specimen { margin: 2.2rem 0 0; }
figure.specimen figcaption { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
                             color: var(--ink-3); padding-bottom: 0.55rem; margin-bottom: 0; }
.term {
  background: var(--term-bg); color: var(--term-dim); border-left: 10px solid var(--amber);
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.7; white-space: pre; overflow-x: auto;
  padding: 1.15rem 1.3rem; font-variant-ligatures: none;
}
@media (min-width: 46rem) { .term { font-size: 0.9rem; } }
.term .p { color: oklch(0.500 0 76); }
.term .c { color: oklch(0.960 0.020 76); }
.term .a { color: var(--amber-lit); }
.term .b { color: oklch(0.930 0.120 76); }
.term .f { color: oklch(0.640 0.190 28); }
.term .h { color: oklch(0.470 0 76); }

/* -- Tables --------------------------------------------------------------- */

.wrapx { overflow-x: auto; max-width: 100%; margin-top: 1.8rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 40rem; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 0.78rem 1.1rem 0.78rem 0; border-bottom: 1px solid var(--hair); }
.tbl thead th { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 3px solid var(--ink); }
.tbl tbody td:first-child { color: var(--ink); font-weight: 700; }
.tbl .mono { font-family: var(--mono); font-size: 0.92em; }
.tbl .ok { color: var(--amber-ink); font-weight: 700; }
.tbl .off { color: var(--ink-3); }
.tbl tr.us td { background: oklch(0.805 0.170 82 / 0.16); }
.tbl tr.us td:first-child { color: var(--amber-ink); }

/* -- Figures: big civic numerals ------------------------------------------ */

.figs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.7rem 2.2rem; margin-top: 2rem; }
@media (min-width: 54rem) { .figs { grid-template-columns: repeat(4, 1fr); } }
.figv { border-top: 6px solid var(--amber); padding-top: 0.7rem; }
.figv .v { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
           font-size: clamp(2.6rem, 5.4vw, 4rem); line-height: 1; color: var(--ink); letter-spacing: 0.01em; display: block; }
.figv .v small { font-family: var(--sans); font-size: 0.3em; font-weight: 700; letter-spacing: 0.08em; margin-left: 0.3em; color: var(--ink-3); text-transform: uppercase; }
.figv .k { font-size: 0.84rem; color: var(--ink-2); margin-top: 0.55rem; line-height: 1.4; }

/* -- Declared gap --------------------------------------------------------- */

.gap { border-top: 6px solid var(--amber); padding-top: 0.85rem; margin: 2rem 0; max-width: var(--measure); }
.gap .field { display: block; margin-bottom: 0.35rem; }
.gap p { font-size: 0.94rem; margin: 0; }
.gap.needs { border-top-color: var(--fault); }
.gap.needs .field { color: var(--fault); }

/* -- Steps ---------------------------------------------------------------- */

ol.steps { list-style: none; margin: 1.9rem 0 0; padding: 0; counter-reset: s; }
ol.steps > li { counter-increment: s; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0 0.8rem;
                padding: 1.2rem 0; border-top: 2px solid var(--rule); }
ol.steps > li::before { content: counter(s, decimal-leading-zero); font-family: var(--display); font-weight: 800;
                        font-size: 1.7rem; line-height: 1; color: var(--amber-ink); letter-spacing: 0.02em; }
ol.steps p { font-size: 0.94rem; margin: 0.15rem 0 0; }

/* -- Footer: the band again ----------------------------------------------- */

footer.foot { border-top: 10px solid var(--amber); padding: 2.8rem 0 3.4rem; margin-top: 2rem; }
footer.foot .cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.9rem 3rem; }
@media (min-width: 46rem) { footer.foot .cols { grid-template-columns: repeat(4, 1fr); } }
footer.foot h4 { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.7rem; }
footer.foot ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
footer.foot li { margin-bottom: 0.4rem; }
footer.foot a { text-decoration: none; color: var(--ink-2); }
footer.foot a:hover { color: var(--amber-ink); }
.colophon { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 2px solid var(--hair); font-size: 0.84rem; color: var(--ink-3); max-width: 74ch; line-height: 1.6; }

p, li, .part p { text-wrap: pretty; }

/* -- Mobile menu ---------------------------------------------------------- */

.navtoggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.navbtn { display: none; }
@media (max-width: 61.99rem) {
  header.top { row-gap: 0; }
  .navbtn { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none;
            font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 0.35rem 0; }
  .navbtn::after { content: "+"; font-size: 1.05em; line-height: 1; }
  .navtoggle:checked ~ .navbtn::after { content: "–"; }
  .navtoggle:focus-visible ~ .navbtn { outline: 2px solid var(--amber-ink); outline-offset: 3px; }
  nav.top { display: none; flex-basis: 100%; width: 100%; flex-direction: column; gap: 0; margin: 0 0 0.4rem; }
  .navtoggle:checked ~ nav.top { display: flex; }
  nav.top a { display: block; width: 100%; padding: 0.72rem 0; border-top: 1px solid var(--hair); }
}

/* -- Long tokens ---------------------------------------------------------- */
.v, code, kbd, .decl .val, .tbl .mono, .figv .v { overflow-wrap: anywhere; }
h1, h2 { overflow-wrap: break-word; }