/* economy/economy.css — the CEN design record.
 *
 * This page describes a token economy. The project's own records say which
 * parts of it exist and which do not, and they disagree with the page's
 * older confident voice in one specific place: the reward is minted on a
 * decision the receiving node makes alone. So the layout's job here is not
 * to be persuasive. It is to make the verification state of every claim
 * impossible to skip — which is why .state markers sit in the eyebrow of
 * every section and against every step of the transaction.
 *
 * The old page drew the on-chain / off-chain split as two tilted planes in
 * CSS 3D with pointer parallax. The shape was the right idea and the tilt
 * was decoration; 82a10f6's flat system keeps the first and drops the
 * second. Two stacked bands and a labelled rule say the same thing, need no
 * JavaScript, and survive a screen reader.
 *
 * 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(32px,5vh,52px);
      display:grid;gap:clamp(28px,4vw,60px);align-items:start;
      grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.head h1 em{font-style:normal;color:var(--flux)}
.head__panel{max-width:460px}
@media (max-width:900px){
  .head{grid-template-columns:1fr}
  .head__panel{max-width:none}
}

/* The correction. It is the single most load-bearing sentence on the page,
   so it is set apart and marked in the colour reserved for an unproven
   state — which is what the code measurement says this is. */
.correction{
  border-left:2px solid var(--st-unproven);background:rgba(255,255,255,.55);
  padding:20px 22px;margin:clamp(28px,4vw,42px) 0 0;max-width:70ch;
}
.correction h3{margin-bottom:10px}
.correction p{margin-bottom:12px;color:var(--bone-2);font-size:14.5px;
              line-height:1.72}
.correction p:last-child{margin-bottom:0}
.correction code{color:var(--oxide)}

/* ---- The boundary, as two bands -------------------------------------- */
.bands{margin-top:30px;max-width:960px}
.band{border:1px solid var(--rule-2);background:rgba(255,255,255,.5);
      padding:20px 22px}
.band__tag{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
           font-family:var(--code);font-size:10.5px;letter-spacing:.18em;
           text-transform:uppercase;color:var(--bone-3);margin:0 0 16px}
.band__items{display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0;
             list-style:none}
.band__items li{font-family:var(--code);font-size:12px;letter-spacing:.02em;
                border:1px solid var(--rule-2);padding:6px 11px;
                color:var(--bone-2);background:var(--st-0)}
.band--chain .band__items li{border-style:dashed}

/* The rule between the bands is the claim. It is drawn, labelled, and
   nothing crosses it — including in the markup. */
.boundary{
  display:flex;align-items:center;gap:16px;padding:14px 0;
  font-family:var(--code);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oxide);
}
.boundary::before,.boundary::after{content:"";flex:1;height:1px;
                                   background:var(--oxide)}

/* ---- Transaction ----------------------------------------------------- */
.steps{padding:0;margin:24px 0 0;border-top:1px solid var(--rule-2)}
.steps li{list-style:none;display:grid;
          grid-template-columns:2.6rem minmax(0,1fr) 8.5rem auto;
          gap:8px clamp(14px,2vw,26px);align-items:baseline;
          padding:15px 0;border-bottom:1px solid var(--rule)}
.steps__n{font-family:var(--code);font-size:12px;color:var(--bone-3);
          font-variant-numeric:tabular-nums}
.steps__what{color:var(--bone-2);font-size:14.5px;line-height:1.55}
.steps__where{font-family:var(--code);font-size:11px;letter-spacing:.12em;
              text-transform:uppercase;color:var(--bone-3)}
.steps li .state{justify-self:end}
@media (max-width:820px){
  .steps li{grid-template-columns:2.6rem minmax(0,1fr)}
  .steps__where{grid-column:2}
  .steps li .state{grid-column:2;justify-self:start}
}

/* ---- Rules and rejections -------------------------------------------- */
.rules{display:grid;gap:clamp(20px,2.4vw,30px);
       grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:26px}
.rules article{border:1px solid var(--rule);background:rgba(255,255,255,.5);
               padding:22px 22px 24px}
.rules__head{display:flex;justify-content:space-between;align-items:center;
             gap:12px;margin-bottom:12px}
.rules__n{font-family:var(--code);font-size:11.5px;color:var(--bone-3);
          font-variant-numeric:tabular-nums;letter-spacing:.1em}
.rules h3{margin-bottom:9px}
.rules p{margin:0;color:var(--bone-2);font-size:14.5px}

.rejected{margin:26px 0 0;display:grid;
          grid-template-columns:minmax(0,24rem) minmax(0,1fr);
          gap:0;border-top:1px solid var(--rule-2)}
.rejected dt{padding:16px 24px 16px 0;border-bottom:1px solid var(--rule);
             font-weight:560;color:var(--bone);line-height:1.4}
.rejected dd{margin:0;padding:16px 0;border-bottom:1px solid var(--rule);
             color:var(--bone-2);font-size:14.5px}
@media (max-width:720px){
  .rejected{grid-template-columns:1fr}
  .rejected dt{padding-bottom:6px;border-bottom:0}
  .rejected dd{padding-top:0}
}

/* 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. */