/* Candidate-only composition for L22. The page retains the frozen base skin. */
.lhero.b3-intro { padding-block: clamp(48px, 8vw, 104px); background: var(--paper); color: var(--ink); }
.lhero.b3-intro .lhero__inner { max-width: 1080px; margin-inline: auto; display: grid; gap: 40px; align-items: center; }
.b3-intro__copy { max-width: 42rem; }
.lhero.b3-intro .lhero__title, .lhero.b3-intro .lhero__sub { color: var(--ink); max-width: 38rem; }
.lhero.b3-intro .lhero__title, .b5-section h2, .dcard .section-title { font-family: var(--font-display); font-weight: 700; }
.lhero.b3-intro .lhero__pos { color: var(--ink-soft); background: var(--paper-rule); border-color: var(--line-gold); }
.b3-intro__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.lhero.b3-intro .b3-method { margin: 0; padding: 24px 0 0; border: 0; background: transparent; display: block; }
.lhero.b3-intro .b3-method img { width: 240px; height: auto; margin: 0 auto 40px; background: transparent; }
.lhero.b3-intro .b3-method figcaption { color: var(--ink-soft); background: transparent; display: block; }
.b3-method strong { display: block; font-weight: 700; }
.b3-method p { margin-top: .5rem; max-width: 32rem; }
.b3-method ol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin: 16px 0 0; padding-inline-start: 20px; font-size: var(--font-size-small); }

.article__inner { max-width: 680px; }
.b5-section { padding-block: clamp(2.75rem, 6vw, 4.75rem); border-top: 1px solid var(--paper-rule); }
.b5-section h2 { margin-bottom: 1.25rem; }
.b5-section > p + p { margin-top: 1rem; }
.b3-example { margin-block: 2rem; }
.b5-figure { margin-block: 2.5rem; }
.b5-figure img { width: 240px; margin: 0 auto 2.5rem; }

.audit__first-attempt { margin: 1rem 0 0; color: var(--ink-soft); font-weight: 600; }
.b5-nojs:not(.b5-nojs--full) { display: none; }
.b5-nojs--full { max-width: 680px; margin: 2rem auto; }
.b5-nojs--full section { padding: 1.25rem 0; border-top: 1px solid var(--paper-rule); }
.b5-nojs--full h4 { margin: 0 0 .75rem; color: var(--ink); }
.b5-nojs--full p, .b5-nojs--full ol { margin: .75rem 0; }
.b5-nojs--full details { padding: .75rem 1rem; background: var(--paper-rule); color: var(--ink-soft); }
.b5-nojs--full summary { cursor: pointer; font-weight: 700; color: var(--ink); }

@media (min-width: 860px) {
  .lhero.b3-intro .lhero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); }
  .lhero.b3-intro .b3-method { padding: 0; padding-inline-start: 40px; border-inline-start: 1px solid var(--line-gold); }
}
@media (max-width: 520px) {
  .b3-intro__actions > * { width: 100%; }
  .b3-method img { width: 280px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lbar, .lbar *, .lrail, .lrail * { transition-duration: 0s !important; }
}
@media print {
  .dcard::after { content: "لیسنینگ آیلتس · درس ۲۲ · فرهاد میرسعیدی · farhadmirsaeedi.com"; }
}

/* Keep teaching and printable-card copy off the viewport edge. */
@media screen {
  main > .audit, main > .dcard { padding: 64px var(--gutter); border: 0; background: transparent; }
  .audit .audit__inner, .dcard .dcard__inner { max-width: 680px; margin-inline: auto; }
  .audit .section-title { font-family: var(--font-display); font-weight: 700; }
}