/* ══════════════════════════════════════════════════════════════════════════
   FURCATE — DESIGN SYSTEM v2
   "The page is the schematic."

   THE IDEA
   Furcate's whole claim is that you can check it. So the identity borrows the
   one drawing convention invented for checking: the electrical single-line
   diagram — the drawing an engineer makes of a power system so that another
   engineer can trace it and find the fault.

   Its grammar is already the product's grammar. A single-line diagram puts
   the source at the top and runs downstream; it draws a shared thing as a
   heavy line called a bus; it hangs equipment off that bus on thin stems; and
   it draws redundant paths side by side so you can see, without being told,
   that losing one does not lose the other. Furcate places workloads across
   node, chassis, rack, UPS and feed. That is a single-line diagram. We did
   not adopt an aesthetic; we drew the thing.

   THE FIVE RULES  (every one of them carries meaning — none is decoration)

   1. WEIGHT IS SHARING.      A heavy rule is a bus: something many parts
                              depend on. A hairline is a stem: one part's own
                              connection. Weight is never chosen for emphasis.

   2. DOWN IS DOWNSTREAM.     Content hangs below what it depends on, on a
                              visible stem. Nothing floats.

   3. PARALLEL IS REDUNDANT.  Alternatives are drawn side by side at equal
                              weight. Where the page offers two ways to do
                              something, neither is styled as the winner.

   4. A GAP IS A REFUSAL.     Where the system declines, the line breaks. An
                              open breaker is a gap, not a red light. This is
                              the system's most important mark, because a
                              control plane is only trustworthy where it
                              declines.

   5. MONOSPACE MEANS MEASURED.  Figures, identifiers, hashes, watts and
                              commands are set in mono. Prose never contains a
                              bare number in the reading face. If it is in
                              mono, somebody measured it.

   TYPE — three faces, each with a job, and the choice argues the positioning.
   Furcate's claim is "the same system at every scale". So the faces are
   VARIABLE: one family that adapts, rather than a different font swapped in
   as you grow.
     Newsreader (opsz 6–72)   the reading voice. Optical size does the work —
                              the headline and the footnote are one face
                              behaving correctly at two distances.
     Archivo    (wdth 62–125) the drawing voice: labels, designations,
                              annotation. Width carries density, the way
                              lettering tightens in a crowded corner of a
                              drawing.
     IBM Plex Mono            the measured voice. Nothing else.

   COLOUR is material, not mood. Busbars are copper. The accent is copper, and
   the secondary is the same metal oxidised — patina. Two colours that are one
   substance at two ages.

   SKINS. Light is where people are; dark is where the machine is. furcate.org
   and furcate.foundation are light; furcate.xyz, the operator surface, is
   dark. Each commits — no OS-theme switching — because which world you are in
   is information, not a preference.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Faces ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  /* Light skin. A cool paper, biased very slightly toward the patina, so the
     neutral reads as chosen rather than inherited. Deliberately not cream:
     warm off-white with a serif is the house style of every generated page. */
  --paper:    #eff2f1;
  --sheet:    #f7f9f8;
  --sunk:     #e5eae8;
  --ink:      #101619;
  --annot:    #566067;
  --faint:    #7d878c;
  --rule:     #c2ccc8;

  --copper:   #9a5024;   /* the conductor — accent, used sparingly */
  --mark:     #a05c00;   /* the Furcate mark. Its own colour, not the accent. */
  --patina:   #2c6c60;   /* the same metal, oxidised — measured / verified */

  --bus-w:    2.5px;     /* rule 1: a bus */
  --stem-w:   1px;       /* rule 1: a stem */

  --reading:  'Newsreader', Georgia, 'Times New Roman', serif;
  --drawing:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --measured: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* One measure for prose, set at ~66 characters of Newsreader at 19px. */
  --measure:  38rem;
  --gutter:   clamp(20px, 5vw, 56px);
  --sheet-w:  74rem;
}

/* The machine skin. Not an inversion — the copper is lifted so it survives on
   a dark ground, and the paper keeps its green-blue bias so both skins are
   recognisably the same drawing. */
:root[data-skin="machine"] {
  --paper:    #0c1012;
  --sheet:    #11171a;
  --sunk:     #161d20;
  --ink:      #e7ecea;
  --annot:    #97a3a0;
  --faint:    #6d7a78;
  --rule:     #253033;

  --copper:   #c9743f;
  --patina:   #4da493;
  --mark:     #d0863a;   /* lifted so the mark holds on the dark ground */
}

/* ── Ground ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--reading);
  font-size: 19px;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--copper); color: var(--sheet); }

:focus-visible {
  outline: var(--bus-w) solid var(--copper);
  outline-offset: 3px;
}

/* ── The sheet ─────────────────────────────────────────────────────────── */

.sheet {
  max-width: var(--sheet-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sheet.narrow { --measure: 33rem; }

section { padding-block: clamp(44px, 5.5vw, 76px); }

/* ── Rule 1 + 2: the bus, and what hangs off it ───────────────────────────
   A section opens with a heavy rule spanning the sheet — the thing everything
   below it depends on. Its designation sits on the bus in the drawing face,
   condensed, the way lettering tightens where a drawing runs out of room. */

.bus {
  border-top: var(--bus-w) solid var(--ink);
  padding-top: 12px;
  margin-bottom: 34px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.bus .desig {
  font-family: var(--drawing);
  font-stretch: 78%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}
.bus .name {
  font-family: var(--drawing);
  font-stretch: 88%;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--annot);
}

/* A drop hangs from what precedes it on a visible stem. The stem is real —
   it is how the page says "this depends on that" without a caption. */
.drop {
  position: relative;
  padding-top: 34px;
}
.drop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--stem-w);
  height: 34px;
  background: var(--faint);
}

/* ── Rule 3: parallel paths ────────────────────────────────────────────── */

.paths {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: var(--stem-w) solid var(--rule);
}
.path {
  position: relative;
  padding: 26px 24px 26px 0;
  border-left: var(--stem-w) solid var(--rule);
  padding-left: 20px;
}
.path:first-child { border-left: 0; padding-left: 0; }
/* The tick where a path leaves the bus above it. */
.path::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 26px;
  height: var(--bus-w);
  background: var(--copper);
}
.path:first-child::before { left: 0; }
.path h3 {
  font-family: var(--drawing);
  font-stretch: 94%;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.path p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--annot); }

/* ── Rule 4: a gap is a refusal ───────────────────────────────────────────
   The line runs, breaks, and resumes. What sits in the break is what the
   system declined to do. No red, no icon: on a schematic an open breaker is
   simply a discontinuity, and a reader who knows how to read the drawing
   knows that is the most important thing on it. */

.refusal {
  margin-block: 40px;
  display: grid;
  grid-template-columns: 34px auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 14px;
}
/* The two ends of a line with a gap bitten out of it. They must sit on the
   SAME row as the label, or the drawing reads as two unrelated dashes — which
   is exactly what it did the first time. */
.refusal::before,
.refusal::after {
  content: "";
  height: var(--bus-w);
  background: var(--ink);
  grid-row: 1;
}
.refusal::before { grid-column: 1; }
.refusal::after  { grid-column: 3; }
.refusal .open   { grid-row: 1; grid-column: 2; }
.refusal .open {
  font-family: var(--drawing);
  font-stretch: 78%;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
}
.refusal-body {
  grid-row: 2;
  grid-column: 1 / -1;
  padding-top: 4px;
  margin: 0;
  max-width: var(--measure);
  color: var(--annot);
  font-size: 17px;
}

/* ── Rule 5: the nameplate ────────────────────────────────────────────────
   What is riveted to a machine: what it is, and what it is rated for. Keys in
   the drawing face, values in mono, because a value in mono has been
   measured. Tabular figures so the column reads as a column. */

.plate {
  border: var(--stem-w) solid var(--rule);
  background: var(--sheet);
  padding: 4px 22px;
}
.rating {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: 6px 26px;
  padding-block: 15px;
  border-bottom: var(--stem-w) solid var(--rule);
  align-items: baseline;
}
.rating:last-child { border-bottom: 0; }
.rating .k {
  font-family: var(--drawing);
  font-stretch: 84%;
  font-weight: 650;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}
.rating .v {
  font-family: var(--measured);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--annot);
  font-variant-numeric: tabular-nums;
}
.rating .v strong { color: var(--patina); font-weight: 600; }

/* ── Type ──────────────────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 400; text-wrap: balance; }

h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 26px;
  font-variation-settings: "opsz" 72;
}
h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.016em;
  margin: 0 0 18px;
  font-variation-settings: "opsz" 40;
}
h3 {
  font-family: var(--drawing);
  font-stretch: 94%;
  font-weight: 650;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 10px;
}
p { margin: 0 0 18px; max-width: var(--measure); }

.lede {
  font-size: clamp(1.16rem, 2vw, 1.45rem);
  line-height: 1.45;
  max-width: 40rem;
  color: var(--ink);
  font-variation-settings: "opsz" 28;
}

/* Annotation: the small type an engineer writes in the margin. */
.note {
  font-family: var(--drawing);
  font-stretch: 92%;
  font-size: 15px;
  line-height: 1.5;
  color: var(--annot);
  max-width: 36rem;
}

code, .mono, kbd {
  font-family: var(--measured);
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
}
strong { font-weight: 650; }
em { font-style: italic; }

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--copper); }

/* ── Masthead ──────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: var(--stem-w) solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.masthead .sheet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 15px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--drawing);
  font-stretch: 88%;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
}
.wordmark .qualifier { color: var(--faint); font-weight: 500; }
.wordmark svg { display: block; overflow: visible; }
/* The mark keeps its own drawing: round caps and 1.8, not the page's square
   busbar strokes. It predates this system and is not derived from it. */
.wordmark svg path { stroke: var(--mark); stroke-width: 1.8; fill: none; stroke-linecap: round; }

nav {
  display: flex;
  gap: 22px;
  align-items: baseline;
  font-family: var(--drawing);
  font-stretch: 90%;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
nav a { text-decoration: none; color: var(--annot); }
nav a:hover { color: var(--copper); }

/* ── Head of the sheet ────────────────────────────────────────────────────
   The source of a single-line diagram is at the top, and so is the claim
   everything below it depends on. */

.head {
  padding-block: clamp(56px, 10vw, 118px) clamp(40px, 6vw, 72px);
  border-bottom: var(--bus-w) solid var(--ink);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  font-family: var(--drawing);
  font-stretch: 90%;
  font-weight: 650;
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 13px 22px;
  border: var(--stem-w) solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}
.btn:hover { border-color: var(--copper); color: var(--copper); }
.btn.live {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--sheet);
}
.btn.live:hover { background: var(--ink); border-color: var(--ink); color: var(--sheet); }

/* ── The ladder: scales of one fact ───────────────────────────────────────
   Each rung is a drop off the rule above it, so reading down the ladder is
   reading downstream. */

.ladder { border-top: var(--stem-w) solid var(--rule); }
.rung {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 4px 28px;
  padding-block: 24px;
  border-bottom: var(--stem-w) solid var(--rule);
}
.rung .k {
  font-family: var(--drawing);
  font-stretch: 82%;
  font-weight: 650;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--copper);
  padding-top: 6px;
}
.rung .v strong {
  display: block;
  font-family: var(--reading);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 26;
}
.rung .v p { margin: 0; font-size: 16.5px; color: var(--annot); }

/* ── Footer ────────────────────────────────────────────────────────────── */

footer {
  border-top: var(--bus-w) solid var(--ink);
  padding-block: 44px 60px;
  margin-top: 20px;
}
footer .cols {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
footer .t {
  font-family: var(--drawing);
  font-stretch: 82%;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 12px;
}
footer a {
  display: block;
  font-family: var(--drawing);
  font-stretch: 94%;
  font-size: 15px;
  color: var(--annot);
  text-decoration: none;
  margin-bottom: 7px;
}
footer a:hover { color: var(--copper); }
footer .colophon {
  font-family: var(--drawing);
  font-stretch: 94%;
  font-size: 14px;
  line-height: 1.55;
  color: var(--faint);
  margin: 0;
  max-width: 26rem;
}

/* ── Narrow sheets ─────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  body { font-size: 18px; }
  .rung { grid-template-columns: 1fr; gap: 6px; }
  .rating { grid-template-columns: 1fr; gap: 5px; }
  .path { border-left: 0; padding-left: 0; }
  .path::before { width: 20px; }
  .hide-sm { display: none; }
  .refusal { grid-template-columns: 22px auto 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}