.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 26px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.door::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: var(--tint);
}
.door:hover { transform: translateY(-3px); }
.door .en {
  margin: 16px 0 0;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}
.door h2 {
  margin: 4px 0 10px;
  font-family: var(--cjk);
  font-size: 44px;
  line-height: 1.1;
}
.door p { margin: 0; font-weight: 800; color: var(--muted); line-height: 1.5; }
.hub-lead {
  margin: 0 0 18px;
  font-family: var(--cjk);
  font-size: 28px;
}

.lesson { display: grid; gap: 12px; }
.rule, .point, .rhyme, .ex {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.rule { border-color: color-mix(in srgb, var(--cat) 45%, var(--line)); }
.kicker {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cat);
  color: #fffaf2;
  font-size: 12px;
  font-weight: 900;
}
.rule p, .point p, .rhyme p { margin: 0; font-family: var(--cjk); font-size: 22px; line-height: 1.45; }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.point h3 { margin: 0 0 6px; font-size: 16px; }
.point p { font-size: 16px; }
.examples { display: grid; gap: 8px; }
.ex {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.ex b { font-family: var(--serif); font-size: 22px; }
.ex span { font-family: var(--cjk); color: var(--muted); font-weight: 800; }
.rhyme { background: #243027; color: #fffaf2; border-color: #243027; }
.rhyme .kicker { background: #e7c27a; color: #243027; }
.rhyme p { color: #fffaf2; }
.blank { border-bottom: 2px solid var(--cat); padding: 0 4px; }

@media (max-width: 800px) {
  .points { grid-template-columns: 1fr; }
  .door h2, .hub-lead { font-size: 36px; }
}