/* Runner Labs Academy — shared lesson styles */
.ls-head{padding:clamp(48px,6vw,86px) 0 34px;border-bottom:1px solid var(--line);position:relative}
.ls-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--acc),transparent 55%)}
.ls-crumb{font-family:var(--mono);font-size:.73rem;letter-spacing:.15em;color:var(--text-3);text-transform:uppercase}
.ls-crumb a{color:var(--acc-2)}
.ls-crumb a:hover{text-decoration:underline}
.ls-head h1{font-size:clamp(1.95rem,4.2vw,3rem);margin:16px 0 16px;letter-spacing:-.03em}
.ls-meta{display:flex;flex-wrap:wrap;gap:10px}
.ls-meta span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-3);border:1px solid var(--line-2);border-radius:100px;padding:5px 12px}

/* reading progress bar */
#rl-prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--acc-deep),var(--acc-2));z-index:99;transition:width .1s linear}

article{max-width:748px;margin:0 auto;padding:54px 28px 40px}
article h2{font-size:clamp(1.3rem,2.4vw,1.55rem);margin:52px 0 18px;letter-spacing:-.02em;position:relative;padding-left:18px}
article h2::before{content:"";position:absolute;left:0;top:.34em;width:4px;height:.85em;border-radius:2px;background:linear-gradient(180deg,var(--acc-2),var(--acc-deep))}
article p{margin:0 0 19px;color:var(--text-2);font-size:1.045rem;line-height:1.82}
article p:first-of-type{font-size:1.12rem;line-height:1.75;color:#B8C2CE}
article strong{color:var(--text);font-weight:600}
article ul,article ol{color:var(--text-2);line-height:1.78;margin:0 0 20px;padding-left:22px}
article li{margin-bottom:9px}
article li::marker{color:var(--acc-deep)}

.box{border-radius:var(--r);padding:21px 24px;margin:28px 0;font-size:.97rem;line-height:1.72}
.box .bt{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;display:block;margin-bottom:9px}
.box--key{background:var(--acc-soft);border:1px solid rgba(52,211,153,.28)}
.box--key .bt{color:var(--acc-2)}
.box--ex{background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--gold)}
.box--ex .bt{color:var(--gold)}
.box--warn{background:rgba(244,115,123,.06);border:1px solid rgba(244,115,123,.28);border-left:3px solid var(--red)}
.box--warn .bt{color:var(--red)}

.book{font-family:var(--mono);font-size:.845rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:19px 23px;margin:24px 0;color:var(--text-2);overflow-x:auto;line-height:1.85}
.book b{color:var(--text)}
.book .a{color:var(--red)}.book .b{color:var(--acc-2)}

.fig{margin:32px 0}
.fig img,.fig svg{border-radius:var(--r);border:1px solid var(--line-2);width:100%;height:auto;display:block;background:var(--bg-2)}
.fig figcaption{font-family:var(--mono);font-size:.735rem;color:var(--text-3);margin-top:11px;line-height:1.65;padding-left:12px;border-left:2px solid var(--line-2)}

.card{background:linear-gradient(160deg,var(--surface),rgba(17,21,28,.4));border:1px solid var(--line);border-radius:var(--r-lg);padding:27px 29px;margin:36px 0}
.card h3{font-size:1.06rem;margin-bottom:14px}
.card--drill h3::before{content:"⚙ ";color:var(--acc-2)}
.card ul{margin-bottom:0}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-family:var(--mono);font-size:.715rem;padding:5px 12px;border-radius:100px;border:1px solid var(--line-2);color:var(--text-3);transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--acc-deep);color:var(--acc-2)}

.ls-nav{display:flex;justify-content:space-between;gap:14px;max-width:748px;margin:0 auto;padding:10px 28px 84px}
.video-soon{display:flex;align-items:center;gap:12px;font-size:.895rem;color:var(--text-3);border:1px dashed var(--line-2);border-radius:var(--r);padding:15px 19px;margin:32px 0}
.finale{background:linear-gradient(160deg,rgba(52,211,153,.09),rgba(52,211,153,.02));border:1px solid rgba(52,211,153,.22);border-radius:var(--r-lg);padding:32px 34px;margin:40px 0}
.finale h3{font-size:1.22rem;margin-bottom:10px}
.disc{font-size:.755rem;color:var(--text-3);max-width:748px;margin:0 auto;padding:0 28px 64px;line-height:1.65}

@media(max-width:640px){
  article{padding:38px 20px 30px}
  .ls-nav{padding:10px 20px 60px;flex-direction:column}
  .ls-nav .btn{width:100%}
  .card,.box{padding:18px 17px}
  .disc{padding:0 20px 50px}
}