/* trades.css — Door 03.
   base.css carries the tokens, type scale, .shell, header.index and .foot. The section
   shapes below (.claim, .note, .grid, .themeswitch) live inline in the homepage rather
   than in base.css, so they are restated here rather than left to fall back to nothing.
   Values copied from web/index.html, not re-invented — two definitions that drift are
   worse than one repeated. */

.themeswitch {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; background: none; border: var(--rule) solid var(--line);
  color: var(--ink-3); padding: 0.3rem 0.6rem; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.themeswitch:hover { color: var(--ink); border-color: var(--ink-4); }

.claim { padding: clamp(3.5rem, 14vh, 8rem) 0 clamp(2.5rem, 8vh, 5rem); }
.claim .t-label { display: block; margin-bottom: 1.1rem; }
.claim h1 { max-width: 18ch; }
.claim .dot { color: var(--signal); }
.claim p { margin: 1.6rem 0 0; max-width: var(--measure); font-size: 15px; color: var(--ink-3); }

.note { padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3rem, 9vh, 6rem); }
.note + .note { border-top: var(--rule) solid var(--line); }
.note .grid { display: grid; gap: 1.25rem 3rem; grid-template-columns: minmax(0, 1fr); }
.note p { margin: 0 0 0.9rem; max-width: var(--measure); color: var(--ink-2); }
.note p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .note .grid { grid-template-columns: 14rem minmax(0, 1fr); }
}

/* The measured findings. A list of numbers is the argument on this page, so the figures
   are tabular and sit on their own optical column rather than running into the prose. */
.facts { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.facts li {
  margin: 0 0 0.75rem; padding: 0 0 0.75rem 0;
  border-bottom: var(--rule) solid var(--line);
  color: var(--ink-2);
}
.facts li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.facts b { color: var(--ink); font-weight: 600; }
.facts code {
  font-family: var(--mono); font-size: 0.9em; color: var(--ink-3);
}