/* ==========================================================================
   Page · K01 Principles
   ========================================================================== */

/* ---- Design rules: hairline grid of cards ------------------------------- */

.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.rule {
  padding: 28px 24px;
  background: var(--canvas);
}

.rule__code {
  margin-bottom: 12px;
  font: 500 12px/1 var(--f-mono);
  color: var(--accent-text);
}

.rule__title {
  margin: 0 0 8px;
  font: 700 28px/1 var(--f-display);
  text-transform: uppercase;
}

/* rule description, shared by design and accessibility rules */
.rule__text,
.a11y-rule__text {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* ---- Conversion: C.1 feature plate -------------------------------------- */

.first-rule {
  margin-bottom: 24px;
  padding: clamp(24px, 4vw, 48px);
  border: 2px solid var(--ink);
  background: var(--canvas);
  clip-path: var(--chamfer-l);
}

.first-rule__code {
  margin-bottom: 16px;
  font: 500 12px/1 var(--f-mono);
  color: var(--accent-text);
}

.first-rule__claim {
  margin: 0;
  font: 800 clamp(40px, 5.4vw, 80px)/.9 var(--f-display);
  text-transform: uppercase;
  max-width: 18ch;
}

.first-rule__text {
  margin: 20px 0 0;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ---- Conversion: C.2–C.6 ruled list ------------------------------------- */

.rule-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--ink);
}

.rule-list__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 8px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-strong);
}

.rule-list__code {
  font: 500 13px/1.6 var(--f-mono);
  color: var(--muted);
}

.rule-list__title {
  font: 700 24px/1.1 var(--f-display);
  text-transform: uppercase;
}

.rule-list__text {
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* ---- Accessibility rules ------------------------------------------------ */

.a11y-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.a11y-rule {
  padding-top: 16px;
  border-top: 3px solid var(--ink);
}

.a11y-rule__code {
  margin-bottom: 10px;
  font: 500 12px/1 var(--f-mono);
  color: var(--accent-text);
}

.a11y-rule__title {
  margin: 0 0 6px;
  font: 700 24px/1.05 var(--f-display);
  text-transform: uppercase;
}