/* participation.css — the contribute page, on the shared system.
 *
 * This file used to be a 700-line standalone theme with its own palette,
 * its own dark mode and a full form-validation UI. The form was withdrawn
 * with the Participation Terms it required consent to; what was left was a
 * stylesheet for controls that no longer exist. design.css is the ground
 * now, and this sheet is only what one short page needs on top of it.
 *
 * The page is laid out as strata, which is design.css's first rule doing
 * literal work here: the surface says what Centram is, the next layer down
 * says what its central claim actually measured, the layer below that is
 * the six roles, and the floor is the plain-language status. The ground
 * darkens as the argument gets more uncomfortable.
 *
 * Colour appears twice on the whole page: on the verification state of the
 * central claim, and on links. Nothing else earns it.
 */

body{overflow-x:hidden}

/* ---- Bar ------------------------------------------------------------- */
.bar{
  display:flex;align-items:center;gap:22px;
  padding:14px var(--pad-x);border-bottom:1px solid var(--rule);
}
.bar__brand{display:flex;align-items:baseline;gap:9px;border-bottom:0;color:var(--bone);
            font-weight:640;letter-spacing:-.02em;font-size:15.5px}
.bar__brand:hover{color:var(--flux)}
.bar__brand img{width:15px;height:15px;align-self:center}
.bar__brand em{font-family:var(--code);font-style:normal;font-size:10.5px;
               letter-spacing:.18em;text-transform:uppercase;color:var(--bone-2)}
.bar__nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.bar__nav a{font-family:var(--code);font-size:11px;letter-spacing:.14em;
            text-transform:uppercase;color:var(--bone-2);border-bottom:0}
.bar__nav a:hover{color:var(--flux)}
.bar__nav a[aria-current=page]{color:var(--flux)}

/* ---- Hero ------------------------------------------------------------ */
.hero{padding:clamp(56px,9vh,104px) var(--pad-x) clamp(48px,7vh,84px)}
.hero h1 em{font-style:normal;color:var(--flux)}

/* Three facts a would-be contributor can check before reading further.
   They are facts, so they are monospace. */
.facts{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin:26px 0 0;max-width:none;
  font-family:var(--code);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--bone-2);
}
.facts span{display:flex;align-items:center;gap:11px}
.facts span::before{content:"";width:5px;height:5px;background:var(--rule-2);flex:none}

/* ---- Shared section furniture ---------------------------------------- */
.stratum h2{margin-bottom:14px}
.stratum > .wrap > .lede{margin-bottom:34px}

/* The verdict block. This is the one place on the page where a colour is
   spent, because it is the one place reporting a measured state. */
.verdict{
  border:1px solid var(--rule-2);background:rgba(255,255,255,.6);
  padding:22px 24px;max-width:640px;margin:0 0 26px;
}
.verdict .panel-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* The artifact path is one unbreakable token. At 375px it ran off the panel
   and was clipped, which loses the end of the filename -- the part that says
   which model the run was at. */
.verdict .panel-title span:first-child{overflow-wrap:anywhere;min-width:0}
.verdict .row{font-size:12.5px}
.verdict__note{
  margin:16px 0 0;font-size:13px;color:var(--bone-2);line-height:1.55;max-width:none;
}
.verdict__note code{font-size:.92em}

/* ---- Roles ----------------------------------------------------------- */
/* Three across, not four: the fourth column squeezes a repository path to
   about twenty characters and every card starts hyphenating. */
.roles{margin-top:6px;max-width:1040px;
       grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.role{display:flex;flex-direction:column}
.role h3{margin-bottom:8px}
.role p{font-size:14.5px;color:var(--bone-2);margin-bottom:14px}
.role dl{margin:auto 0 0;font-family:var(--code);font-size:11.5px;line-height:1.6}
.role dt{color:var(--bone-2);letter-spacing:.14em;text-transform:uppercase;
         font-size:10px;margin-bottom:3px}
.role dd{margin:0 0 10px;color:var(--bone);word-break:break-word}
.role dd:last-child{margin-bottom:0}

/* Was: an override forcing .small to --bone-2, because --bone-3 measured
   3.85:1 on --st-3 -- below AA. 4ccda39 fixed the token itself (#5E6B6A ->
   #54605F, now 4.54:1 on the darkest stratum), so the page-scoped patch is
   gone. Page overrides of a system token hide the system's bug instead of
   fixing it, and go stale the moment it is fixed -- as this one did, along
   with the 5.1:1 figure it quoted, which was never right. */

/* ---- Steps ----------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;max-width:var(--measure)}
.steps li{
  counter-increment:step;display:grid;grid-template-columns:30px minmax(0,1fr);
  gap:16px;padding:16px 0;border-bottom:1px dotted var(--rule-2);
}
.steps li:last-child{border-bottom:0}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--code);font-size:11.5px;color:var(--bone-2);padding-top:2px;
}
.steps span{color:var(--bone-2);font-size:14.5px}

/* ---- Footer ---------------------------------------------------------- */
/* Named site-foot, not foot: an earlier draft used .foot for both this
   element and the note inside .verdict, and the footer's padding, border
   and st-3 background were landing on that paragraph. */
.site-foot{
  padding:26px var(--pad-x);border-top:1px solid var(--rule-2);background:var(--st-3);
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;
  font-family:var(--code);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2);
}
.site-foot nav{display:flex;flex-wrap:wrap;gap:10px 20px;margin-left:auto}

@media (max-width:640px){
  .bar{flex-wrap:wrap;gap:12px 18px}
  .bar__nav{margin-left:0;width:100%}
  .verdict{padding:18px 16px}
  .site-foot nav{margin-left:0}
}