/* "Chapters" look for one blog post (chosen by Mark 2026-10-22). Used only by posts that set <body data-look="chapters"> and load
   postchapters.js, which wraps the article in numbered chapters and adds the animations. Without the script the post still reads normally. */
body[data-look="chapters"]{--v:#9372ff;--v2:#b79cff;--vd:#7f58ec}
[data-look="chapters"] .case-hero{padding-bottom:40px}
[data-look="chapters"] .case-hero h1{font-size:clamp(40px,5.4vw,80px)!important;letter-spacing:-.03em;line-height:1;max-width:18ch}
[data-look="chapters"] .case-hero__meta{border:0!important}
[data-look="chapters"] .case-body{display:block!important;max-width:none!important}
[data-look="chapters"] .container{max-width:1180px}
[data-look="chapters"] .case-body__main{font-size:18.5px;line-height:1.75;color:#d1cedd}
[data-look="chapters"] .case-body__main,[data-look="chapters"] .case-body__main p,[data-look="chapters"] .case-body__main li{text-align:left!important}
[data-look="chapters"] .case-body__main [style*="border-left:3px solid #9372ff"]{margin:0}
[data-look="chapters"] .case-body__main .ticks{list-style:none;padding:0;margin:18px 0}
/* progress bar and dot rail */
.pc-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:90;background:rgba(255,255,255,.06)}.pc-prog i{display:block;height:100%;background:linear-gradient(90deg,#7f58ec,#b79cff);transform:scaleX(0);transform-origin:left}
.pc-rail{display:none;position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:60}.pc-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pc-rail a{display:block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22);overflow:hidden;text-indent:-999px;white-space:nowrap;transition:background .3s,box-shadow .3s}.pc-rail li.on a{background:var(--v);box-shadow:0 0 0 5px rgba(147,114,255,.25)}
@media(min-width:1500px){.pc-rail{display:block}}
/* chapters */
[data-look="chapters"] .bs-intro{max-width:760px;margin:0 auto 24px}
[data-look="chapters"] .bs-intro>div{border:0!important;border-radius:24px!important;background:radial-gradient(120% 140% at 0 0,rgba(147,114,255,.3),rgba(147,114,255,.06) 60%)!important;padding:34px 38px!important;font-size:21px;line-height:1.55}
[data-look="chapters"] .bs-intro>div p:first-child{font:500 12px "JetBrains Mono",monospace!important;letter-spacing:.14em;text-transform:uppercase;color:var(--v2);margin-bottom:10px!important}
[data-look="chapters"] .bs{position:relative;padding:68px 0 64px;border-top:1px solid rgba(255,255,255,.08);overflow:hidden}
[data-look="chapters"] .bs:nth-of-type(even){background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
[data-look="chapters"] .bs::before{content:attr(data-n);position:absolute;right:0;top:34px;font:800 clamp(90px,14vw,190px)/1 "Archivo",sans-serif;letter-spacing:-.06em;color:rgba(147,114,255,.06);pointer-events:none}
[data-look="chapters"] .bs>*{position:relative;max-width:760px!important;width:100%;margin-left:auto!important;margin-right:auto!important}
[data-look="chapters"] .bs h2{font-size:clamp(30px,3.6vw,46px)!important;letter-spacing:-.025em;line-height:1.1;margin:0 auto 22px!important;color:#fff}
[data-look="chapters"] .bs h2::before{content:"Chapter " attr(data-n);display:block;font:500 12px "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--v);margin-bottom:12px}
[data-look="chapters"] .bs h2::after{content:"";display:block;width:56px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--vd),var(--v2));margin-top:18px;transform-origin:left}
[data-look="chapters"] .bs p:has(>strong:only-child){background:#12101c;border-left:4px solid var(--v);border-radius:0 18px 18px 0;padding:22px 28px;font-size:22px;line-height:1.5;color:#fff}
[data-look="chapters"] .bs [style*="border-left:3px solid #9372ff"]{background:rgba(147,114,255,.1)!important;border-radius:18px!important;border-left:4px solid var(--v)!important;padding:22px 26px!important}
[data-look="chapters"] .ticks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
[data-look="chapters"] .ticks li{background:#11111a;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:22px;font-size:16.5px;line-height:1.55}
[data-look="chapters"] .ticks li strong{display:block;font-size:18px;margin-bottom:6px;color:#fff}
[data-look="chapters"] .ticks li::before{display:none}
[data-look="chapters"] .bs h3{font-size:21px;margin:28px 0 8px;color:#fff}
/* the sidebar becomes a closing band: related reading and share stay, the details already sit in the hero */
[data-look="chapters"] .case-body__aside{display:block;max-width:760px;margin:0 auto;padding:40px 0 0;border-top:1px solid rgba(255,255,255,.08)}
[data-look="chapters"] .case-aside{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:grid;grid-template-columns:1fr auto;gap:8px 40px;align-items:start}
[data-look="chapters"] .case-aside h3:first-of-type,[data-look="chapters"] .case-aside__list{display:none}
[data-look="chapters"] .case-aside .btn,[data-look="chapters"] .case-aside .case-aside__cta{display:none}
/* animations: only when the script is running, so the page is complete without it */
.pc-js [data-look="chapters"] .bs>*{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.pc-js [data-look="chapters"] .bs.in>*{opacity:1;transform:none}
.pc-js [data-look="chapters"] .bs.in>*:nth-child(2){transition-delay:.08s}.pc-js [data-look="chapters"] .bs.in>*:nth-child(3){transition-delay:.16s}.pc-js [data-look="chapters"] .bs.in>*:nth-child(n+4){transition-delay:.22s}
.pc-js [data-look="chapters"] .bs::before{opacity:0;transform:translateX(40px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}.pc-js [data-look="chapters"] .bs.in::before{opacity:1;transform:none}
.pc-js [data-look="chapters"] .bs h2::after{transform:scaleX(0);transition:transform .8s .25s cubic-bezier(.2,.7,.2,1)}.pc-js [data-look="chapters"] .bs.in h2::after{transform:scaleX(1)}
.pc-js [data-look="chapters"] .bs .ticks li{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}.pc-js [data-look="chapters"] .bs.in .ticks li{opacity:1;transform:none}
.pc-js [data-look="chapters"] .bs.in .ticks li:nth-child(1){transition-delay:.15s}.pc-js [data-look="chapters"] .bs.in .ticks li:nth-child(2){transition-delay:.27s}.pc-js [data-look="chapters"] .bs.in .ticks li:nth-child(3){transition-delay:.39s}.pc-js [data-look="chapters"] .bs.in .ticks li:nth-child(4){transition-delay:.51s}
.pc-js [data-look="chapters"] .bs.in p:has(>strong:only-child){animation:pcglow 1.6s .5s ease-out 1}
@keyframes pcglow{0%{box-shadow:0 0 0 0 rgba(147,114,255,.55)}100%{box-shadow:0 0 0 24px rgba(147,114,255,0)}}
.pc-js [data-look="chapters"] .case-hero h1,.pc-js [data-look="chapters"] .case-hero__sub,.pc-js [data-look="chapters"] .case-hero__meta{animation:pcup .8s cubic-bezier(.2,.7,.2,1) both}.pc-js [data-look="chapters"] .case-hero__sub{animation-delay:.1s}.pc-js [data-look="chapters"] .case-hero__meta{animation-delay:.2s}
@keyframes pcup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:900px){[data-look="chapters"] .ticks{grid-template-columns:1fr}[data-look="chapters"] .bs{padding:48px 0}[data-look="chapters"] .case-aside{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pc-js [data-look="chapters"] *,.pc-js [data-look="chapters"] *::before,.pc-js [data-look="chapters"] *::after{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}.pc-prog i{transition:none}}