/* The curator dashboard's own layer over the Ethos design system: page chrome, the gold band, stamps, cards and
   lists, the leaderboard, the join steps and the stats charts. Every colour is a DS token from /ds; no hex here. */
:root {
  --page: var(--ethos-bg-sunken);
  --card: var(--ethos-bg-base);
  --raised: var(--ethos-bg-elevated);
  --ink: var(--ethos-text-default);
  --ink-2: var(--ethos-text-muted);
  --ink-3: var(--ethos-text-faint);
  --line: var(--ethos-border-split);
  --gold: var(--ethos-gradient-gold);
  --on-gold: var(--ethos-color-text-on-paper);
  --display: var(--ethos-font-family-display);
  --mono: var(--ethos-font-family-mono);
  --sans: var(--ethos-font-family-sans);
  --max: 1216px;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--page);
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--ethos-font-size-sm);
  line-height: var(--ethos-font-size-sm--line-height);
}
a {
  color: var(--ethos-primary-link);
  text-decoration: none;
}
a:hover {
  color: var(--ethos-primary-default);
}
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}
button {
  font: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--ethos-primary-default);
  outline-offset: 2px;
}
.band-gold :focus-visible {
  outline-color: var(--on-gold);
}

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
}
h1,
h2,
h1.display,
h2.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.display.sm {
  font-size: 18px;
  line-height: 1.2;
}
.display.md {
  font-size: 22px;
  line-height: 1.2;
}
.display.lg {
  font-size: 28px;
  line-height: 1.1;
}
.display.xl {
  font-size: 40px;
  line-height: 1;
}
.display small,
.pts small {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.huge {
  font-family: var(--display);
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.huge small {
  font-size: 36px;
}
.lede {
  font-size: var(--ethos-font-size-lg);
  line-height: var(--ethos-font-size-lg--line-height);
  color: var(--ethos-text-body);
  max-width: 46ch;
  text-wrap: pretty;
}
.kicker {
  font-family: var(--mono);
  font-size: var(--ethos-font-size-sm);
  color: var(--ink-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gold-text {
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mono {
  font-family: var(--mono);
}
.strong {
  font-weight: 600;
}
.dim {
  opacity: 0.85;
}
.faint {
  color: var(--ink-3);
}
.ok {
  color: var(--ethos-success-default);
}
.warning {
  color: var(--ethos-warning-default);
}
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 2px solid currentColor;
  border-radius: var(--ethos-radius-sm);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--ethos-font-size-sm);
  transform: rotate(-2deg);
  align-self: flex-start;
  white-space: nowrap;
}
.stamp.sm {
  font-size: 11px;
  padding: 4px 10px;
}
.ul {
  color: inherit;
  font-weight: 600;
  font-size: var(--ethos-font-size-md);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ul:hover {
  color: inherit;
  opacity: 0.8;
}

/* ---------- chrome ---------- */
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  min-height: 64px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.brand .ei-ethos-wordmark {
  font-size: 22px;
  width: 86px;
}
.brand .word {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink-2);
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.band-gold .brand,
.band-gold .brand .word {
  color: inherit;
}
.band-gold .brand .word {
  opacity: 0.75;
  border-color: color-mix(in srgb, var(--on-gold) 30%, transparent);
}
.topbar nav {
  display: flex;
  gap: 24px;
  flex: 1;
  font-size: var(--ethos-font-size-md);
  font-weight: 600;
  flex-wrap: wrap;
}
.topbar nav a {
  color: var(--ink-2);
  /* Inter's caps sit high in their line box next to the Queens wordmark; two pixels bring the two onto one line */
  position: relative;
  top: 2px;
}
.topbar nav a:hover {
  color: var(--ink);
}
.topbar nav a.active {
  color: var(--ink);
  border-bottom: 2px solid var(--ethos-color-gold-2);
  padding-bottom: 2px;
}
.band-gold .topbar nav a {
  color: inherit;
  opacity: 0.8;
}
.band-gold .topbar nav a:hover {
  opacity: 1;
}
.topbar .short {
  display: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.chip-text .n {
  font-weight: 600;
}
.chip-text .s {
  font-size: 10px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.chip-text .s .ei {
  font-size: 9px;
  color: var(--level);
}
main {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px 64px;
  flex: 1;
}
.foot {
  padding: 20px 32px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--ink-3);
}
.foot .links {
  display: flex;
  gap: 16px;
  align-items: center;
}
.foot a {
  color: var(--ink-2);
}
.foot .e-btn {
  color: var(--ink-2);
  height: 24px;
}

/* ---------- gold band (home hero) ---------- */
.band-gold {
  position: relative;
  background: var(--gold);
  color: var(--on-gold);
  overflow: hidden;
}
.bgmark {
  position: absolute;
  pointer-events: none;
  opacity: 0.14;
  color: inherit;
}
.band-gold .hero > .bgmark {
  right: -140px;
  top: 40px;
  font-size: 620px;
}
.band-gold .hero {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 32px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero .row,
.row.wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  max-width: 11ch;
  color: inherit;
  position: relative;
}
.hero .lede {
  color: inherit;
  font-size: var(--ethos-font-size-xl);
  line-height: var(--ethos-font-size-xl--line-height);
  font-weight: 500;
  position: relative;
}
.cta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.strip {
  position: relative;
  display: flex;
  margin-top: 16px;
  border-top: 2px solid currentColor;
  flex-wrap: wrap;
}
.strip > div {
  flex: 1;
  min-width: 200px;
  padding: 16px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
}
.strip > div:first-child {
  padding-left: 0;
}
.strip > div + div {
  border-left: 2px solid currentColor;
}
.strip .h {
  font-family: var(--display);
  font-size: 36px;
  line-height: 40px;
  white-space: nowrap;
  font-weight: 400;
}
.e-btn.inverted {
  background: var(--on-gold);
  color: var(--ethos-level-neutral);
  border-color: transparent;
  font-weight: 600;
}
.e-btn.inverted:hover:not(:disabled) {
  color: var(--ethos-level-neutral);
  background: color-mix(in srgb, var(--on-gold) 88%, transparent);
}
.e-btn.golden {
  font-weight: 600;
}
.e-btn.outline {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  font-weight: 600;
}
.e-btn.outline:hover:not(:disabled) {
  color: inherit;
  opacity: 0.85;
}
.e-btn.lg {
  height: 52px;
  padding: 0 24px;
  font-size: var(--ethos-font-size-lg);
}
.e-btn .ei {
  font-size: 1.1em;
}

/* ---------- page scaffolding ---------- */
.page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 32px;
}
.sect {
  padding-top: 64px;
}
.sect + .sect {
  padding-top: 56px;
}
.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 40px;
  align-items: center;
}
.two.top {
  align-items: start;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}
.col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.col.tight {
  gap: 10px;
}
.col > .lede {
  max-width: 60ch;
}
.between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.between.wrap {
  flex-wrap: wrap;
  align-items: center;
}
.between.head {
  align-items: flex-end;
}
.card {
  background: var(--card);
  border-radius: var(--ethos-radius-2xl);
  position: relative;
}
.card.pad {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 3px solid;
  border-image: var(--gold) 1;
  padding-left: 20px;
}
.callout .big {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
}

/* lists: a card of rows */
.list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.list .row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.list .row:last-child {
  border-bottom: 0;
}
.list .row .l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.list .row.head {
  grid-template-columns: 1fr;
  padding: 16px 28px;
}
.list .empty {
  padding: 20px;
  color: var(--ink-2);
}

/* what a post can earn */
.ladder-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--ethos-radius-2xl);
  overflow: hidden;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--page) 70%, transparent);
}
.ladder-card .head {
  display: flex;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
}
.ladder-card .row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
}
.ladder-card .row.gold {
  grid-template-columns: 1fr auto;
  background: var(--gold);
  color: var(--on-gold);
  border: 0;
}
.ladder-card .ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ethos-bg-container);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.ladder-card .txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ladder-card .t {
  font-family: var(--display);
  font-size: 22px;
}
.ladder-card .d {
  color: var(--ink-2);
}
.ladder-card .gold .d {
  color: inherit;
  opacity: 0.85;
  font-weight: 600;
}
.ladder-card .pts {
  font-family: var(--display);
  font-size: 56px;
  line-height: 1;
}
.ladder-card .pts.whuf {
  font-size: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ladder-card .pts.whuf .ei {
  font-size: 1em;
}

/* top five on the home page */
.toplist {
  list-style: none;
  padding: 0;
  background: var(--card);
  border-radius: var(--ethos-radius-xl);
  overflow: hidden;
}
.toplist li {
  display: grid;
  grid-template-columns: 36px 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.toplist li:last-child {
  border-bottom: 0;
}
.toplist li.first {
  background: color-mix(in srgb, var(--ethos-color-gold-2) 9%, transparent);
}
.toplist li.self {
  background: var(--ethos-bg-self-row);
}
.toplist .rank {
  font-family: var(--display);
  font-size: 28px;
  color: var(--ink-2);
}
.toplist .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.toplist .pts {
  font-family: var(--display);
  font-size: 28px;
  white-space: nowrap;
}
.name {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ethos-font-size-md);
}
.name.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
}
.verified {
  color: var(--ethos-primary-default);
  font-size: 14px;
}
.fair {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.fair > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ethos-text-body);
  font-size: var(--ethos-font-size-md);
  line-height: var(--ethos-font-size-md--line-height);
}
.fair .h,
.fair .h .gold-text {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
}

.band-cta {
  position: relative;
  overflow: hidden;
  margin-top: 32px;
  padding: 56px 40px;
  border-radius: var(--ethos-radius-2xl);
  background: var(--ethos-gradient-gold-secondary);
  color: var(--on-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.band-cta .bgmark {
  left: -60px;
  bottom: -80px;
  font-size: 320px;
}
.band-cta > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.band-cta .h {
  font-family: var(--display);
  font-size: 48px;
  line-height: 1;
  max-width: 16ch;
  text-wrap: balance;
}
.band-cta .s {
  font-size: var(--ethos-font-size-lg);
  font-weight: 500;
}
.band-cta .e-btn {
  position: relative;
}

/* ---------- avatars ---------- */
.e-avatar img,
.e-avatar .ph {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(var(--av) * 0.42);
  text-transform: lowercase;
}
.e-avatar {
  width: var(--av);
  height: var(--av);
  flex: none;
}
.e-avatar.scored {
  margin-bottom: 10px;
}
.e-avatar .score.plain {
  font-family: var(--sans);
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
  color: var(--ink);
}
.e-avatar .score .glyph {
  width: 8px;
  height: 8px;
  font-size: 8px;
  flex: none;
}

/* ---------- leaderboard ---------- */
.podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  align-items: stretch;
}
.pod {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--ethos-radius-2xl);
  background: var(--card);
  color: var(--ink);
}
.pod:hover {
  color: var(--ink);
  background: var(--raised);
}
.pod .bg {
  position: absolute;
  right: 16px;
  top: -24px;
  font-size: 160px;
  line-height: 1;
  opacity: 0.08;
}
.pod .e-avatar {
  align-self: flex-start;
  border-radius: 50%;
}
.pod .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  min-width: 0;
}
.pod .sub {
  font-weight: 600;
  opacity: 0.85;
  color: var(--ink-2);
}
.pod .pts {
  font-size: 56px;
  line-height: 1;
  margin-top: auto;
}
.pod.rk1 {
  background: var(--gold);
  color: var(--on-gold);
}
.pod.rk1:hover {
  color: var(--on-gold);
  background: var(--gold);
  filter: brightness(1.04);
}
.pod.rk1 .bg {
  opacity: 0.14;
}
.pod.rk1 .sub,
.pod.rk1 .pts small {
  color: inherit;
  opacity: 0.85;
}
.pod.rk1 .verified {
  color: inherit;
}
.pod.rk1 .e-avatar img,
.pod.rk1 .e-avatar .ph {
  box-shadow: 0 0 0 2px var(--on-gold);
}
.pod.rk2 .e-avatar img,
.pod.rk2 .e-avatar .ph {
  box-shadow: 0 0 0 2px var(--ethos-color-rank-silver-light);
}
.pod.rk3 .e-avatar img,
.pod.rk3 .e-avatar .ph {
  box-shadow: 0 0 0 2px var(--ethos-color-rank-bronze-light);
}
.tools {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.e-input.search {
  width: 240px;
  height: 32px;
  background: var(--card);
}
.e-segmented {
  background: var(--card);
}
.e-segmented .seg {
  text-decoration: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.e-segmented .seg.active {
  color: var(--ink);
}
.table-card {
  overflow: hidden;
}
.table-card .scroll {
  overflow-x: auto;
}
.e-table {
  min-width: 720px;
}
.e-table th {
  background: transparent;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 12px;
}
.e-table th:first-child,
.e-table td:first-child {
  padding-left: 24px;
}
.e-table .last {
  padding-right: 24px;
}
.e-table td {
  padding: 12px;
  vertical-align: middle;
}
.e-table tbody tr:last-child td {
  border-bottom: 0;
}
.e-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.e-table .rank .display,
.e-table .last .display {
  font-size: 24px;
}
.e-table .who {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.e-table .who > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.e-table .who:hover .name {
  color: var(--ethos-primary-default);
}
.e-table tr.flag td {
  background: color-mix(in srgb, var(--ethos-warning-default) 7%, transparent);
}
.e-table tr[hidden] {
  display: none;
}
.table-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}

/* ---------- profile ---------- */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  color: var(--ink-2);
}
.hero-card {
  overflow: hidden;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero-card .bgmark {
  right: -60px;
  top: -60px;
  font-size: 420px;
  opacity: 0.05;
}
.hero-card .who {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-card .who > .e-avatar img,
.hero-card .who > .e-avatar .ph {
  box-shadow:
    0 0 0 3px var(--card),
    0 0 0 6px var(--level),
    0 0 48px color-mix(in srgb, var(--level) 45%, transparent);
}
.hero-card .id {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-card .id .row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-card .meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-card .meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ethos-text-body);
}
.hero-card .meta a:hover {
  color: var(--ink);
}
.score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.e-score-hero .glyph {
  font-size: 30px;
}
.hero-card .split {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  align-items: stretch;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.hero-card .split .col {
  gap: 6px;
}
.breakdown {
  background: var(--page);
  border-radius: var(--ethos-radius-xl);
}
.breakdown .row .display.lg {
  min-width: 64px;
  text-align: right;
}
.breakdown .total {
  grid-template-columns: 1fr auto;
}
.breakdown .total.gold {
  background: var(--gold);
  color: var(--on-gold);
  margin-top: auto;
}
.breakdown .total.gold .sub {
  font-weight: 600;
  opacity: 0.85;
}
.breakdown .total.gold .display.xl {
  line-height: 1;
}
.rounds .row {
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  padding: 18px 24px;
}
.rounds .paid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.e-dot.ok {
  background: var(--ethos-success-default);
  width: 6px;
  height: 6px;
}
.post-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 24px;
  border-radius: var(--ethos-radius-xl);
  color: var(--ink);
}
.post-row:hover {
  color: var(--ink);
  background: var(--raised);
}
.post-row .l {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.post-row .display.md {
  font-size: 20px;
}

/* ---------- join ---------- */
.join {
  padding-top: 40px;
  align-items: start;
}
.join .intro {
  gap: 22px;
}
.join .intro h1 {
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.98;
  max-width: 12ch;
}
.steps {
  list-style: none;
  overflow: hidden;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--page) 70%, transparent);
}
.steps ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.steps > ol > li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.steps > ol > li .n {
  font-size: 48px;
  line-height: 1;
  color: var(--ink-2);
}
.steps > ol > li.done .n {
  color: var(--ethos-success-default);
}
.steps .body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.steps .body .between {
  align-items: center;
  flex-wrap: wrap;
}
.steps .row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.steps .row .l {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 160px;
}
.steps .row .e-btn.text {
  margin-left: auto;
}
.steps .ic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--page);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
}
.steps .e-alert {
  margin: 16px 28px 0;
}
.consents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.e-check.consent {
  align-items: flex-start;
}
.e-check.consent .box {
  margin-top: 3px;
  flex: none;
}
.e-check.consent .txt {
  display: flex;
  flex-direction: column;
}
.e-check.consent .t {
  font-weight: 600;
  font-size: var(--ethos-font-size-md);
}
.e-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.e-check {
  position: relative;
}
.how {
  border-radius: var(--ethos-radius-lg);
  background: var(--page);
  padding: 12px 14px;
}
.how summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.how summary::-webkit-details-marker {
  display: none;
}
.how summary .ei {
  color: var(--ethos-primary-default);
}
.how ol {
  margin: 10px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ethos-text-body);
}
.steps > ol > li.finish {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--gold);
  color: var(--on-gold);
  border: 0;
}
.steps > ol > li.finish .l {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.steps > ol > li.finish .e-btn:disabled {
  background: var(--on-gold);
  color: var(--ethos-level-neutral);
  opacity: 0.55;
}
.gap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gap .huge {
  font-size: 112px;
  line-height: 0.9;
}
.progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.progress .track {
  position: relative;
  height: 10px;
  border-radius: var(--ethos-radius-full);
  background: var(--card);
}
.progress .fill {
  height: 100%;
  background: var(--gold);
  border-radius: inherit;
}
.progress .mark {
  position: absolute;
  top: -6px;
  width: 3px;
  height: 22px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
}
.progress .mark-l {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
}
.progress .axis {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.progress .axis .strong {
  color: var(--ink);
}
.ladder {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rung {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  gap: 14px;
  align-items: center;
  opacity: 0.45;
  position: relative;
}
.rung.mine,
.rung.gate {
  opacity: 1;
}
.rung.gate {
  padding-top: 14px;
  margin-top: 6px;
}
.rung .lv {
  color: var(--level);
}
.rung .bar {
  height: 14px;
  border-radius: 3px;
  background: var(--level);
}
.rung.mine .bar {
  box-shadow: 0 0 24px color-mix(in srgb, var(--level) 50%, transparent);
}
.rung .e-text {
  text-align: right;
}
.rung.gate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: 2px dashed var(--ethos-color-gold-2);
}
.gate-l,
.you-l {
  position: absolute;
  padding: 2px 10px;
  border-radius: var(--ethos-radius-full);
  font-weight: 600;
  font-size: var(--ethos-font-size-sm);
  white-space: nowrap;
  z-index: 1;
}
.gate-l {
  right: 0;
  top: -13px;
  background: var(--gold);
  color: var(--on-gold);
}
.you-l {
  left: 124px;
  top: -10px;
  transform: translateX(32%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--page);
}
.you-l .ei {
  font-size: 10px;
}
.tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 10px;
}
.tip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--ethos-radius-xl);
  color: var(--ink);
}
.tip:hover {
  color: var(--ink);
  background: var(--raised);
}
.tip > .ei {
  font-size: 20px;
  color: var(--ethos-primary-default);
}

/* ---------- my stats ---------- */
.notice {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-radius: var(--ethos-radius-xl);
  background: var(--card);
  border-left: 3px solid var(--ethos-primary-default);
  flex-wrap: wrap;
}
.notice.warn {
  border-left-color: var(--ethos-warning-default);
}
.notice > .ei {
  font-size: 20px;
  color: var(--ethos-primary-default);
}
.notice.warn > .ei {
  color: var(--ethos-warning-default);
}
.notice > span:not(.ei) {
  flex: 1;
  min-width: 240px;
  color: var(--ethos-text-body);
}
.notice .strong {
  color: var(--ink);
  font-size: var(--ethos-font-size-md);
}
.payout {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 0;
}
.payout .bgmark {
  left: -60px;
  bottom: -90px;
  font-size: 360px;
  opacity: 0.05;
}
.payout .est {
  position: relative;
  padding: 32px;
  gap: 10px;
  border-right: 1px solid var(--line);
}
.payout .est .huge {
  font-size: 96px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.payout .est .e-text.body {
  max-width: 40ch;
}
.facts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.payout .facts {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.facts > span {
  display: flex;
  flex-direction: column;
}
.payout .col:last-child {
  gap: 0;
  position: relative;
}
.pad-h {
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.payout .breakdown {
  background: transparent;
  border-radius: 0;
  flex: 1;
  /* a column, so the gold total sits on the card's bottom edge whatever the other side's height */
  display: flex;
  flex-direction: column;
}
.payout .breakdown .row {
  padding: 18px 28px;
}
.chart-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.legend {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
}
.legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend i,
.chart .day i {
  display: block;
  border-radius: 3px 3px 0 0;
}
.legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
i.gold {
  background: var(--gold);
}
i.all {
  background: var(--raised);
}
.chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chart .bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 180px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.chart .day {
  flex: 1;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 160px;
  min-width: 0;
}
.chart .day i {
  flex: 1;
  min-height: 2px;
}
.chart .bars[style*="--n:3"] .day,
.chart .bars[style*="--n:2"] .day,
.chart .bars[style*="--n:1"] .day {
  max-width: 120px;
}
.chart .axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.e-table.posts {
  min-width: 520px;
}
.e-table.posts td a {
  color: var(--ink);
}
.e-table.posts td a:hover {
  color: var(--ethos-primary-default);
}
.e-table .last .display {
  font-size: 22px;
}
.repliers .row {
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  padding: 12px 24px;
}
.repliers .row a {
  color: var(--ink);
}
.repliers .row a:hover {
  color: var(--ethos-primary-default);
}

/* ---------- my link ---------- */
.main-link {
  overflow: hidden;
  background: var(--gold);
  color: var(--on-gold);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.main-link .bgmark {
  right: -80px;
  top: -60px;
  font-size: 380px;
}
.main-link .between,
.main-link .url,
.main-link .cta {
  position: relative;
}
.main-link .url {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: break-all;
}
.maker {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.maker .e-input {
  background: var(--page);
  height: 44px;
}
.maker .e-btn {
  align-self: flex-start;
}
.result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--ethos-radius-xl);
  background: var(--page);
}
.result .l {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.result .big {
  font-size: 22px;
  font-weight: 600;
  word-break: break-all;
}
.explain .e-text {
  line-height: 20px;
}
.explain .mono {
  font-size: 12px;
}
.shorts .row {
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 16px 24px;
}
.shorts .row.new {
  background: var(--ethos-bg-self-row);
}
.shorts .mono.strong {
  word-break: break-all;
}
.e-btn.icon.sm {
  width: var(--ethos-size-control-sm);
  background: var(--page);
}
.e-btn.icon .ei {
  font-size: 14px;
}
.wallet .e-input {
  background: var(--page);
}
.wallet .e-btn {
  align-self: flex-start;
  background: var(--page);
}
.e-help.ok {
  color: var(--ethos-success-default);
}
[data-copy].copied {
  color: var(--ethos-success-default);
}
.e-btn.inverted.copied {
  color: var(--ethos-success-default);
}

/* ---------- prose pages ---------- */
.prose {
  max-width: 720px;
  gap: 20px;
}
.prose ul {
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: var(--ethos-text-body);
  font-size: var(--ethos-font-size-md);
  line-height: var(--ethos-font-size-md--line-height);
}
.prose .form {
  gap: 16px;
}
.prose .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}
.prose .f {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prose .form .e-input {
  background: var(--page);
}
.prose .form .e-btn {
  align-self: flex-start;
}

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .topbar {
    padding: 0 16px;
    gap: 14px;
  }
  .topbar nav {
    gap: 14px;
    font-size: var(--ethos-font-size-sm);
  }
  main,
  .band-gold .hero {
    padding-left: 16px;
    padding-right: 16px;
  }
  .band-gold .hero {
    padding-top: 32px;
    padding-bottom: 48px;
    gap: 20px;
  }
    .strip > div {
    min-width: 100%;
    padding-left: 0 !important;
    border-left: 0 !important;
    padding-top: 12px;
  }
  .strip .h {
    font-size: 28px;
    line-height: 32px;
  }
  h1.display,
  h2.display {
    font-size: 36px;
  }
  .huge,
  .payout .est .huge {
    font-size: 64px;
  }
  .gap .huge {
    font-size: 80px;
  }
  .sect {
    padding-top: 40px;
  }
  .two {
    gap: 24px;
  }
  .band-cta {
    padding: 32px 24px;
  }
  .band-cta .h {
    font-size: 32px;
  }
  .hero-card {
    padding: 20px;
  }
  .payout .est {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 24px;
  }
  .steps li {
    grid-template-columns: 40px 1fr;
    padding: 18px;
    gap: 12px;
  }
  .steps li .n {
    font-size: 36px;
  }
  .main-link {
    padding: 24px;
  }
  .chart .bars {
    gap: 3px;
    height: 140px;
  }
  .chart .day {
    height: 120px;
  }
  .ladder {
    padding: 16px;
  }
  .rung {
    grid-template-columns: 90px 1fr 50px;
    gap: 8px;
  }
  .you-l {
    left: 100px;
  }
  .ladder-card .row {
    grid-template-columns: 1fr auto;
  }
  .ladder-card .ic {
    display: none;
  }
  .ladder-card .pts {
    font-size: 40px;
  }
}
@media (max-width: 520px) {
  .topbar .long {
    display: none;
  }
  .topbar .short {
    display: inline;
  }
  .brand .word {
    display: none;
  }
  .chip-text {
    display: none;
  }
  .e-input.search {
    width: 100%;
  }
  .list .row,
  .rounds .row,
  .shorts .row {
    padding-left: 14px;
    padding-right: 14px;
    gap: 10px;
  }
}

/* ---------- admin ---------- */
.admin .topbar .spacer { flex: 1; }
.admin .topbar .who { display: inline-flex; align-items: center; gap: 6px; }
.admin-body { display: flex; flex-wrap: wrap; flex: 1; align-items: flex-start; }
.side { width: 240px; flex: 1 1 240px; max-width: 260px; margin: 16px 0 24px 24px; padding: 12px; border-radius: var(--ethos-radius-2xl); background: var(--card); position: sticky; top: 16px; }
.e-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ethos-radius-md); color: var(--ethos-text-body); font-weight: 500; }
.e-menu-item:hover { color: var(--ink); background: var(--page); }
.e-menu-item.active { color: var(--ink); background: var(--page); }
.e-menu-item .ei { font-size: 16px; }
.e-tag.count { margin-left: auto; height: 18px; line-height: 16px; font-size: 10px; padding: 0 5px; }
.e-tag.alert { background: var(--ethos-bg-alert); }
.admin-main { flex: 999 1 560px; min-width: 0; padding: 24px 24px 64px; display: flex; flex-direction: column; gap: 20px; max-width: none; margin: 0; }
.admin-main h1.display { font-size: 40px; }
.admin-main .e-card, .admin-main .card { background: var(--card); }
.admin .e-input, .admin .e-segmented, .admin .e-stat { background: var(--page); }
.admin .e-btn:not(.primary):not(.danger):not(.text):not(.link):not(.golden):not(.inverted) { background: var(--page); }
.inline { display: inline; }
.actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.e-input.sm { height: var(--ethos-size-control-sm); padding: 0 8px; font-size: var(--ethos-font-size-sm); }
.rate { display: inline-flex; gap: 6px; align-items: center; }
.rate .e-input { width: 96px; }
.admin-table { min-width: 900px; }
.admin-table .lv { color: var(--level); }
.admin-table tr.dim td { opacity: .55; }
.admin-table .who { display: flex; align-items: center; gap: 10px; }
.admin-table .who > span:not(.e-avatar) { display: flex; flex-direction: column; gap: 2px; }
.rounds-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.round-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); border-radius: var(--ethos-radius-xl); }
.round-card:hover { color: var(--ink); background: var(--raised); }
.round-card.selected { outline: 1px solid var(--ethos-primary-default); }
.round-card.dashed { border: 1px dashed var(--ethos-border-control); background: transparent; }
.round-card .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.round-card .facts { gap: 14px; }
.settings { padding: 20px; display: flex; flex-direction: column; gap: 16px; border-radius: var(--ethos-radius-xl); }
.settings .e-divider { margin: 0; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.e-input.mono { font-family: var(--mono); }
.box { display: flex; flex-direction: column; gap: 8px; }
.meter { height: 8px; border-radius: var(--ethos-radius-full); background: var(--ethos-bg-container); overflow: hidden; }
.meter > div { height: 100%; background: var(--ethos-primary-default); }
.meter > div.over { background: var(--ethos-warning-default); }
.danger-zone { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.flags { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.flag-card { padding: 16px; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; border-radius: var(--ethos-radius-xl); }
.flag-card.dim { opacity: .7; }
.flag-card > .ic { font-size: 20px; margin-top: 2px; }
.flag-card .body { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.flag-card .body .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flag-card .strong.md { font-size: var(--ethos-font-size-md); }
.flag-card .meta { display: flex; gap: 14px; flex-wrap: wrap; }
.flag-card .meta .who { display: inline-flex; align-items: center; gap: 6px; }
.flag-card .actions { align-items: center; }
.flag-card .clicks summary { list-style: none; display: inline-flex; width: auto; cursor: pointer; }
.flag-card .clicks summary::-webkit-details-marker { display: none; }
.flag-card .clicks .scroll { overflow-x: auto; margin-top: 8px; }
.e-table.small { min-width: 560px; }
.e-table.small td, .e-table.small th { padding: 6px 10px; }
.e-table.small .ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; }
.e-stat .value.sm { font-size: 18px; }
.e-stat .value.ok { color: var(--ethos-success-default); }
.e-stat .value.warning { color: var(--ethos-warning-default); }
.e-input.tx { width: 220px; }
.e-alert.success { background: var(--ethos-success-bg); }
.e-alert.error { background: var(--ethos-danger-bg); }
@media (max-width: 860px) {
  .side { position: static; max-width: none; margin: 16px 16px 0; }
  .admin-main { padding: 16px 16px 48px; }
  .rounds-grid { grid-template-columns: 1fr; }
  .admin .topbar .who { display: none; }
}

/* ---------- rules ---------- */
.rules { align-items: start; padding-top: 40px; }
.rules .intro { gap: 22px; }
.rules .intro h1 { font-size: clamp(44px, 5vw, 64px); line-height: .98; max-width: 12ch; }
.rules .intro .e-btn { align-self: flex-start; }
.rules-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; align-items: start; padding-top: 56px; }
.rules-list ol { list-style: none; padding: 0; margin: 0; }
.rule { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 20px 22px; border-radius: var(--ethos-radius-xl); }
.rule .n { font-size: 40px; line-height: 1; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rule .l { display: flex; flex-direction: column; gap: 6px; }
.rule .e-text.body { font-size: var(--ethos-font-size-md); line-height: var(--ethos-font-size-md--line-height); }

/* ---------- content kit ---------- */
.settings input[type=file] { color: var(--ink-2); font-size: var(--ethos-font-size-sm); }
.e-input select { appearance: auto; background: transparent; color: inherit; border: 0; outline: 0; font: inherit; flex: 1; }
.e-input select option { background: var(--card); }
.admin .topbar .stamp { align-self: center; transform: rotate(-2deg) translateY(1px); }
.chip:hover, .band-gold a:hover, .band-gold .chip:hover, .band-cta a:hover, .main-link a:hover { color: inherit; opacity: 0.85; }

.how ol li { display: list-item; padding: 0; border: 0; grid-template-columns: none; }
.steps > ol > li .how ol { list-style: decimal; }

/* ---------- for projects ---------- */
.partners-band { overflow: hidden; padding: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 32px; align-items: center; margin-top: 40px; }
.partners-band .bgmark { right: -80px; top: -100px; font-size: 460px; opacity: 0.05; }
.partners-band .col { position: relative; gap: 16px; }
.partners-band h2 { font-size: 44px; max-width: 16ch; }
.partners-band .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.partners-band .fund { gap: 12px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { aspect-ratio: 1; border-radius: var(--ethos-radius-xl); background: var(--page); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
.tile .ei, .tile .display { font-size: 28px; }
.tile.gold { background: var(--gold); color: var(--on-gold); }
.tile.dashed { background: transparent; border: 2px dashed var(--ethos-border-control); }
.partners-hero h1 { font-size: clamp(52px, 7vw, 96px); line-height: 0.94; max-width: 12ch; }
.partners-hero h1 s { text-decoration-thickness: 6px; opacity: 0.55; }
.partners-hero > .bgmark { right: -120px; top: -20px; font-size: 560px; opacity: 0.12; }
.partners { gap: 56px; padding-top: 72px; }
.partners h2.display { font-size: 44px; max-width: 18ch; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.cmp { display: flex; flex-direction: column; overflow: hidden; }
.cmp.ours { box-shadow: 0 0 0 2px var(--ethos-color-gold-2) inset; }
.cmp-head { padding: 20px 28px; border-bottom: 1px solid var(--line); }
.cmp-head.gold { background: var(--gold); color: var(--on-gold); display: flex; align-items: center; gap: 10px; border: 0; }
.cmp-head.gold .kicker { color: inherit; }
.cmp-row { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 18px 28px; border-bottom: 1px solid var(--line); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row .ei { font-size: 18px; margin-top: 2px; }
.cmp-row .bad { color: var(--ethos-danger-default); }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.steps-grid .step { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.steps-grid .step .n { font-size: 48px; line-height: 1; }
.steps-grid .step.gold { background: var(--gold); color: var(--on-gold); }
.steps-grid .step.gold .display { color: inherit; }
.access { overflow: hidden; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.access .bgmark { right: -60px; bottom: -90px; font-size: 320px; opacity: 0.05; }
.access h2 { font-size: 40px; max-width: 18ch; }
.access-form { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; align-items: end; }
.access-form .e-input { background: var(--page); height: 44px; }
.access-form .e-btn { height: 44px; }
@media (max-width: 860px) {
  .partners-band { padding: 24px; margin-top: 24px; }
  .partners-band h2, .partners h2.display, .access h2 { font-size: 32px; }
  .partners { padding-top: 40px; gap: 32px; }
}

/* ---------- profile search comboboxes ---------- */
.e-input.combo { position: relative; overflow: visible; }
.combo-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; border-radius: var(--ethos-radius-lg); background: var(--raised); box-shadow: var(--ethos-shadow-card); overflow: hidden; display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.combo-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; }
.combo-item.active, .combo-item:hover { background: color-mix(in srgb, var(--ethos-primary-default) 12%, transparent); }
.combo-item .txt { display: flex; flex-direction: column; min-width: 0; }
.combo-item .strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- demo world strip (admins only) ---------- */
.world-strip { display: flex; align-items: center; gap: 14px; padding: 8px 32px; background: var(--card); border-bottom: 1px solid var(--line); font-size: var(--ethos-font-size-sm); flex-wrap: wrap; }
.world-strip.demo { background: color-mix(in srgb, var(--ethos-warning-default) 14%, var(--card)); border-bottom-color: color-mix(in srgb, var(--ethos-warning-default) 40%, transparent); }
.world-strip .spacer { flex: 1; }
.world-strip .e-segmented { background: var(--page); }
.world-strip .e-segmented .seg { border: 0; font: inherit; background: transparent; }
.world-strip .e-segmented .seg.active { background: var(--raised); }
.add-by-handle { padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.add-by-handle .row { display: flex; gap: 8px; align-items: center; }
.add-by-handle .e-input { width: 240px; }
@media (max-width: 860px) { .world-strip { padding: 8px 16px; } }
.score-n { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.score-n .ei { font-size: 0.8em; color: var(--level, currentColor); }
.bg-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.access { overflow: visible; }
.access .bgmark { right: -60px; bottom: -90px; }
.combo-list { max-height: none; }
.combo-item .ei-ethos-mark { font-size: 9px; }


.e-input.combo .lead { display: inline-flex; align-items: center; }
.e-input.combo .lead.has-pick .e-avatar img, .e-input.combo .lead.has-pick .e-avatar .ph { width: 22px; height: 22px; font-size: 11px; }
.e-input.combo .trail { align-items: center; gap: 10px; color: var(--ethos-text-body); }
.e-input.combo .trail .score-n .ei { font-size: 10px; color: var(--level, currentColor); }
.combo-item .ei-ethos-mark { color: var(--level, currentColor); }
.e-input.combo .clear { border: 0; background: transparent; color: var(--ink-2); padding: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; }
.e-input.combo .clear:hover { background: var(--raised); color: var(--ink); }
.e-input.combo .clear .ei { font-size: 12px; }

/* ---------- my link, maker first ---------- */
.maker { position: relative; overflow: visible; }
.maker .bgmark { right: -60px; top: -80px; font-size: 300px; opacity: 0.05; }
/* The watermark paints under the form, never over the button. No z-index on the children: each would become its own
   layer and a later one (the help text) would paint over the typeahead list that opens out of an earlier one. */
.maker > :not(.bg-clip) { position: relative; }
.maker .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.maker .row .e-input { flex: 1; min-width: 260px; }
.maker .e-btn { align-self: auto; }
.shorts .row.base .l { gap: 4px; }
.change summary { cursor: pointer; list-style: none; color: var(--ethos-primary-link); display: inline-block; margin-top: 4px; }
.change summary::-webkit-details-marker { display: none; }
.change .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.change .e-input { flex: 1; min-width: 220px; height: 36px; background: var(--page); }
.e-tag.warning { color: var(--ethos-warning-default); border-color: color-mix(in srgb, var(--ethos-warning-default) 45%, transparent); background: color-mix(in srgb, var(--ethos-warning-default) 12%, transparent); }
.timer .t { font-variant-numeric: tabular-nums; }

/* ---------- content kit ---------- */
.kit .filters { display: flex; gap: 6px; flex-wrap: wrap; }
.kit .filters .e-btn { background: var(--card); }
.kit .filters .e-btn.on { background: var(--ink); color: var(--page); font-weight: 600; }
.kit .timer { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.kit .timer.warning { color: var(--ethos-warning-default); }
.kit .timer .t { font-variant-numeric: tabular-nums; }
.kit .stamp.warning { color: var(--ethos-warning-default); }
.kit .e-tag.kind { background: var(--page); }
.kit .corner { position: absolute; display: flex; gap: 8px; align-items: center; }
.kit .corner.tl { left: 20px; top: 20px; }
.kit .corner.br { right: 20px; bottom: 20px; }
.kit .meta { padding: 4px 8px; border-radius: var(--ethos-radius-sm); background: var(--page); }
.kit .mylink { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--ethos-radius-lg); background: var(--page); }
.kit .mylink.big { padding: 12px 16px; border-radius: var(--ethos-radius-xl); }
.kit .mylink.big .mono { font-size: 16px; }
.kit .mylink .l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kit .mylink .l .kicker { font-size: 10px; letter-spacing: 0.1em; }
.kit .mylink .mono { word-break: break-all; }
.kit .mylink .e-btn { background: var(--card); }
.kit .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kit .row .end { margin-left: auto; }
.kit .big-icon { font-size: 120px; opacity: 0.25; }
/* the newest item */
.kit-hero { overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 0; }
.kit-hero .visual { position: relative; background: var(--ethos-bg-elevated); min-height: 320px; display: grid; place-items: center; overflow: hidden; }
.kit-hero .visual .media { width: 100%; height: 100%; min-height: 320px; max-height: 480px; object-fit: cover; display: block; }
.kit-hero .text { position: relative; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.kit-hero h2 { font-size: 36px; line-height: 1; margin: 0; max-width: 16ch; text-wrap: balance; }
.kit-hero p { margin: 0; }
.kit-hero .row .e-btn.lg { height: 48px; padding: 0 22px; font-size: var(--ethos-font-size-lg); }
.kit-hero .row .e-btn.lg:not(.golden) { background: var(--page); }
.kit-hero .figures { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--ethos-border-split); }
.kit-hero .figures > span { display: flex; flex-direction: column; }
.kit-hero .figures .n { font-size: 24px; line-height: 1; }
/* the grid and the side column */
.kit-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(min(300px, 100%), 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .kit-main { grid-template-columns: 1fr; } }
.kit-main > .col { gap: 14px; }
.kit-main .col.gap { gap: 24px; }
.kit-main > .col > .e-btn { align-self: flex-start; background: var(--card); }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.kit-card { display: flex; flex-direction: column; overflow: hidden; }
.kit-card.talk { box-shadow: 0 0 0 2px var(--ethos-color-gold-2) inset; }
.kit-card.talk .title { font-size: 26px; line-height: 1.1; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kit-card.done { opacity: 0.75; }
.kit-card .thumb { aspect-ratio: 16 / 9; background: var(--ethos-bg-elevated); display: grid; place-items: center; position: relative; overflow: hidden; }
.kit-card .thumb .media { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-card .thumb .corner.tl { left: 12px; top: 12px; }
.kit-card .dochead { padding: 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ethos-border-split); }
.kit-card .dochead .e-tag { align-self: flex-start; }
.kit-card .docicon { width: 52px; height: 64px; border-radius: var(--ethos-radius-sm); background: var(--ethos-bg-elevated); display: grid; place-items: center; flex: none; font-size: 24px; }
.kit-card .pad-top { padding: 18px 18px 0; }
.kit-card .text { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kit-card .title { font-size: 20px; line-height: 1.15; }
.kit-card .mylink { margin-top: auto; }
.kit-card .acts { margin-top: auto; padding-top: 4px; }
.kit-card .acts .e-btn:not(.golden):not(.text) { background: var(--page); }
.kit-card .e-tag.self { align-self: flex-start; }
.kit .week .base { align-items: baseline; }
.kit .week .n { font-size: 44px; line-height: 1; }
.kit .display.sub { font-size: 20px; color: var(--ink-2); }
.kit .rules .display.sub { font-size: 18px; color: var(--ink); }
.kit .week .bar { display: flex; gap: 4px; }
.kit .week .bar span { flex: 1; height: 6px; border-radius: 3px; background: var(--ethos-bg-elevated); }
.kit .week .bar span.on { background: var(--gold); }
.kit .kinds { overflow: hidden; display: flex; flex-direction: column; }
.kit .kinds > div { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 12px 20px; border-bottom: 1px solid var(--ethos-border-split); }
.kit .kinds > div:last-child { border-bottom: 0; }
.kit .kinds .ei { font-size: 18px; margin-top: 2px; }
.kit .card.pad { gap: 8px; }
.kit [hidden] { display: none !important; }
/* a linked page's own preview card keeps its shape; uploads fill the frame */
/* a linked page shows as a link card: the image at the OG card's own 1.91:1, the page's title and host under it */
.kit-hero .visual.linkcard { min-height: 0; background: transparent; display: flex; flex-direction: column; justify-content: center; padding: 28px 0 28px 28px; }
.kit-hero .visual.linkcard .media.og { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--ethos-radius-xl) var(--ethos-radius-xl) 0 0; }
.kit-hero .visual.linkcard .caption { display: flex; flex-direction: column; gap: 2px; margin: 0; width: auto; max-width: none; align-self: stretch; padding: 14px 18px; background: var(--ethos-bg-elevated); border-radius: 0 0 var(--ethos-radius-xl) var(--ethos-radius-xl); }
@media (max-width: 700px) { .kit-hero .visual.linkcard { padding: 20px 20px 0; } }
.kit-card .thumb:has(.media.og) { aspect-ratio: 1200 / 630; }
.kit-card .thumb .media.og { object-fit: cover; }
/* the design system's .row adds a bottom margin; ladder rows sit flush so the gold row fills to the card's edge */
.ladder-card .row, .breakdown .row, .card.list .row, .kinds > div { margin: 0; }
/* on the gold header the score reads in the dark ink, like the name */
.band-gold .chip-text .s { color: var(--on-gold); opacity: 0.8; }

/* ---------- the crowd field on the home hero ---------- */
/* A social graph in the hero's ink: credible people post, others reply, bots get dropped. Only the likes and the
   cross keep their colour. */
/* The copy and the field share a row and centre on each other, so the dots sit level with the headline block. */
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: 40px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.band-gold .hero .crowd-field { height: 100%; min-height: 340px; max-height: 420px; pointer-events: none; }
@media (max-width: 1000px) { .hero-top { grid-template-columns: 1fr; } .band-gold .hero .crowd-field { display: none; } }
.crowd { width: 100%; height: 100%; display: block; overflow: visible; --lv: var(--on-gold); }
.crowd .node { fill: var(--on-gold); opacity: 0.22; }
.crowd .node.cred { fill: var(--on-gold); opacity: 0.75; }
.crowd .node.botn { fill: var(--on-gold); opacity: 0.4; }
.crowd .bubble { fill: color-mix(in srgb, var(--on-gold) 12%, transparent); stroke: var(--on-gold); stroke-width: 1; opacity: 0.85; }
.crowd .bubble.bot { stroke-dasharray: 3 2; opacity: 0.55; }
.crowd .bline { stroke: var(--on-gold); stroke-width: 1.5; stroke-linecap: round; opacity: 0.7; }
.crowd .bline.bot { opacity: 0.4; }
.crowd .reply { fill: var(--on-gold); opacity: 0.85; }
.crowd .like { fill: var(--ethos-danger-default); }
.crowd .wire { fill: none; stroke: var(--on-gold); stroke-width: 1; opacity: 0.55; }
.crowd .xmark { fill: var(--on-gold); }
.crowd .wire.bot { stroke: var(--on-gold); stroke-dasharray: 3 3; opacity: 0.5; }
.crowd .cross { stroke: var(--ethos-danger-default); stroke-width: 1.5; stroke-linecap: round; }
.crowd .pts { font-family: var(--display); font-size: 13px; fill: var(--on-gold); }
.crowd .pay .whuf { fill: var(--on-gold); }
.crowd .pay.big .pts { font-weight: 500; }
.crowd .dropped { font-family: var(--mono); font-size: 8px; fill: var(--on-gold); opacity: 0.8; letter-spacing: 0.04em; }

/* new kit items since the curator last looked */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 2px; }
.nav-badge.soon { background: var(--ethos-warning-default); }
.band-gold .nav-badge { background: var(--on-gold); color: var(--ethos-color-gold-2); }

/* team accounts: on the board, not in the running */
.e-tag.team { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.e-tag.team.sm { font-size: 10px; height: 18px; padding: 0 6px; margin-left: 6px; vertical-align: 2px; }

/* getting verified */
.verified-section { padding-top: 64px; }
.verified-section .two.top { padding-top: 8px; }
.verified-section .steps ol.looks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.verified-section .steps ol.looks li { display: grid; grid-template-columns: 11ch 1fr; gap: 12px; padding: 0; border: 0; }
.verified-section .steps ol.looks li .strong { color: var(--ink); }
.e-tag.team { cursor: default; }
/* an instant tooltip, floated at the page level so no row or card can clip it (app.js) */
.tip { position: fixed; z-index: 50; padding: 5px 8px; border-radius: var(--ethos-radius-sm); background: var(--ink); color: var(--page); font-size: 11px; font-weight: 500; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); opacity: 0; transition: opacity 0.12s; }
.tip.on { opacity: 1; }
.verified-section .people .row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 20px; color: inherit; text-decoration: none; }
.verified-section .people .row:hover { background: var(--ethos-bg-elevated); }
.verified-section .people .l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* .card.pad stacks its children; this one is a row: copy on the left, the button on the right */
.card.verify-hint { flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: inherit; text-decoration: none; text-align: left; }
.verify-hint .col { flex: 1 1 40ch; max-width: 60ch; }
.verify-hint .e-btn { flex: none; }
.verify-hint:hover { background: var(--ethos-bg-elevated); }

/* Queens is never bold: no synthesized weights anywhere, and anything set in the display face sits at 400 */
html { font-synthesis: none; }

/* until the first round starts */
.hold-band { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 32px; background: color-mix(in srgb, var(--ethos-warning-default) 14%, var(--card)); border-bottom: 1px solid color-mix(in srgb, var(--ethos-warning-default) 35%, transparent); color: var(--ink); font-size: var(--ethos-font-size-md); text-align: center; }
.hold-band .ei { color: var(--ethos-warning-default); flex: none; }
@media (max-width: 700px) { .hold-band { padding: 12px 16px; font-size: var(--ethos-font-size-sm); } }

/* admin: content kit suggestions */
.suggested .suggest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.suggested .suggest-list li { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.suggested .suggest-list .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.suggested .suggest-list .spacer { flex: 1; }