/* ============================================================================
   claudia-lesson-1-signal.css · Pages 7 + 9
   A restrained Porcelain × Signal pedagogy layer for controlled input,
   noticing, retrieval and independent speaking. Scoped to .lesson-signal.
   ========================================================================== */

.lesson-signal {
  --ls-porcelain: #f7f8f5;
  --ls-celadon: #dfece7;
  --ls-celadon-deep: #b8d7ce;
  --ls-signal: #5fa8b7;
  --ls-signal-dark: #28535b;
  --ls-red: #b9434f;
  --ls-line: rgba(40,83,91,.28);
}

.lesson-signal::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 18%;
  right: 0;
  width: 3px;
  height: 56%;
  background: linear-gradient(180deg, transparent, var(--ls-signal), var(--ls-red), transparent);
  opacity: .42;
  pointer-events: none;
}

.lesson-signal .page__header,
.lesson-signal .page__body,
.lesson-signal .page__footer { position: relative; z-index: 1; }

.lesson-signal .page__header { border-bottom-color: rgba(95,168,183,.22); }
.lesson-signal .page__header .chap-glyph { color: var(--ls-signal-dark); }
.lesson-signal .page__footer { border-top-color: rgba(95,168,183,.2); }
.lesson-signal .page__num { background: var(--ls-signal-dark); }
.lesson-signal .eyebrow { color: var(--ls-red); }

.lesson-lead {
  max-width: 610px;
  color: var(--ink-soft);
  font-size: .94rem !important;
  line-height: 1.6 !important;
}

.lesson-objective {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 12px;
  margin: 10px 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--ls-line);
  border-left: 5px solid var(--ls-signal);
  border-radius: 4px 11px 11px 4px;
  background:
    radial-gradient(circle at 92% 50%, rgba(95,168,183,.1) 0 2px, transparent 2.5px) 0 0 / 12px 12px,
    linear-gradient(100deg, rgba(255,255,255,.92), rgba(223,236,231,.48));
}

.lesson-objective__tag {
  grid-row: 1 / 3;
  padding: 5px 8px;
  border-radius: 99px;
  background: var(--ls-signal-dark);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .11em;
}

.lesson-objective strong {
  color: var(--ls-signal-dark);
  font-family: var(--f-body);
  font-size: .88rem;
}

.lesson-objective__route {
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .08em;
}

.lesson-objective--practice { border-left-color: var(--ls-red); }

.lesson-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 7px;
}

.lesson-section-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lesson-section-head h2 {
  margin: 0;
  color: var(--ls-signal-dark);
  font-size: 1.18rem;
}

.lesson-section-head small {
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 8px;
  text-align: right;
}

.signal-index {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ls-signal);
  border-radius: 50%;
  background: var(--ls-porcelain);
  color: var(--ls-signal-dark);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
}

.greeting-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.greeting-rail::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, var(--ls-celadon-deep), var(--ls-signal), var(--ls-red));
}

.greeting-card {
  position: relative;
  padding: 12px 10px 10px;
  border: 1px solid var(--ls-line);
  border-radius: 10px 3px 10px 3px;
  background: rgba(255,255,255,.76);
  text-align: center;
}

.greeting-card::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  border: 2px solid var(--ls-porcelain);
  border-radius: 50%;
  background: var(--ls-signal);
}

.greeting-card__time {
  display: block;
  margin: 7px 0 5px;
  color: var(--ls-red);
  font-family: var(--f-mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.greeting-card .jp-main { font-size: 1.12rem; }
.greeting-card .romaji { font-size: .69rem; }
.greeting-card .gloss { font-size: .72rem; }

.signal-note {
  margin: 6px 2px 0 !important;
  color: var(--ink-soft);
  font-size: .72rem !important;
  line-height: 1.45 !important;
}

.intro-builder__grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 10px;
}

.pattern-console,
.first-meeting-card {
  border: 1px solid var(--ls-line);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
}

.pattern-console { padding: 11px 13px; }
.first-meeting-card { padding: 10px 12px; text-align: center; background: rgba(223,236,231,.42); }

.pattern-console__label,
.first-meeting-card__label,
.rehearsal-label {
  color: var(--ls-red);
  font-family: var(--f-mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .12em;
}

.pattern-formula {
  display: flex;
  align-items: stretch;
  margin: 5px 0 6px;
  border: 1px solid rgba(40,83,91,.32);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--f-sans-jp);
  font-size: 1.18rem;
  font-weight: 700;
}

.pattern-formula span { flex: 1; padding: 7px 10px; background: var(--ls-porcelain); }
.pattern-formula b { padding: 7px 12px; background: var(--ls-signal-dark); color: #fff; }
.pattern-console p { margin: 0 !important; font-size: .75rem !important; line-height: 1.45 !important; }
.pattern-console .jp-line { margin: 5px 0 0; }
.pattern-console .jp-main,
.first-meeting-card .jp-main { font-size: 1.12rem; }
.pattern-console .romaji,
.first-meeting-card .romaji { font-size: .68rem; }
.pattern-console .gloss,
.first-meeting-card .gloss { font-size: .72rem; }
.signal-arrow { margin: 1px 0; color: var(--ls-signal); line-height: 1; }

.guided-rehearsal {
  display: grid;
  grid-template-columns: 52px 1fr 1.15fr;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid var(--ls-line);
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(90deg, rgba(223,236,231,.56), rgba(255,255,255,.82));
}

.rehearsal-mascot {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}

.rehearsal-mascot .mascot { width: 48px; height: 48px; }

.rehearsal-copy h3 { margin: 2px 0 3px; color: var(--ls-signal-dark); font-size: 1rem; }
.rehearsal-copy h3 span:last-child { color: var(--ls-red); }
.rehearsal-copy p { margin: 0 !important; font-size: .7rem !important; line-height: 1.42 !important; }

.rehearsal-test {
  display: grid;
  gap: 3px;
  padding-left: 10px;
  border-left: 1px dashed rgba(40,83,91,.32);
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 7.5px;
}

.rehearsal-test b { color: var(--ls-signal-dark); }

.pocket-phrases {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding: 6px 9px;
  border-top: 1px solid rgba(40,83,91,.18);
  border-bottom: 1px solid rgba(40,83,91,.18);
  color: var(--ink-soft);
  font-size: .7rem;
}

.pocket-phrases b { color: var(--ls-signal-dark); }
.pocket-phrases strong { color: var(--ink); font-family: var(--f-sans-jp); }

.signal-dialogue { border-color: rgba(40,83,91,.5); box-shadow: 4px 4px 0 rgba(95,168,183,.11); }
.signal-dialogue .dialogue__scene { background: var(--ls-signal-dark); }
.signal-dialogue .turn { padding: 9px 11px; border-bottom-color: rgba(40,83,91,.14); }
.signal-dialogue .turn .av { width: 54px; height: 54px; border-color: rgba(40,83,91,.55); }
.signal-dialogue .turn .bubble { padding: 7px 10px; border-width: 1px; border-color: rgba(40,83,91,.4); }
.signal-dialogue .turn .bubble::before { border-width: 1px; }
.signal-dialogue .turn .jp-main { font-size: 1.04rem; }
.signal-dialogue .turn .romaji { font-size: .68rem; }
.signal-dialogue .turn .gloss { font-size: .73rem; }

.noticing-line {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 5px;
}

.noticing-line span {
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 7px;
  letter-spacing: .08em;
}

.noticing-line b {
  padding: 3px 7px;
  border-radius: 5px;
  background: #fff;
  font-family: var(--f-sans-jp);
}

.noticing-line__answer { background: var(--ls-signal-dark) !important; color: #fff; }

.comprehension-check {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  margin: 10px 0;
  padding: 8px 11px;
  border: 1px solid var(--ls-line);
  border-radius: 9px;
  background: rgba(247,248,245,.88);
  color: var(--ink-soft);
  font-size: .7rem;
}

.comprehension-check__label {
  grid-column: 1 / -1;
  color: var(--ls-red);
  font-family: var(--f-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
}

.comprehension-check div b { color: var(--ls-signal-dark); }

.practice-ladder__steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
}

.practice-step {
  position: relative;
  min-height: 128px;
  padding: 10px 11px;
  border: 1px solid var(--ls-line);
  border-top: 4px solid var(--ls-signal);
  border-radius: 9px;
  background: rgba(255,255,255,.82);
}

.practice-step--cue { border-top-color: var(--ls-celadon-deep); background: rgba(247,248,245,.76); }
.practice-step--blank { border-top-color: rgba(185,67,79,.5); background: rgba(255,255,255,.48); }

.practice-step__number {
  display: block;
  margin-bottom: 6px;
  color: var(--ls-red);
  font-family: var(--f-mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .1em;
}

.practice-step .jp-main { font-size: .98rem; line-height: 1.35; }
.practice-step .romaji { margin-top: 5px; font-size: .59rem; }
.practice-step p { margin: 7px 0 0 !important; color: var(--ink-soft); font-size: .69rem !important; line-height: 1.45 !important; }
.practice-step mark { background: linear-gradient(transparent 58%, rgba(95,168,183,.22) 58%); }

.cue-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 57px;
}

.cue-chain span {
  padding: 5px 6px;
  border: 1px solid rgba(40,83,91,.24);
  border-radius: 6px;
  color: var(--ls-signal-dark);
  font-family: var(--f-mono);
  font-size: 6.5px;
  text-align: center;
}

.cue-chain i { color: var(--ls-signal); font-style: normal; }

.no-look-line {
  display: grid;
  gap: 7px;
  padding: 2px 0;
}

.no-look-line span {
  display: block;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(40,83,91,.26);
  color: rgba(40,83,91,.5);
  font-family: var(--f-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.performance-pass {
  display: grid;
  grid-template-columns: auto 1fr 1.1fr;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  padding: 9px 11px;
  border: 1px solid rgba(185,67,79,.35);
  border-radius: 4px 11px 11px 4px;
  background: linear-gradient(90deg, rgba(223,236,231,.55), rgba(255,255,255,.8));
  font-size: .72rem;
}

.performance-pass__badge {
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--ls-red);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
}

.performance-pass b { color: var(--ls-signal-dark); }
.performance-pass span { color: var(--ink-soft); }
.performance-pass ul { list-style: none; padding: 0; margin: 0; }
.performance-pass li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.mini-box { width: 12px; height: 12px; flex: 0 0 auto; border: 1.5px solid var(--ls-signal); border-radius: 3px; }

/* ---- Page 10 · culture as observation + retrieval ---------------------- */
.lesson-signal--culture::after {
  width: 2px;
  opacity: .28;
}

.lesson-objective--culture { border-left-color: var(--ls-celadon-deep); }

.lesson-section-head--compact { margin: 0 0 7px; }

.culture-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 13px;
  align-items: stretch;
  margin-top: 10px;
}

.culture-hero__copy {
  padding: 12px 13px;
  border: 1px solid var(--ls-line);
  border-radius: 11px 4px 11px 4px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(223,236,231,.42));
}

.culture-hero__copy p {
  margin: 0 0 7px !important;
  color: var(--ink-soft);
  font-size: .77rem !important;
  line-height: 1.55 !important;
}

.culture-hero__copy p b { color: var(--ls-signal-dark); }

.culture-words {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}

.culture-words > div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 7px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid rgba(40,83,91,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}

.culture-words span {
  grid-row: 1 / 3;
  color: var(--ls-red);
  font-family: var(--f-serif-jp);
  font-size: 1.32rem;
  font-weight: 800;
}

.culture-words b {
  color: var(--ls-signal-dark);
  font-family: var(--f-sans-jp);
  font-size: .68rem;
}

.culture-words small { color: var(--ink-soft); font-size: .61rem; }

.culture-observe {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid var(--ls-signal);
  background: rgba(255,255,255,.52);
  color: var(--ink-soft);
  font-size: .67rem;
  line-height: 1.45;
}

.culture-observe b { color: var(--ls-red); }

.culture-art {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(40,83,91,.23);
  border-radius: 4px 13px 4px 13px;
  background: var(--ls-porcelain);
}

.culture-art img {
  display: block;
  width: 100%;
  height: calc(100% - 27px);
  min-height: 192px;
  object-fit: cover;
}

.culture-art figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px 8px;
  background: rgba(247,248,245,.92);
  color: var(--ink-soft);
  font-family: var(--f-body);
  font-size: .58rem;
  line-height: 1.4;
  text-align: center;
}

.season-study { margin-top: 12px; }

.season-art {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(40,83,91,.22);
  border-radius: 11px 4px 0 0;
  background: var(--ls-porcelain);
}

.season-art img {
  display: block;
  width: 100%;
  height: 116px;
  object-fit: cover;
}

.season-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(40,83,91,.22);
  border-top: 0;
  border-radius: 0 0 4px 11px;
  overflow: hidden;
}

.season-labels > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 6px;
  padding: 5px 8px;
  border-right: 1px solid rgba(40,83,91,.16);
  background: rgba(255,255,255,.72);
}

.season-labels > div:last-child { border-right: 0; }
.season-labels small { grid-column: 1 / -1; color: var(--ink-soft); font-family: var(--f-mono); font-size: 6px; letter-spacing: .08em; }
.season-labels strong { color: var(--ls-signal-dark); font-family: var(--f-serif-jp); font-size: 1.14rem; }
.season-labels span { color: var(--ink-soft); font-family: var(--f-sans-jp); font-size: .66rem; }

.season-retrieval {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 7px;
}

.season-retrieval > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: center;
  padding: 5px 7px;
  border-top: 1px solid rgba(40,83,91,.2);
  color: var(--ink-soft);
  font-size: .62rem;
}

.season-retrieval b { color: var(--ls-red); font-family: var(--f-mono); font-size: 6.5px; }

.haiku-study {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 9px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(40,83,91,.2);
  border-radius: 10px;
  background: rgba(223,236,231,.32);
}

.haiku-study .haiku { font-size: .92rem; line-height: 1.65; }
.haiku-study .haiku .ro { font-size: .61rem; }
.haiku-study .haiku .gloss { font-size: .66rem; font-style: normal; }

.haiku-prompt {
  padding-left: 9px;
  border-left: 1px dashed rgba(40,83,91,.32);
  color: var(--ink-soft);
  font-size: .66rem;
  line-height: 1.45;
}

.haiku-prompt b,
.haiku-prompt span { display: block; }
.haiku-prompt b { margin-bottom: 3px; color: var(--ls-red); font-family: var(--f-mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }

.culture-quest {
  margin-top: 12px;
  padding: 12px 14px;
  border-color: var(--ls-celadon-deep);
  background: linear-gradient(135deg, rgba(247,248,245,.96), rgba(223,236,231,.42));
  box-shadow: 4px 4px 0 rgba(95,168,183,.08);
}

.culture-quest::before {
  content: var(--gengo-quest-1-proof-label, "QUEST 1 · PROOF");
  background: var(--ls-signal-dark);
}

.culture-quest h3 { margin: 4px 0 3px; color: var(--ls-signal-dark); }
.culture-quest > p { margin: 0 0 7px !important; color: var(--ink-soft); font-size: .7rem !important; line-height: 1.45 !important; }

.quest-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
}

.proof-task {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid rgba(40,83,91,.16);
  border-radius: 7px;
  background: rgba(255,255,255,.68);
}

.proof-task .box {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 1.5px solid var(--ls-signal);
  border-radius: 4px;
}

.proof-task b,
.proof-task small { display: block; }
.proof-task b { color: var(--ls-red); font-family: var(--f-mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.proof-task small { margin-top: 2px; color: var(--ink-soft); font-size: .65rem; line-height: 1.35; }

.quest-proof-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px solid rgba(40,83,91,.18);
  color: var(--ink-soft);
  font-size: .62rem;
}

.quest-proof-foot b { color: var(--ls-signal-dark); }

.next-signal {
  margin: 9px 0 0 !important;
  color: var(--ink-soft);
  font-size: .7rem !important;
  font-style: italic;
  text-align: center;
}

/* Page 8 · retire the legacy taxonomy chips and stage the current Tsuki art. */
.kanji-page-signal .kanji-origin-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid rgba(95,168,183,.38);
}

.kanji-page-signal .kanji-origin-note span {
  color: var(--ls-red);
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kanji-page-signal .kanji-origin-note b {
  color: var(--matcha);
  font-family: var(--f-serif-jp);
  font-size: .92rem;
}

.kanji-payoff {
  display: grid;
  grid-template-columns: 126px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 128px;
  margin-top: 14px;
  padding: 4px 16px 4px 2px;
  border-top: 1px solid rgba(40,83,91,.2);
  border-bottom: 1px solid rgba(40,83,91,.2);
  background: linear-gradient(90deg, rgba(223,236,231,.55), rgba(255,255,255,.2));
}

.kanji-payoff__tsuki {
  align-self: end;
  display: grid;
  place-items: end center;
  min-height: 126px;
}

.kanji-payoff__tsuki .mascot {
  filter: drop-shadow(0 6px 5px rgba(45,41,38,.13));
}

.kanji-payoff__label {
  display: block;
  margin-bottom: 3px;
  color: var(--ls-red);
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kanji-payoff__copy h3 {
  margin: 0 0 4px;
  color: var(--matcha);
}

.kanji-payoff__copy p {
  margin: 0 !important;
  color: var(--ink-soft);
  font-size: .82rem !important;
  line-height: 1.55 !important;
}

@media print {
  .lesson-signal::after { opacity: .32; }
  .lesson-signal .lesson-lead { margin-bottom: .55em; }
  .lesson-objective { margin: 6px 0 9px; padding: 7px 10px; }
  .lesson-section-head { margin: 8px 0 5px; }
  .greeting-card { padding: 9px 7px 7px; }
  .intro-builder__grid { gap: 7px; }
  .pattern-console, .first-meeting-card { padding: 8px 9px; }
  .guided-rehearsal { margin-top: 8px; padding: 7px 9px; }
  .pocket-phrases { margin-top: 6px; padding: 4px 7px; }
  .signal-dialogue .turn { padding: 5px 8px; }
  .signal-dialogue .turn .av { width: 40px; height: 40px; }
  .signal-dialogue .turn .bubble { padding: 5px 8px; }
  .comprehension-check { margin: 7px 0; padding: 6px 8px; }
  .practice-step { min-height: 92px; padding: 7px 8px; }
  .cue-chain { min-height: 39px; }
  .performance-pass { margin-top: 7px; padding: 6px 8px; }
  .culture-hero { gap: 8px; margin-top: 7px; }
  .culture-hero__copy { padding: 8px 9px; }
  .culture-art img { min-height: 158px; }
  .culture-words > div { padding: 4px 6px; }
  .season-study { margin-top: 8px; }
  .season-art img { height: 88px; }
  .season-labels > div { padding: 3px 6px; }
  .season-retrieval { margin-top: 4px; gap: 4px; }
  .haiku-study { margin-top: 7px; padding: 6px 8px; }
  .culture-quest { margin-top: 8px !important; padding: 8px 10px !important; }
  .proof-task { padding: 4px 6px; }
  .next-signal { margin-top: 5px !important; }
  .kanji-page-signal .kanji-origin-note { margin-bottom: 5px; padding-bottom: 3px; }
  .kanji-payoff { min-height: 104px; margin-top: 8px; padding-right: 11px; grid-template-columns: 104px 1fr; }
  .kanji-payoff__tsuki { min-height: 102px; }
  .kanji-payoff__tsuki .mascot.sz-lg { width: 96px; height: 96px; }
  .culture-hero, .season-study, .haiku-study, .culture-quest { break-inside: avoid; page-break-inside: avoid; }
  .kanji-payoff { break-inside: avoid; page-break-inside: avoid; }
}