/* webpi/webpi.css — the coinage, and the ledger of what is meant to realise it.
 *
 * WHAT THIS PAGE IS. Webπ is not a standard, a specification or a protocol.
 * It is this project's name for one argument: that the value a person's
 * information and intelligence creates should return to that person. The old
 * page spent its first screen animating a 3 turning into a π over a scanline
 * field, which is the least checkable thing on the site rendered as its most
 * elaborate graphic. 82a10f6 asked for an instrument instead of an ornament.
 *
 * So the page now leads with the definition in one paragraph, and gives the
 * rest of its length to the thing a reader can actually use: the eight
 * projects said to realise the argument, each carrying how far it has been
 * taken. That is the ledger; the coinage is the caption.
 *
 * The old page also set "WEBπ = OWNERSHIP × INTELLIGENCE × VERIFIABILITY" as
 * a display equation. Under the rule that measured things are monospace, an
 * equation that computes nothing must not be typeset as one. It is gone
 * rather than demoted, because there was no argument left in it once it
 * stopped pretending to be arithmetic.
 *
 * Contrast is design.css's job now: --bone-3 was retuned to #54605F there
 * after this file measured it failing AA at the bottom of the stratum stack.
 */

/* ---- Site chrome ----------------------------------------------------- */
.masthead{
  display:flex;align-items:baseline;gap:14px clamp(16px,3vw,40px);flex-wrap:wrap;
  padding:16px var(--pad-x);border-bottom:1px solid var(--rule);
  background:var(--st-0);
}
.masthead__brand{font-weight:660;letter-spacing:-.02em;font-size:16px;
                 color:var(--bone);border-bottom:0}
.masthead__brand em{font-style:normal;color:var(--bone-3);font-weight:400}
.masthead__brand:hover{color:var(--flux-2)}
.masthead nav{
  display:flex;gap:10px clamp(12px,2vw,24px);flex-wrap:wrap;margin-left:auto;
  font-family:var(--code);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;
}
.masthead nav a{color:var(--bone-2);border-bottom:1px solid transparent;
                padding-bottom:2px}
.masthead nav i{font-style:normal;text-transform:none}
.masthead nav a:hover{color:var(--flux);border-bottom-color:var(--flux)}
.masthead nav a[aria-current=page]{color:var(--flux);border-bottom-color:var(--flux)}

.colophon{
  padding:32px var(--pad-x) 40px;border-top:1px solid var(--rule-2);
  background:var(--st-3);display:flex;gap:12px 26px;flex-wrap:wrap;
  align-items:baseline;font-family:var(--code);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);
}
.colophon a{color:var(--bone-2)}
.colophon a:hover{color:var(--flux-2)}
.colophon__note{margin-left:auto;text-transform:none;letter-spacing:0;
                font-family:var(--sans);font-size:12.5px}

/* No contrast correction here any more. This file briefly rebound --bone-3
   on the darker strata, because at #5E6B6A it measured 3.85:1 on --st-3.
   design.css has since moved the token itself to #54605F, which clears the
   floor on every stratum, so the local patch is deleted rather than left to
   fight the system it was compensating for. Re-measured after: worst text on
   these pages is the token's own 5.75:1. */

/* ---- Head ------------------------------------------------------------ */
.head{padding:clamp(56px,8vh,100px) var(--pad-x) clamp(36px,5vh,56px)}
.head .lede{max-width:60ch}
/* The π stays the ink colour. gl/preview.html accents one word of its h1 in
   --flux, and that word is a deictic pointing at the live instrument beside
   it — colour on something true. A letter of a brand name is not that, so it
   gets no accent here however tempting the glyph is. */
.head h1 .pi{font-style:normal}

.definition{
  max-width:66ch;margin-top:26px;padding:18px 22px;
  border-left:2px solid var(--rule-2);background:rgba(255,255,255,.5);
}
.definition p{margin:0;color:var(--bone-2);font-size:14.5px;line-height:1.72}
.definition p + p{margin-top:11px}
.definition strong{color:var(--bone)}

/* ---- The three shifts ------------------------------------------------ */
.shifts{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--rule-2)}
.shifts > div{display:grid;
              grid-template-columns:minmax(0,14rem) minmax(0,14rem) minmax(0,1fr);
              gap:6px clamp(14px,2vw,30px);align-items:baseline;
              padding:18px 0;border-bottom:1px solid var(--rule)}
.shifts__from{font-family:var(--code);font-size:12.5px;color:var(--bone-3);
              text-decoration:line-through;text-decoration-color:var(--rule-2)}
.shifts__to{font-family:var(--code);font-size:12.5px;color:var(--bone)}
.shifts__why{color:var(--bone-2);font-size:14.5px;line-height:1.55}
@media (max-width:760px){
  .shifts > div{grid-template-columns:1fr 1fr}
  .shifts__why{grid-column:1 / -1}
}

/* ---- The ledger ------------------------------------------------------ */
/* Eight rows, not eight cards. A constellation of panels invites the eye to
   pick a favourite; a ledger makes you read the state column. */
.ledger{padding:0;margin:26px 0 0;border-top:1px solid var(--rule-2)}
.ledger li{list-style:none;display:grid;
           grid-template-columns:2.6rem minmax(0,15rem) minmax(0,1fr) auto;
           gap:8px clamp(14px,2vw,26px);align-items:baseline;
           padding:17px 0;border-bottom:1px solid var(--rule)}
.ledger__n{font-family:var(--code);font-size:12px;color:var(--bone-3);
           font-variant-numeric:tabular-nums}
.ledger__name{font-family:var(--code);font-size:13.5px;color:var(--bone);
              letter-spacing:-.005em}
.ledger__name span{display:block;font-family:var(--sans);font-size:14.5px;
                   color:var(--bone-2);letter-spacing:0;margin-top:3px}
.ledger__what{color:var(--bone-2);font-size:14.5px;line-height:1.55}
.ledger li .state{justify-self:end}
@media (max-width:820px){
  .ledger li{grid-template-columns:2.6rem minmax(0,1fr)}
  .ledger__what{grid-column:1 / -1}
  .ledger li .state{grid-column:2;justify-self:start}
}

/* ---- The hinge ------------------------------------------------------- */
.hinge{max-width:70ch;border-left:2px solid var(--st-unproven);
       background:rgba(255,255,255,.55);padding:20px 22px;margin-top:26px}
.hinge p{margin:0 0 12px;color:var(--bone-2);font-size:14.5px;line-height:1.72}
.hinge p:last-child{margin-bottom:0}
.hinge code{color:var(--oxide)}

/* This file briefly re-declared the retired --bg / --fg / --amber tokens so
   that consent-gate.css, which still referenced them, would paint on the pale
   ground instead of falling through to its dark literals. consent-gate.css
   has since been ported to design.css's tokens directly, so the shim is gone
   rather than left to shadow names nothing reads. */