/* F.A.R.C.E. Flash — Farce Systems
   Design direction: plan §7.1. Tokens: CANON.md §7.
   Dark, dense, hardware-company. IBM Plex Mono for headings, numbers and
   labels; IBM Plex Sans for body. One accent. Negative states withhold the
   accent rather than introducing a second hue. */

:root {
  --bg:      #0A0C0F;
  --surface: #12161A;
  --rule:    #1E252D;
  --text:    #E4E8ED;
  --muted:   #7D8894;
  --accent:  #FFB020;

  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wide:  1180px;
  --prose: 42rem;
  --lanes: 40;              /* the array is the page's unit of measure */

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2.25rem; --s7: 3.5rem; --s8: 5.5rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 clamp(15px, 0.95rem + 0.15vw, 17px)/1.65 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- primitives */

.wrap  { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--s5); }

/* Measure applies to running text only. Tables, tier grids and figures are
   data, and they get the full column. */
.prose > * + * { margin-top: var(--s4); }
.prose > p,
.prose > h3,
.prose > blockquote,
.prose > ul:not(.contents):not(.goals),
.prose > ol { max-width: var(--prose); }

a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #0A0C0F; padding: var(--s2) var(--s4);
  font: 600 .8rem/1 var(--mono);
}
.skip:focus { left: var(--s4); top: var(--s2); }

h1, h2, h3, h4 { font-family: var(--mono); font-weight: 600; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); letter-spacing: -.02em; }
h3 { font-size: 1.05rem; letter-spacing: -.01em; }

strong { font-weight: 600; }
code, kbd { font-family: var(--mono); font-size: .92em; color: var(--accent); }

/* The array is the recurring structural device: one tick per lane, forty of
   them, so the page is ruled by the thing it is selling. Percentages in a 90deg
   gradient resolve against the element width, so no background-size is wanted. */
.lanes {
  height: 10px; border: 0; margin: var(--s8) 0 0;
  background: repeating-linear-gradient(90deg,
    var(--rule) 0 1px,
    transparent 1px calc(100% / var(--lanes)));
}

/* ------------------------------------------------------------------- chrome */

.top {
  font: 400 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--rule);
}
.top .wrap { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s2); }

.masthead {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex; align-items: center; gap: var(--s5);
  padding-block: var(--s3); flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: var(--s3);
  font: 600 1rem/1 var(--mono); letter-spacing: -.01em;
  text-decoration: none; margin-right: auto;
}
.brand svg { width: 20px; height: 20px; flex: none; }
.brand .lo { color: var(--accent); }

.nav { display: flex; gap: var(--s4); flex-wrap: wrap;
       font: 400 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nav a { color: var(--muted); text-decoration: none; padding-block: var(--s1); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--accent); }

/* --------------------------------------------------------------------- hero */

.hero { padding-block: var(--s7) var(--s6); border-bottom: 1px solid var(--rule); }
.hero-id {
  display: flex; gap: var(--s5); align-items: baseline; flex-wrap: wrap;
  font: 400 .72rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s5);
}
.hero h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
  letter-spacing: -.045em; margin-bottom: var(--s3);
}
.hero h1 .lo { color: var(--accent); }
.hero .tag { font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem); color: var(--text); margin: 0; }
.hero .tag2 {
  font: 400 .95rem/1.5 var(--mono); color: var(--muted);
  margin: var(--s2) 0 0; letter-spacing: -.01em;
}

/* The schematic is the hero image. A product page would put a render here. */
.figure-bus { margin: var(--s6) 0 var(--s5); }
.figure-bus svg { display: block; width: 100%; height: auto; max-width: none; }

.cta {
  display: inline-flex; align-items: center; gap: var(--s3);
  background: var(--accent); color: #0A0C0F;
  font: 600 .82rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: var(--s3) var(--s5); text-decoration: none; border: 1px solid var(--accent);
}
.cta:hover { background: transparent; color: var(--accent); }
.cta-row { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.cta-note { font: 400 .78rem/1.5 var(--mono); color: var(--muted); }

/* ----------------------------------------------------------------- sections */

.sec { padding-block: var(--s7); border-bottom: 1px solid var(--rule); }
.sec:last-of-type { border-bottom: 0; }

/* The eyebrow carries the report anchor, because every claim on this page
   is answerable from a specific section of the analysis. */
.eyebrow {
  display: flex; gap: var(--s4); align-items: baseline; flex-wrap: wrap;
  font: 400 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s4);
}
.eyebrow .ref { color: var(--muted); text-decoration-color: var(--rule); }
.eyebrow .ref:hover { color: var(--accent); }
.sec h2 { margin-bottom: var(--s5); max-width: 20ch; }

.feat { margin-top: var(--s5); }
.feat p { margin: 0 0 var(--s4); }
.feat p strong { font-family: var(--mono); font-size: .95em; letter-spacing: -.01em; }

blockquote.pull {
  margin: var(--s6) 0 0; padding: 0 0 0 var(--s5);
  border-left: 2px solid var(--accent);
  font: 400 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1.4 var(--mono);
  letter-spacing: -.02em; max-width: 30ch;
}
blockquote.pull cite {
  display: block; margin-top: var(--s4);
  font: 400 .72rem/1.5 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-style: normal;
}

/* ------------------------------------------------------------------- tables */

.tbl-wrap { overflow-x: auto; margin-top: var(--s5); }
table {
  border-collapse: collapse; width: 100%; min-width: 34rem;
  font: 400 .86rem/1.45 var(--mono);
}
th, td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); text-align: left; }
th {
  font-weight: 400; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); vertical-align: bottom;
}
tbody th { text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--text); }
td + td, th + th { text-align: right; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }

/* The comparison is the page's most prominent element after the hero (§7.2). */
.compare { margin-top: var(--s6); }
.compare table { font-size: 1rem; min-width: 30rem; max-width: 56rem; }
.compare thead th:last-child { color: var(--accent); }
.compare tbody td:last-child { color: var(--accent); }

/* --------------------------------------------------------------------- kits */

.tiers { display: grid; gap: 1px; background: var(--rule); margin-top: var(--s5);
         grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.tier { background: var(--bg); padding: var(--s5); display: flex; flex-direction: column; }
.tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.tier h3 { font-size: 1rem; }
.tier .price { font: 600 1.35rem/1 var(--mono); letter-spacing: -.02em; color: var(--accent); }
.tier .cap {
  font: 400 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: var(--s2);
}
.tier .blurb { margin: var(--s4) 0 0; font-size: .92rem; color: var(--text); }
.tier .contents-label {
  font: 400 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: var(--s5) 0 var(--s3);
  padding-top: var(--s4); border-top: 1px solid var(--rule);
}
/* Contents are a spec list, never prose (§7.2). */
ul.contents {
  list-style: none; margin: 0; padding: 0;
  font: 400 .82rem/1.7 var(--mono); color: var(--text);
}
ul.contents li { display: flex; gap: var(--s3); }
ul.contents li::before { content: "\2013"; color: var(--muted); flex: none; }
.tier .assembly {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule);
  font: 400 .74rem/1.6 var(--mono); color: var(--muted);
}

.goals { list-style: none; margin: var(--s5) 0 0; padding: 0; max-width: 34rem; }
.goals li {
  display: flex; gap: var(--s3) var(--s5); justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
  font: 400 .88rem/1.5 var(--mono);
}
.goals li > span { flex: none; }
/* The unlock text wraps rather than pushing the page sideways on a phone. */
.goals b { color: var(--accent); font-weight: 400; min-width: 0; }

/* ------------------------------------------------------------- repository */

.repo-card {
  margin-top: var(--s6); padding: var(--s5);
  border: 1px solid var(--rule); background: var(--surface);
  max-width: 38rem;
}
.repo-card.compact { margin-top: var(--s5); }

.repo-eyebrow {
  display: flex; gap: var(--s4); flex-wrap: wrap; margin: 0 0 var(--s3);
  font: 400 .68rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.repo-status { color: var(--accent); }

.repo-name { margin: 0 0 var(--s3); font: 600 1.1rem/1.3 var(--mono);
             letter-spacing: -.02em; overflow-wrap: anywhere; }
.repo-name a { color: var(--accent); text-decoration: none;
               box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.repo-name a:hover { box-shadow: 0 1px 0 var(--accent); }

.repo-desc { margin: 0 0 var(--s4); font-size: .92rem; color: var(--text); }
.repo-card.compact .repo-desc { display: none; }

/* The clone line is what a reader actually wants, so it is selectable and
   sized to be read rather than decorated. */
.repo-clone {
  margin: 0; padding: var(--s3) var(--s4); overflow-x: auto;
  border: 1px solid var(--rule); background: var(--bg);
}
.repo-clone code { color: var(--text); font-size: .86rem; white-space: pre; }

.nav a.nav-ext::after {
  content: "\2197"; margin-left: .25em; font-size: .9em; color: var(--muted);
}

/* ------------------------------------------------------- endurance counter */

.counter {
  margin-top: var(--s5); padding: var(--s5);
  border: 1px solid var(--rule); max-width: 30rem;
}
.counter-label {
  margin: 0 0 var(--s4); font: 400 .68rem/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.counter-big {
  margin: 0 0 var(--s3); display: flex; align-items: baseline; gap: var(--s3);
  font: 600 2rem/1 var(--mono); letter-spacing: -.03em; color: var(--accent);
}
.counter-unit {
  font: 400 .72rem/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.counter-note {
  margin: 0; font: 400 .78rem/1.6 var(--mono); color: var(--muted);
}
.counter-note abbr { text-decoration-style: dotted; cursor: help; }
/* Nothing is measured yet, so the box says so rather than showing a zero. */
.counter-pending { border-style: dashed; }

/* The report page's one editorial insertion, marked as such. */
.callout {
  margin: var(--s5) 0 0; padding: var(--s4) var(--s5);
  border-left: 2px solid var(--accent);
  font: 400 .88rem/1.6 var(--mono); color: var(--text); max-width: 46rem;
}
.callout a { color: var(--accent); }

/* ------------------------------------------------------------------ figures */

figure { margin: var(--s6) 0 0; }
figure svg { display: block; width: 100%; height: auto; max-width: 620px; }

/* Photographs sit to the same measure as the diagrams. Without an explicit
   max-width an <img> renders at its intrinsic size and pushes the page wide. */
figure.photo img {
  display: block; width: 100%; height: auto; max-width: 620px;
  border: 1px solid var(--rule);
}
figcaption {
  margin-top: var(--s3); font: 400 .74rem/1.6 var(--mono); color: var(--muted);
  max-width: 46ch;
}

/* ------------------------------------------------------------------- report */

.report-layout { display: grid; gap: var(--s7); align-items: start; }
/* Grid items default to min-width:auto, so a wide table would widen the track
   instead of scrolling inside its own container. */
.report-layout > * { min-width: 0; }
@media (min-width: 62rem) {
  .report-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  .toc { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
}
.toc ol { list-style: none; margin: 0; padding: 0;
          font: 400 .76rem/1.5 var(--mono); }
.toc li { margin-bottom: var(--s3); }
.toc li.sub { padding-left: var(--s4); }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent); }

.doc { max-width: 44rem; }
.doc h2 { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); margin: var(--s7) 0 var(--s4);
          scroll-margin-top: 5rem; }
.doc h3 { margin: var(--s6) 0 var(--s3); color: var(--muted); scroll-margin-top: 5rem; }
.doc p { margin: 0 0 var(--s4); }
.doc sup { font-size: .68em; line-height: 0; }
.doc sup a { color: var(--muted); text-decoration: none; padding-inline: 1px; }
.doc sup a:hover { color: var(--accent); }
.doc figcaption { max-width: none; }
.doc .verdict { color: var(--accent); }

.refs { list-style: none; counter-reset: r; margin: 0; padding: 0;
        font: 400 .78rem/1.6 var(--mono); }
.refs li { counter-increment: r; display: flex; gap: var(--s4); flex-wrap: wrap;
           padding: var(--s2) 0;
           border-bottom: 1px solid var(--rule); scroll-margin-top: 5rem; }
.refs li::before { content: counter(r) "."; color: var(--muted); flex: none; min-width: 2.2rem; }
/* Source URLs are long and unbreakable at word boundaries. */
.refs a { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.refs .t { color: var(--text); }

.byline {
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  border-left: 2px solid var(--rule);
  font: 400 .82rem/1.6 var(--mono); color: var(--muted); max-width: 46rem;
}

/* --------------------------------------------------------------------- misc */

.qa { margin-top: var(--s6); max-width: 44rem; }
.qa h3 { margin-bottom: var(--s3); scroll-margin-top: 5rem; }
.qa p { margin: 0 0 var(--s3); }
.qa + .qa { padding-top: var(--s6); border-top: 1px solid var(--rule); }
.qa .more { font: 400 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.plain { max-width: 40rem; }
.plain h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); letter-spacing: -.03em; margin-bottom: var(--s5); }
.plain p { margin: 0 0 var(--s5); }
.plain strong { font-family: var(--mono); font-size: .95em; }

.status {
  display: inline-block; padding: var(--s1) var(--s3);
  border: 1px solid var(--accent); color: var(--accent);
  font: 400 .68rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}

/* ------------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); margin-top: var(--s8); padding-block: var(--s6) var(--s7); }
.foot .cols { display: flex; gap: var(--s7); flex-wrap: wrap; justify-content: space-between; }
.foot nav { display: flex; flex-direction: column; gap: var(--s2);
            font: 400 .78rem/1.6 var(--mono); }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--text); }
.foot .legal {
  max-width: 40rem; font: 400 .8rem/1.7 var(--mono); color: var(--muted);
  margin: 0;
}
.foot .legal a { color: var(--accent); }
.foot .origin { margin: var(--s5) 0 0; font: 400 .72rem/1.6 var(--mono); color: var(--muted); }

/* -------------------------------------------------------------------- print */

@media print {
  :root { --bg: #fff; --text: #111; --muted: #555; --rule: #ccc; --accent: #000; }
  body { background: #fff; color: #111; font-size: 10.5pt; }
  .masthead, .top, .toc, .foot nav, .cta, .skip, .lanes { display: none !important; }
  .report-layout { display: block; }
  .doc { max-width: none; }
  .doc h2 { break-after: avoid; }
  .doc p, table, figure { break-inside: avoid; }
  a { color: #111; text-decoration: none; }
  .refs a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .byline { border-left: 2px solid #ccc; }
}

/* ======================================================================= */
/* Small screens                                                            */
/*                                                                          */
/* The layout was already fluid and never overflowed, which hid three things */
/* that only measurement finds. At 375px: the sticky chrome was 155px tall,  */
/* a fifth of the viewport; nav rows were 20px and footer links 15px, well   */
/* under the 44px a thumb needs; and the diagrams rendered their 11px labels */
/* at 3 to 6px, because a 620- or 1200-unit drawing scaled into a 327px      */
/* column is a texture, not a diagram.                                       */
/* ======================================================================= */

@media (max-width: 46rem) {

  /* The strip repeats the company name and the domain. Both are in the
     masthead and the footer; on a phone it is 29px of nothing. */
  .top { display: none; }

  /* The nav wrapped to three rows and the sticky header grew to 126px. One
     row that scrolls sideways instead, so the header costs about 52px. */
  .masthead .wrap { flex-wrap: nowrap; gap: var(--s4); padding-block: var(--s2); }
  .brand { margin-right: 0; flex: none; font-size: .92rem; }
  .nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
         scrollbar-width: none; min-width: 0; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }

  /* Drawings keep their natural size and the figure scrolls — the answer the
     wide tables already use. Photographs still fit the column. */
  figure, .figure-bus { overflow-x: auto; overscroll-behavior-x: contain; }
  figure svg, .figure-bus svg { width: auto; max-width: none; }
  figure.photo { overflow: visible; }
  figure.photo img { max-width: 100%; }

  /* Labels below about 12px stop being readable held at arm's length. */
  .eyebrow, .hero-id, blockquote.pull cite,
  .tier .cap, .tier .contents-label, .counter-label, .counter-unit,
  .repo-eyebrow, .status, th { font-size: .75rem; }
  ul.contents { font-size: .88rem; }
  .foot nav, .foot .legal, .toc ol, .refs, .tier .assembly,
  .counter-note, .cta-note { font-size: .82rem; }

  /* The tier grid asks for a 19rem minimum track. On a 320px screen the column
     is 272px, so the track pushed the page 8px wide. One tier per row instead. */
  .tiers { grid-template-columns: 1fr; }
  .tier { padding: var(--s4); }

  /* Sections were spaced for a wide screen; on a phone that is dead scrolling. */
  .sec { padding-block: var(--s6); }
  .hero { padding-block: var(--s6) var(--s5); }
  .foot .cols { gap: var(--s5); }
  .lanes { margin-top: var(--s6); }

  /* The header is shorter now, so anchored headings need less clearance. */
  .doc h2, .doc h3, .qa h3, .refs li { scroll-margin-top: 3.5rem; }
}

/* A right-edge fade that scrolls away at the end: the only cue that a figure,
   a table or the nav has more to the right. The `local` layer travels with the
   content and covers the `scroll` layer once there is nothing left to reach. */
@media (max-width: 46rem) {
  figure, .figure-bus, .tbl-wrap, .nav, .repo-clone {
    background:
      linear-gradient(270deg, var(--bg) 40%, transparent)
        right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%,
        color-mix(in srgb, var(--accent) 26%, transparent), transparent)
        right center / 12px 100% no-repeat scroll;
  }
}

/* Touch targets. Apple asks for 44px, Android for 48dp; navigation rows were
   20px and footer links 15px. This is scoped to navigation only — a link
   inside a sentence has to stay inline, and growing it would break the line. */
@media (pointer: coarse) {
  .nav a, .foot nav a, .toc a, .qa .more {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .cta { padding-block: var(--s4); }
  .eyebrow .ref, .refs a, .tier .price { min-height: 32px; }
}

/* The last of the sub-12px text, and the focus ring for the scroll regions
   above — they are focusable so a keyboard can reach what a thumb can swipe. */
@media (max-width: 46rem) {
  .foot .origin, figcaption, .qa .more { font-size: .8rem; }
}
figure:focus-visible, .tbl-wrap:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}

/* A bare URL in prose is one long unbreakable word. The report's reference list
   already handles this; a link in a paragraph did not, and the disclaimer's
   github.com URL pushed a 320px screen sideways. `anywhere` rather than
   `break-word` because only `anywhere` reduces the min-content width, which is
   what actually stops the overflow. */
.prose a, .plain a, .qa a, .feat a { overflow-wrap: anywhere; }

/* The hero's lead lines: what the product does, then the comparison. Set below
   the tagline and above the schematic, quieter than the tagline and larger than
   body copy, because they are the sentence the reader leaves with. */
.hero .lead {
  margin: var(--s5) 0 0; max-width: 46ch;
  font-size: clamp(1rem, .92rem + .35vw, 1.18rem); line-height: 1.5;
}
.hero .lead + .lead { margin-top: var(--s3); color: var(--muted); }
.hero .lead code { font-size: .92em; }