/* Illustrated lesson modules — web layout, scoped to .lesson-module */
.lesson-module{
  --mod-gold:#d7b66a;
  --mod-gold-hi:#f5dda1;
  --mod-line:rgba(215,182,106,.38);
  --mod-ivory:#f5f0e5;
  --mod-muted:#c8bea8;
  margin:2.2rem 0 2.6rem;
  color:var(--mod-ivory);
}
.lesson-module .module-loading,
.lesson-module .module-fallback{
  color:var(--mod-muted);
  padding:1rem 0;
}
.lesson-module .module-article{max-width:880px}
.lesson-module .cover{
  width:auto;height:auto;max-height:none;
  margin:0 0 1.4rem;padding:0;
  display:block;overflow:visible;
}
/* HTML width/height on photos + site-wide img{max-width:100%} without
   height:auto keeps the attribute height (675/680px) after width shrinks,
   which stretches a 16:9 still into a tall column on mobile. */
.lesson-module img{
  max-width:100%;
  height:auto;
}
/* Site masthead already brands HASS; do not repeat the module cover logo. */
.lesson-module .cover > img[src*="logo_square"]{display:none}
.lesson-module .cover > p.eyebrow{display:none}
.lesson-module .cover-logo{display:none}
.lesson-module .cover > img:not([src*="logo_square"]),
.lesson-module .cover-hero{
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  border:1px solid var(--mod-gold);
  margin:10px 0 16px;
}
.lesson-module .cover h1,
.lesson-module h2,
.lesson-module h3,
.lesson-module h4{
  color:var(--mod-gold-hi);
  letter-spacing:.04em;
  line-height:1.25;
}
.lesson-module .cover h1{text-align:center;font-size:clamp(1.6rem,3vw,2.2rem);margin:.2em 0}
.lesson-module h2{font-size:1.35rem;margin:1.4em 0 .45em;padding-bottom:.3em;border-bottom:1px solid var(--mod-line)}
.lesson-module h3{font-size:1.12rem;margin:1em 0 .35em;color:var(--mod-gold)}
.lesson-module h4{font-size:1rem;margin:.8em 0 .3em}
.lesson-module p{margin:.45em 0 .75em;line-height:1.6}
.lesson-module .theme,
.lesson-module .eyebrow,
.lesson-module .kicker{
  letter-spacing:.16em;text-transform:uppercase;color:var(--mod-gold);
  font-size:.78rem;margin:0 0 .5em;
}
.lesson-module .lyric-hero{
  font-style:italic;text-align:center;color:var(--mod-gold-hi);
  font-size:1.25rem;line-height:1.4;margin:.2em auto .6em;max-width:36rem;
}
.lesson-module .cover-meta{text-align:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mod-muted)}
.lesson-module .diamond{text-align:center;color:var(--mod-gold);letter-spacing:.4em;margin:.2em 0}
.lesson-module .banner{
  background:linear-gradient(110deg,#1c3330,#142422);
  border:1px solid var(--mod-line);
  padding:12px 16px;margin:0 0 1.1rem;
}
.lesson-module .banner p{margin:0;color:var(--mod-muted);font-size:.95rem}
.lesson-module .lyric-box{
  border-left:3px solid var(--mod-gold);
  padding:8px 0 8px 16px;margin:12px 0 18px;
  font-style:italic;font-size:1.15rem;color:var(--mod-gold-hi);line-height:1.4;
}
.lesson-module figure.shot{
  margin:12px 0 16px;border:1px solid var(--mod-line);
  background:#0c1614;padding:7px;
}
.lesson-module figure.shot img{
  width:100%;height:auto;max-height:none;object-fit:contain;
  display:block;background:#0c1614;
}
.lesson-module figure.shot figcaption{
  font-size:.86rem;color:var(--mod-gold);padding:8px 4px 3px;line-height:1.4;
}
.lesson-module .pair,
.lesson-module .compare{display:flex;gap:12px;margin:10px 0 16px}
.lesson-module .pair figure.shot{flex:1;margin:0}
.lesson-module .teach,
.lesson-module .rules,
.lesson-module .framework-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 16px;
}
.lesson-module .teach-card,
.lesson-module .rule,
.lesson-module .say,
.lesson-module .avoid,
.lesson-module .note,
.lesson-module .owner,
.lesson-module .scenario,
.lesson-module .mcq,
.lesson-module .pass,
.lesson-module .calc,
.lesson-module .final-msg,
.lesson-module .framework-card{
  padding:12px 14px;border:1px solid var(--mod-line);background:rgba(16,34,32,.75);
}
.lesson-module .teach-card.do{background:rgba(20,36,40,.7)}
.lesson-module .teach-card.ex{background:rgba(32,58,48,.55);border-color:rgba(215,182,106,.5)}
.lesson-module .teach-card.av,
.lesson-module .avoid,
.lesson-module .compare .bad{background:rgba(55,28,26,.4);border-color:rgba(196,90,74,.45)}
.lesson-module .teach-card.obs{background:rgba(29,49,40,.6)}
.lesson-module .compare .good{background:rgba(32,58,48,.55);border-color:rgba(215,182,106,.5)}
.lesson-module .lbl{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mod-gold);margin:0 0 6px;
}
.lesson-module .teach-card.av .lbl,
.lesson-module .avoid .lbl{color:#e09a90}
.lesson-module .quote-line{
  display:block;font-style:italic;color:var(--mod-gold-hi);font-size:1.05rem;line-height:1.4;margin:.25em 0;
}
.lesson-module table{
  width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:.92rem;
}
.lesson-module .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 16px}
.lesson-module .table-scroll table{margin:0}
.lesson-module th,.lesson-module td{
  border:1px solid rgba(215,182,106,.28);padding:7px 8px;vertical-align:top;text-align:left;
}
.lesson-module th{
  background:rgba(215,182,106,.12);color:var(--mod-gold-hi);font-weight:600;
  letter-spacing:.04em;font-size:.78rem;text-transform:uppercase;
}
.lesson-module td:first-child{color:var(--mod-gold-hi)}
.lesson-module .mcq{background:#101c1a;margin:8px 0 12px}
.lesson-module .mcq p.q{margin:0 0 8px;color:#fff8e8;font-weight:600}
.lesson-module .mcq ol{margin:.2em 0 .4em 1.2em;padding:0}
.lesson-module .mcq ol li{
  cursor:pointer;border:1px solid transparent;border-radius:6px;
  padding:6px 8px;margin:4px 0;
}
.lesson-module .mcq ol li:hover,
.lesson-module .mcq ol li:focus{
  border-color:rgba(215,182,106,.45);outline:none;
}
.lesson-module .mcq ol li.picked{border-color:var(--mod-gold);background:rgba(215,182,106,.08)}
.lesson-module .mcq .why{display:none;font-size:.92rem;color:var(--mod-muted);border-top:1px solid rgba(215,182,106,.18);padding-top:8px;margin-top:8px}
.lesson-module .mcq.is-checked .why{display:block}
.lesson-module .mcq .quote-line{display:none}
.lesson-module .mcq.is-checked .quote-line{display:block}
.lesson-module .reveal-answer{
  display:inline-block;margin:.4rem 0 .2rem;padding:.45rem .8rem;
  border:1px solid var(--mod-gold);background:transparent;color:var(--mod-gold-hi);
  letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;cursor:pointer;
}
.lesson-module .mcq.is-checked .reveal-answer{display:none}
.lesson-module .badge-critical{
  display:inline-block;border:1px solid #c45a4a;color:#e09a90;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;margin:0 6px 4px 0;
}
.lesson-module .day{
  border:1px solid rgba(215,182,106,.22);
  padding:10px 12px 10px 58px;position:relative;margin:0 0 8px;
  background:linear-gradient(100deg,rgba(20,40,38,.9),rgba(12,22,20,.9));
}
.lesson-module .day:before{
  content:attr(data-day);position:absolute;left:12px;top:12px;color:var(--mod-gold);font-size:1rem;
}
.lesson-module .framework-card{text-align:left}
.lesson-module .fw-letter{
  display:block;color:var(--mod-gold);font-size:1.4rem;letter-spacing:.12em;margin-bottom:.2rem;
}
.lesson-module .check{list-style:none;margin:6px 0 14px;padding:0}
.lesson-module .check li{padding:4px 0 4px 0}
.lesson-module .interactive-check label{cursor:pointer}
.lesson-module .pass,
.lesson-module .final-msg{
  border:1px solid var(--mod-gold);
  background:linear-gradient(110deg,#24382c,#16241e);margin:12px 0 18px;
}
.lesson-module .calc input,
.lesson-module .calc select{
  width:100%;max-width:240px;padding:6px 8px;background:#0c1614;
  border:1px solid var(--mod-line);color:var(--mod-ivory);font:inherit;
}
.lesson-module .calc button,
.lesson-module .calc button[type="button"]{
  margin-top:10px;background:transparent;border:1px solid var(--mod-gold);
  color:var(--mod-gold-hi);padding:6px 12px;letter-spacing:.08em;
  text-transform:uppercase;font-size:.78rem;cursor:pointer;
}
.lesson-module .calc .result{margin-top:10px;color:var(--mod-gold-hi)}
.lesson-module .chart-wrap{margin:12px 0 18px;border:1px solid var(--mod-line);padding:12px;background:#0c1614}
.lesson-module .chart-wrap svg{width:100%;height:auto;display:block}
.lesson-module .chart-caption{font-size:.82rem;color:var(--mod-gold);margin:8px 0 0}
.lesson-module .footer-note{
  margin-top:22px;padding-top:10px;border-top:1px solid var(--mod-line);
  font-size:.8rem;color:var(--mod-muted);
}
.lesson-module .section-break{height:8px}
.lesson-module .sign-line{display:block;border-bottom:1px solid rgba(215,182,106,.4);min-height:26px}
@media (max-width:720px){
  .lesson-module .pair,
  .lesson-module .compare{flex-direction:column}
  .lesson-module .teach,
  .lesson-module .rules,
  .lesson-module .framework-cards{grid-template-columns:1fr}
  .lesson-module .cover-hero,
  .lesson-module .cover > img:not([src*="logo_square"]),
  .lesson-module figure.shot img{max-height:none}
  .lesson-module table{font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  .lesson-module *{scroll-behavior:auto}
}