/* ═══════════════════════════════════════════════════════════════════════════
   CORVEXAL — /aria
   Site Bible, Part II §2. The technical page. The coldest thing on the site.

   > The rest of the site is a survey document. Aria's page is the instrument
   > panel. Same typography, same grid, same rules — inverted ground.
   > No bronze. No amber. Nothing warm anywhere on this page.

   THE ONE DEVIATION FROM THE BIBLE, STATED RATHER THAN SLIPPED IN.
   Part II §2 specifies --ink #121820 as the field and --sheet #F7F4ED as the
   type. Kevin's 2026-08-22 correction supersedes it: "each page will have
   it's distinct color based on the template used." Aria's template is
   Agenciy, measured at #000000 ground and #EEEEEE type. Those are the values
   in blocks.css under [data-page="aria"].

   The Bible's intent survives intact — this is still the one inverted page,
   still monochrome, still the only near-dark section on the site — and it
   goes further than the spec asked, because true black against the landing's
   true white is the largest temperature drop available.

   The faces are Fraunces and DM Sans, not Agenciy's Inter and Playfair. Not
   a preference: those two are not in fonts/, and every page on this site is
   held to zero external requests. When they are self-hosted this file is
   where they change.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The law numerals. 0.22 was chosen by eye and measured at 1.79:1 on
     the black this page used to have — a fail at 52px, where the bar is 3:1. They are not decoration:
     "03" is which law you are reading, and a reader who cannot see it has
     lost the ordering of a numbered specification.

     0.36 cleared at 3.14:1 on black. THE GROUND MOVED to the site cream on
     2026-08-24, so the value is now 0.48 of the ink, measured at 3.15:1 —
     the same relationship, re-derived rather than carried over. Two ticks
     quieter than the ink beside it, which was the whole intent. */
  --law-n: rgba(18, 24, 32, 0.48);
  --err-hot: rgba(18, 24, 32, 0.92);
  --err-grid: rgba(18, 24, 32, 0.10);
  --err-band: rgba(18, 24, 32, 0.16);
}

/* Dark grounds need thinner strokes. The same weight that reads as a
   hairline on white reads as a rule on black, because light bleeds outward
   on a dark field and dark does not bleed on a light one. */
[data-page="aria"] { -webkit-font-smoothing: antialiased; }
[data-page="aria"] .h1, [data-page="aria"] .h2 { font-weight: var(--w-mid); }

/* ═══ 2.2 · THE FIVE LAWS ══════════════════════════════════════════════════
   Five blocks, each a number and a sentence and a paragraph. The most
   specification-like thing on the site, and it should feel like reading one.
   ═══════════════════════════════════════════════════════════════════════════ */

.laws { display: flex; flex-direction: column; }
.law {
  display: grid; grid-template-columns: 120px 1fr 1fr; gap: 48px;
  padding: 44px 0; border-top: 1px solid var(--line);
  align-items: start;
}
.law:last-child { border-bottom: 1px solid var(--line); }
.law__n {
  font-family: var(--face-m); font-size: 52px; line-height: 1;
  color: var(--law-n); font-variant-numeric: tabular-nums;
}
.law__t {
  font-family: var(--face-m); font-size: 15px; line-height: 24px;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink);
}
/* MECHANISM (1), PROCESSING FLUENCY. This page carries the hardest
   claims on the site, so it has to be the most readable page on the site,
   not the least. Measured before: 11 paragraphs at 15px/24px against the
   site body of 20px/32px, and they were not captions — they were the Five
   Laws and the paragraphs that state what is NOT proven. Technical content
   needs more fluency, not less; small dense type makes a true claim read as
   less true. The genuinely subordinate text (the hover hint, the footer)
   stays small, because raising THAT would flatten the hierarchy instead. */
.law__b { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--mut); }

/* ═══ 2.3 · THE OWNERSHIP TABLE ════════════════════════════════════════════
   The whole thesis in fourteen words. Two columns, no fills, and the left
   one is deliberately much longer than the right — that asymmetry IS the
   argument, so it is not balanced.
   ═══════════════════════════════════════════════════════════════════════════ */

.own { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.own__c { padding: 30px 0 30px 32px; border-left: 1px solid var(--line); }
.own__c:first-child { padding-left: 0; border-left: 0; }
.own__h {
  font-family: var(--face-m); font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--mut); margin-bottom: 20px;
}
.own__l { display: flex; flex-direction: column; gap: 11px; }
.own__l li { font-family: var(--face-m); font-size: var(--t-mono); color: var(--ink); }

/* ═══ 2.4 · CORRELATED ERROR ═══════════════════════════════════════════════
   Two overlapping error distributions. Drag the correlation coefficient and
   watch the verified-but-wrong region grow.

   The picture is a real bivariate normal and the figure beside it is the
   real orthant probability computed off the same grid the picture is drawn
   from — not a curve fitted to a number, and not a number captioning a
   curve. If they ever disagree, one of them is wrong, and they cannot,
   because there is only one calculation.
   ═══════════════════════════════════════════════════════════════════════════ */

.err {
  display: grid; grid-template-columns: 1fr 320px; gap: 48px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px; align-items: start;
}
.err__c { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r-md); }
.err__panel { display: flex; flex-direction: column; gap: 26px; }

.err__row { display: flex; flex-direction: column; gap: 6px; }
.err__n {
  font-family: var(--face-m); font-size: 44px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.err__k {
  font-family: var(--face-m); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mut);
}

.err__f { display: flex; flex-direction: column; gap: 12px; }
.err__f label {
  font-family: var(--face-m); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mut);
}
.err__f input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: var(--tap); background: none; cursor: ew-resize;
}
.err__f input[type="range"]::-webkit-slider-runnable-track {
  height: 1px; background: var(--line);
}
.err__f input[type="range"]::-moz-range-track { height: 1px; background: var(--line); }
.err__f input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%; background: var(--acc);
  margin-top: -6.5px;
}
.err__f input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--acc);
}
.err__f input[type="range"]:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }

.err__note { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--mut); }

/* ═══ 2.6 · WHAT SHE WILL NOT DO ═══════════════════════════════════════════
   Six flat statements. No icons, no ticks, no cards. A refusal that has been
   decorated stops reading as a refusal.
   ═══════════════════════════════════════════════════════════════════════════ */

.nots { border-top: 1px solid var(--line); }
.nots li {
  padding: 22px 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-lead); line-height: 36px; font-weight: 300;
  color: var(--ink); max-width: 48ch;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .law { grid-template-columns: 64px 1fr; gap: 20px 24px; }
  .law__n { font-size: 32px; }
  .law__b { grid-column: 2; }
  .err { grid-template-columns: 1fr; gap: 28px; padding: 20px; }
  .err__n { font-size: 34px; }
  .nots li { font-size: 20px; line-height: 30px; }
}
@media (max-width: 560px) {
  .own { grid-template-columns: 1fr; }
  .own__c { padding: 26px 0; border-left: 0; border-top: 1px solid var(--line); }
  .own__c:first-child { border-top: 0; }
}

/* The correlation readout is the output of a slider somebody is dragging, and
   the number is the whole point of the control. The rule lives here rather
   than in site.css because .err__f label is declared above at the same
   specificity, and this sheet loads later — the override has to be beside
   what it overrides or it silently loses. */
@media (pointer: coarse) {
  .err__f label { font-size: 12px; }
}