/* CredenTrek blog additions. Uses the site tokens, so light and dark themes follow automatically. */
.bcta{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;border:1px solid var(--ink);padding:28px;margin:48px 0 32px;background:var(--paper)}
.bcta .lab{margin-bottom:6px}
.bcta h2{font:800 clamp(22px,3vw,28px)/1.15 var(--disp);margin:0 0 10px;text-wrap:balance}
.bcta p{font-size:16px;line-height:1.5;color:var(--ink2);margin:0 0 10px}
.bcta ul{margin:8px 0 14px;padding-left:20px}
.bcta li{font-size:15.5px;line-height:1.5;color:var(--ink2);margin:0 0 6px}
.bcover{display:block;line-height:0;align-self:start}
.bcover img{width:100%;height:auto;border:1px solid var(--rule);box-shadow:6px 6px 0 var(--rule);transition:transform .15s,box-shadow .15s}
.bcover:hover img,.bcover:focus-visible img{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.bcta .btns{margin-top:14px}
.bcta .paid{font-size:12px;color:var(--mute);margin-top:12px}
.mcta{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin:32px 0}
.mcta img{width:64px;height:auto;border:1px solid var(--rule)}
.mcta p{margin:0;font-size:15px;line-height:1.45;color:var(--ink2)}
.mcta a.go{font-weight:600;white-space:nowrap}
.artlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.artlist li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
.artlist li:last-child{border-bottom:1px solid var(--rule)}
.artlist .n{font:300 26px/1 var(--disp);color:var(--mute)}
.artlist h2,.artlist h3{font:700 19px/1.25 var(--disp);margin:0 0 4px;text-wrap:balance}
.artlist h2 a,.artlist h3 a{color:var(--ink);text-decoration:none}
.artlist h2 a:hover,.artlist h3 a:hover{text-decoration:underline}
.artlist p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.artlist .lab{margin-bottom:4px}
.bhub{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:start}
.related-g{margin:36px 0}
.related-g ul{margin:8px 0 0;padding-left:20px}
@media (max-width:720px){.bcta{grid-template-columns:96px minmax(0,1fr);gap:18px;padding:20px}.bhub{grid-template-columns:minmax(0,1fr)}.mcta a.go{white-space:normal}}
@media (max-width:420px){.bcta{grid-template-columns:minmax(0,1fr)}.bcover{max-width:160px}}
/* ---- Round 2: visual polish ---- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:8px 0 8px}
.tile{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);text-decoration:none!important;transition:border-color .15s,background .15s,transform .15s}
.tile:hover,.tile:focus-visible{border-color:var(--ink);background:var(--tint);transform:translateY(-2px)}
.tile img{width:60px;height:auto;display:block;border:1px solid var(--rule)}
.tile .lab{margin-bottom:3px}
.tile b{display:block;font:800 21px/1.1 var(--disp)}
.tile span.sub{display:block;margin-top:4px;font:400 13px/1.35 var(--ui);color:var(--mute)}
.sec>header{align-items:center}
.sec>header .more{margin-left:auto;font:600 13px var(--ui);text-decoration:none!important;color:var(--ink);border:1px solid var(--ink);padding:6px 12px}
.sec>header .more:hover{background:var(--ink);color:var(--paper)}
.artlist.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-bottom:1px solid var(--rule)}
.artlist.two li:last-child{border-bottom:0}
main .artlist li h2 a,main .artlist li h3 a{text-decoration:none!important;color:var(--ink)}
main .artlist li h2 a:hover,main .artlist li h3 a:hover{text-decoration:underline!important;text-underline-offset:3px}
.artlist .n{font-variant-numeric:tabular-nums}
.artlist li{transition:background .15s}
.bhub .rbook{position:sticky;top:24px}
.abody .stand{font:italic 400 clamp(18px,2.2vw,21px)/1.5 var(--serif);color:var(--ink2);border-left:3px solid var(--ink);padding:2px 0 2px 18px;margin:0 0 34px}
.abody h2{margin-top:2.3em;padding-top:20px;border-top:1px solid var(--hair)}
.abody .stand+h2{margin-top:1.4em;border-top:0;padding-top:0}
.abody td:first-child{font-weight:600}
.abody td,.abody th{font-variant-numeric:tabular-nums}
.abody .tw{margin:22px 0 26px}
.abody li::marker{color:var(--mute)}
.mcta{background:var(--tint);border:1px solid var(--rule);border-left:3px solid var(--ink);padding:16px 18px;grid-template-columns:56px minmax(0,1fr);margin:36px 0}
.mcta .bcover img{width:56px;box-shadow:3px 3px 0 var(--rule)}
.mcta p{font:400 15px/1.5 var(--ui);color:var(--ink2)}
.mcta p b{color:var(--ink)}
.mcta a.go{display:inline-block;margin-top:10px;padding:7px 14px;background:var(--ink);color:var(--paper)!important;text-decoration:none!important;font:600 13px/1 var(--ui);white-space:nowrap}
.mcta a.go:hover{opacity:.85}
.bcta{background:var(--tint);border-left-width:3px;box-shadow:0 1px 0 var(--rule)}
.bcta ul{list-style:none;padding:0;margin:12px 0 16px}
.bcta li{position:relative;padding-left:22px}
.bcta li::before{content:"→";position:absolute;left:0;color:var(--ink);font-weight:700}
.afaq details{border-top:1px solid var(--rule)}
.related-g ul{list-style:none;padding:0}
.related-g li{padding:10px 0;border-top:1px solid var(--hair)}
.related-g a{text-decoration:none!important;font-weight:600}
.related-g a:hover{text-decoration:underline!important}
.pnav .pn{transition:border-color .15s,background .15s}
.pnav .pn:hover{border-color:var(--ink);background:var(--tint)}
.rail .rbox{background:var(--tint);padding:18px;border:1px solid var(--rule);border-top:3px solid var(--ink)}
.rail .sers li{padding:7px 0}
.rail .sers [aria-current=page] a{font-weight:700}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.artlist.two{grid-template-columns:minmax(0,1fr)}.bhub .rbook{position:static}}
@media (max-width:480px){.tiles{grid-template-columns:minmax(0,1fr)}.sec>header{flex-wrap:wrap}}
main section.sec{grid-template-columns:minmax(0,1fr)!important;gap:18px!important;padding-block:44px!important}
main section.sec>header{display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;flex-wrap:wrap}
main section.sec>header .no{font-size:32px!important;line-height:1}
main section.sec .body{max-width:none!important}
.sec>header .more{white-space:nowrap}
.body .artlist,main .artlist{max-width:none!important;padding-left:0!important}
.body .artlist li,main .artlist li{margin-bottom:0}
.bhub .artlist{max-width:none}
main section.sec>header .more{flex:0 0 auto!important;width:auto!important;margin-left:auto}
main section.sec>header .lab{flex:0 1 auto!important}
/* round 3: longer book names must not push the page wider on phones */
@media (max-width:520px){main section.sec>header{flex-wrap:wrap!important;row-gap:10px}main section.sec>header .lab{flex:1 1 60%!important;min-width:0}main section.sec>header .more{margin-left:0!important}}
@media (max-width:520px){main section.sec>header .more{white-space:normal!important;max-width:100%!important;flex:0 1 auto!important;align-self:flex-start}}
