/* ===== CUBIE FX — BLOG + PRICING ===== */
:root{
  --bg:#05070E;
  --bg2:#080B14;
  --card:#0C1020;
  --card2:#10152A;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.13);
  --ink:#EDF0F8;
  --muted:#98A0B6;
  --muted2:#666E85;
  --pu:#7C5CFF;
  --bl:#4A8CFF;
  --grad:linear-gradient(100deg,#5B5BF5,#7C5CFF);
  --green:#22C55E;
  --red:#EF4444;
  --orange:#F59E0B;
  --wrap:1360px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,b,strong{font-family:"Manrope",system-ui,sans-serif;letter-spacing:-.02em;margin:0}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:2px solid var(--pu);outline-offset:2px;border-radius:8px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.gt{background:linear-gradient(100deg,#6C8CFF,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}

/* NAV */
.nav{position:sticky;top:0;z-index:60;background:rgba(5,7,14,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;height:66px;gap:16px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:30px;height:30px;object-fit:contain}
.logo span{font-family:"Manrope",sans-serif;font-weight:800;font-size:18px}
.logo b{color:var(--bl)}
.nlinks{display:flex;align-items:center;gap:26px;margin:0 auto;font-size:13.5px;font-weight:500;color:var(--muted)}
.nlinks a{position:relative;padding:6px 0}
.nlinks a:hover{color:var(--ink)}
.nlinks a.on{color:var(--ink);font-weight:600}
.nlinks a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--grad)}
.nright{display:flex;align-items:center;gap:10px}
.iconbtn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);
  background:none;border:0;cursor:pointer;position:relative;flex:none}
.iconbtn:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.iconbtn svg{width:18px;height:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;
  padding:10px 18px;font-family:"Manrope",sans-serif;font-weight:700;font-size:13px;
  border:0;cursor:pointer;transition:transform .16s,opacity .18s,border-color .18s,background .18s}
.btn svg{width:14px;height:14px}
.btn.grad{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(91,91,245,.3)}
.btn.grad:hover{transform:translateY(-2px)}
.btn.outline{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.btn.outline:hover{background:rgba(255,255,255,.05)}
.btn.gold{background:linear-gradient(100deg,#D97706,#F59E0B);color:#fff}
.btn.full{width:100%}
.burger{display:none;background:none;border:0;color:var(--ink);padding:6px;cursor:pointer}
.burger svg{width:22px;height:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px}

/* ===== BLOG LAYOUT ===== */
.cols{display:grid;grid-template-columns:238px minmax(0,1fr);gap:18px;padding:20px 0 44px;align-items:start}
.cols3{display:grid;grid-template-columns:238px minmax(0,1fr) 288px;gap:18px;padding:20px 0 44px;align-items:start}
.modhead{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.modhead .mi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:rgba(124,92,255,.15);color:#A78BFA;flex:none}
.modhead .mi svg{width:18px;height:18px}
.modhead h1{font-size:16px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#A78BFA}
.modhead .right{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;width:290px}
.search svg{width:15px;height:15px;color:var(--muted2);flex:none}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font-family:"Inter",sans-serif;font-size:12.5px;outline:none}
.search input::placeholder{color:var(--muted2)}
.search kbd{font-family:"Inter",sans-serif;font-size:10px;color:var(--muted2);border:1px solid var(--line2);border-radius:5px;padding:1px 5px}

.snav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:var(--muted);font-size:12.5px;font-weight:500;transition:background .16s,color .16s}
.snav svg{width:15px;height:15px;flex:none}
.snav:hover{background:rgba(255,255,255,.045);color:var(--ink)}
.snav.on{background:rgba(124,92,255,.18);color:#C4B5FD;font-weight:600}
.sgroup{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);font-weight:800;padding:14px 4px 9px}
.catrow{display:flex;align-items:center;padding:7px 4px;font-size:12px;color:var(--muted)}
.catrow:hover{color:var(--ink)}
.catrow .n{margin-left:auto;font-size:11px;color:var(--muted2)}

.sub-card{background:linear-gradient(170deg,rgba(124,92,255,.16),rgba(12,16,32,.6));
  border:1px solid rgba(124,92,255,.3);border-radius:15px;padding:16px;margin-top:14px}
.sub-card b{display:block;font-size:13.5px;font-weight:800;margin-bottom:6px}
.sub-card p{font-size:11px;color:var(--muted2);line-height:1.6;margin-bottom:12px}
.sub-card input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:9px;
  padding:9px 12px;color:var(--ink);font-family:"Inter",sans-serif;font-size:12px;outline:none;margin-bottom:9px}
.sub-card input:focus{border-color:var(--pu)}

.author{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05)}
.author:first-of-type{border-top:0}
.author .ap{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:"Manrope",sans-serif;font-weight:800;font-size:10.5px;color:#fff}
.author b{display:block;font-size:12px}
.author span{font-size:10.5px;color:var(--muted2)}
.author .n{margin-left:auto;font-size:10.5px;color:var(--muted2);white-space:nowrap}
.a1{background:linear-gradient(140deg,#5B5BF5,#A855F7)}
.a2{background:linear-gradient(140deg,#0EA5E9,#22C55E)}
.a3{background:linear-gradient(140deg,#F59E0B,#EC4899)}
.a4{background:linear-gradient(140deg,#EC4899,#8B5CF6)}
.a5{background:linear-gradient(140deg,#22D3EE,#3B82F6)}

/* featured post */
.featured{position:relative;overflow:hidden;background:linear-gradient(100deg,#0E1226,#0A0D1A);
  border:1px solid var(--line);border-radius:16px;padding:26px;margin-bottom:16px;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.tag{display:inline-block;font-size:9.5px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:.04em}
.t-pu{background:rgba(124,92,255,.18);color:#C4B5FD}
.t-gr{background:rgba(34,197,94,.16);color:#4ADE80}
.t-bl{background:rgba(74,140,255,.16);color:#93C5FD}
.t-or{background:rgba(245,158,11,.16);color:#FBBF24}
.t-rd{background:rgba(239,68,68,.16);color:#FCA5A5}
.featured .cat{font-size:11px;color:var(--muted2);display:block;margin:10px 0 8px}
.featured h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;line-height:1.25;margin-bottom:12px}
.featured p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.byline{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.byline .ap{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:"Manrope",sans-serif;font-weight:800;font-size:10.5px;color:#fff}
.byline b{display:block;font-size:12px}
.byline span{font-size:10.5px;color:var(--muted2)}
.art{display:grid;place-items:center}
.art svg{width:100%;max-width:320px;height:auto}

/* filter tabs */
.ftabs{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.ftab{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:9px;
  padding:8px 15px;font-size:12.5px;font-family:"Inter",sans-serif;cursor:pointer;white-space:nowrap;transition:all .16s}
.ftab:hover{color:var(--ink);border-color:var(--line2)}
.ftab.on{background:var(--grad);color:#fff;border-color:transparent;font-weight:600}
.ftabs .filter{margin-left:auto}

/* post list */
.plist{display:grid;gap:12px;margin-bottom:16px}
.post{display:grid;grid-template-columns:150px 1fr;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:13px;transition:transform .16s,border-color .16s}
.post:hover{transform:translateY(-3px);border-color:var(--line2)}
.thumb{border-radius:11px;overflow:hidden;background:linear-gradient(150deg,#141A33,#0B0F1F);
  display:grid;place-items:center;min-height:104px}
.thumb svg{width:100%;height:auto;display:block}
.post .cat{font-size:10.5px;color:#A78BFA;font-weight:700;display:block;margin-bottom:5px}
.post h3{font-size:14.5px;font-weight:800;line-height:1.35;margin-bottom:6px}
.post p{font-size:11.5px;color:var(--muted2);line-height:1.6;margin-bottom:9px}
.pmeta{display:flex;align-items:center;gap:14px;font-size:10.5px;color:var(--muted2);flex-wrap:wrap}
.pmeta span{display:flex;align-items:center;gap:5px}
.pmeta svg{width:12px;height:12px}
.pmeta .save{margin-left:auto;cursor:pointer;background:none;border:0;color:var(--muted2);padding:2px}
.pmeta .save.on{color:#A78BFA}
.loadmore{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--card);border:1px solid var(--line2);color:var(--ink);border-radius:11px;padding:12px;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:13px;cursor:pointer}
.loadmore:hover{background:rgba(255,255,255,.05)}
.loadmore svg{width:14px;height:14px}

/* trending */
.trow{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-top:1px solid rgba(255,255,255,.05)}
.trow:first-of-type{border-top:0}
.trow .num{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:rgba(124,92,255,.18);color:#C4B5FD;font-size:10.5px;font-weight:800;font-family:"Manrope",sans-serif}
.trow .tt{width:38px;height:32px;border-radius:8px;flex:none;overflow:hidden;background:#141A33}
.trow .tt svg{width:100%;height:100%}
.trow b{display:block;font-size:11.5px;line-height:1.4}
.trow span{font-size:10px;color:var(--muted2)}

.community{background:linear-gradient(170deg,rgba(124,92,255,.14),rgba(12,16,32,.6));
  border:1px solid rgba(124,92,255,.28);border-radius:15px;padding:16px;text-align:center;margin-top:14px}
.community b{display:block;font-size:13.5px;font-weight:800;margin-bottom:6px}
.community p{font-size:11px;color:var(--muted2);margin-bottom:13px}
.socials{display:flex;justify-content:center;gap:9px;margin-bottom:13px}
.socials a{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);
  display:grid;place-items:center;color:var(--muted)}
.socials a:hover{background:var(--grad);color:#fff}
.socials svg{width:16px;height:16px}

/* ===== BLOG SINGLE ===== */
.back{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#A78BFA;font-weight:600;margin-bottom:14px}
.back svg{width:14px;height:14px}
.tags-row{display:flex;gap:8px;margin-bottom:12px}
.article h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1.22;margin-bottom:12px}
.article .lede{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:16px}
.abar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.abar .stats{display:flex;gap:14px;font-size:11.5px;color:var(--muted2);margin-left:auto}
.abar .stats span{display:flex;align-items:center;gap:5px}
.abar .stats svg{width:13px;height:13px}
.hero-art{background:linear-gradient(150deg,#141A33,#0B0F1F);border:1px solid var(--line);
  border-radius:15px;padding:20px;margin-bottom:18px;display:grid;place-items:center}
.hero-art svg{width:100%;max-width:560px;height:auto}
.share{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.share span{font-size:12px;color:var(--muted2)}
.share a{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.05);
  display:grid;place-items:center;color:var(--muted)}
.share a:hover{background:var(--grad);color:#fff}
.share svg{width:14px;height:14px}

.article h2{font-size:19px;font-weight:800;margin:28px 0 12px;scroll-margin-top:80px}
.article h3{font-size:15px;font-weight:800;margin:20px 0 9px}
.article p{font-size:13.5px;color:var(--muted);line-height:1.85;margin-bottom:14px}
.article ul,.article ol{color:var(--muted);font-size:13.5px;line-height:1.85;padding-left:20px;margin:0 0 16px}
.article li{margin-bottom:7px}
.article strong{color:var(--ink)}
.article a.inline{color:#A78BFA}
.article a.inline:hover{text-decoration:underline}
.callout{background:rgba(124,92,255,.09);border:1px solid rgba(124,92,255,.28);border-radius:13px;
  padding:16px 18px;margin:18px 0}
.callout p{margin:0;font-size:13px;color:#C4B5FD}
.formula{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:16px;text-align:center;margin:16px 0}
.formula code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13.5px;color:#A78BFA;line-height:2}
.article table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:13px}
.article th{text-align:left;font-size:11px;color:var(--muted2);font-weight:700;padding:0 10px 10px 0}
.article td{padding:9px 10px 9px 0;border-top:1px solid rgba(255,255,255,.05);color:var(--muted)}

.toc{position:sticky;top:82px}
.toc b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A78BFA;margin-bottom:12px}
.toc a{display:block;font-size:12px;color:var(--muted2);padding:6px 0 6px 12px;border-left:2px solid transparent}
.toc a:hover,.toc a.on{color:var(--ink);border-left-color:var(--pu)}

/* ===== PRICING ===== */
.phero{text-align:center;padding:40px 0 26px}
.pill{display:inline-block;font-size:11.5px;font-weight:700;color:#C4B5FD;background:rgba(124,92,255,.14);
  border:1px solid rgba(124,92,255,.3);border-radius:999px;padding:6px 16px;margin-bottom:16px}
.phero h1{font-size:clamp(28px,4vw,40px);font-weight:800;line-height:1.2;margin-bottom:12px}
.phero p{font-size:14px;color:var(--muted);max-width:520px;margin:0 auto 22px}
.switcher{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px}
.switcher button{background:none;border:0;color:var(--muted);border-radius:999px;padding:9px 22px;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:all .18s}
.switcher button.on{background:var(--grad);color:#fff}
.switcher .save{font-size:10px;color:#4ADE80;margin-left:6px}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 18px;
  transition:transform .18s,border-color .18s}
.plan:hover{transform:translateY(-4px);border-color:var(--line2)}
.plan.pop{border-color:rgba(124,92,255,.55);background:linear-gradient(170deg,rgba(124,92,255,.13),rgba(12,16,32,.5))}
.plan .ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;
  font-size:9.5px;font-weight:800;padding:4px 13px;border-radius:999px;white-space:nowrap;letter-spacing:.04em}
.plan .pn{font-size:17px;font-weight:800;display:block}
.plan .pd{font-size:11.5px;color:var(--muted2);display:block;margin-bottom:14px}
.plan .price{display:flex;align-items:baseline;gap:5px;margin-bottom:12px}
.plan .price b{font-size:32px;font-weight:800;font-family:"Manrope",sans-serif}
.plan .price span{font-size:12px;color:var(--muted2)}
.plan .blurb{font-size:11.5px;color:var(--muted2);line-height:1.6;margin-bottom:16px;min-height:34px}
.plan .btn{margin-bottom:18px}
.plan .inc{font-size:11px;font-weight:700;color:#A78BFA;margin-bottom:10px;display:block}
.plan .fl{display:flex;align-items:flex-start;gap:9px;font-size:11.5px;color:var(--muted);padding:4px 0}
.plan .fl svg{width:13px;height:13px;color:#4ADE80;flex:none;margin-top:3px}

.ctable-wrap{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  margin-bottom:22px;overflow-x:auto}
.ctable{width:100%;border-collapse:collapse;min-width:660px}
.ctable th{font-size:11.5px;font-weight:800;padding:0 12px 14px;text-align:center;font-family:"Manrope",sans-serif}
.ctable th:first-child{text-align:left;color:var(--muted2);font-weight:700}
.ctable td{font-size:12.5px;padding:11px 12px;border-top:1px solid rgba(255,255,255,.05);text-align:center;color:var(--muted)}
.ctable td:first-child{text-align:left;color:var(--ink);font-weight:600}
.ctable .y{color:#4ADE80}
.ctable .n{color:var(--muted2)}
.ctable svg{width:15px;height:15px}
.ctable .hi{background:rgba(124,92,255,.06)}

.trust4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.tc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.tc .ti{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin:0 auto 10px;
  background:rgba(124,92,255,.14);color:#A78BFA}
.tc .ti svg{width:19px;height:19px}
.tc b{display:block;font-size:13px;font-weight:800;margin-bottom:4px}
.tc span{font-size:11px;color:var(--muted2)}

.custom{display:flex;align-items:center;gap:18px;background:linear-gradient(100deg,rgba(91,91,245,.15),rgba(12,16,32,.6));
  border:1px solid rgba(124,92,255,.3);border-radius:16px;padding:22px 24px;flex-wrap:wrap;margin-bottom:22px}
.custom .ci{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:rgba(124,92,255,.18);color:#A78BFA}
.custom .ci svg{width:22px;height:22px}
.custom b{display:block;font-size:17px;font-weight:800}
.custom p{font-size:12.5px;color:var(--muted2)}
.custom .btn{margin-left:auto}

.faq{border-bottom:1px solid var(--line);padding:14px 0}
.faq:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-family:"Manrope",sans-serif;font-weight:700;font-size:13.5px;
  list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#A78BFA;font-size:18px;line-height:1}
.faq[open] summary::after{content:"–"}
.faq p{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.75}

/* footer */
.footer{border-top:1px solid var(--line);background:var(--bg2);padding:40px 0 24px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.fbrand p{font-size:12.5px;color:var(--muted2);line-height:1.7;max-width:250px;margin-top:12px}
.fcol h4{font-size:13px;font-weight:800;margin-bottom:12px}
.fcol a{display:block;font-size:12.5px;color:var(--muted2);padding:4px 0}
.fcol a:hover{color:var(--ink)}
.fbase{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted2)}
.fbase a{color:#A78BFA;font-weight:600}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);z-index:95;
  background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:12px 20px;
  font-size:13px;font-weight:600;box-shadow:0 20px 50px rgba(0,0,0,.6);transition:transform .26s,opacity .26s;opacity:0}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.ok{border-color:rgba(34,197,94,.4);color:#4ADE80}

@media (max-width:1200px){
  .cols3{grid-template-columns:238px minmax(0,1fr)}
  .rail-r{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .plans{grid-template-columns:1fr 1fr}
  .trust4{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nlinks{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:15px;background:rgba(8,11,20,.98);padding:20px 22px;border-bottom:1px solid var(--line)}
  .nlinks.open{display:flex}
  .burger{display:grid}
  .cols,.cols3{grid-template-columns:1fr}
  .rail-l{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .featured{grid-template-columns:1fr}
  .featured .art{order:-1}
  .search{width:100%}
  .fgrid{grid-template-columns:1fr 1fr}
  .toc{position:static}
}
@media (max-width:620px){
  .rail-l,.rail-r{grid-template-columns:1fr}
  .post{grid-template-columns:1fr}
  .plans,.trust4{grid-template-columns:1fr}
  .custom .btn{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ============================================
   With the member sidebar alongside

   These pages are public and carry their own two rails. When a member is
   signed in, layout.js adds the app sidebar as well, and three columns
   becomes four. At 1920 there is room for that, but only if the two
   rails give some of it back — otherwise the article list, which is the
   reason for the page, ends up the narrowest column on screen.

   The selector only matches once layout.js has filled the aside, so a
   signed-out visitor keeps the wider original layout.
   ============================================ */
.app > aside.side:not(:empty) ~ .main .cols3{
  grid-template-columns:200px minmax(0,1fr) 252px;
  gap:16px;
}
.app > aside.side:not(:empty) ~ .main .cols{
  grid-template-columns:200px minmax(0,1fr);
  gap:16px;
}

/* The rails carry less at that width, so the type inside them steps
   down rather than wrapping every second word. */
.app > aside.side:not(:empty) ~ .main .rail-l .snav{font-size:12.5px;padding:8px 10px}
.app > aside.side:not(:empty) ~ .main .rail-l .catrow{font-size:12px}
.app > aside.side:not(:empty) ~ .main .rail-r .trow b{font-size:12px}

/* An aside that layout.js never filled — a signed out visitor — must not
   leave a 248px gap where a sidebar would have been. */
.app > aside.side:empty{display:none}

@media (max-width:1500px){
  /* Four columns stops fitting before the existing breakpoints notice,
     because those were written for three. The right rail goes first: it
     is the least useful of the four. */
  .app > aside.side:not(:empty) ~ .main .cols3{
    grid-template-columns:200px minmax(0,1fr);
  }
  .app > aside.side:not(:empty) ~ .main .rail-r{display:none}
}

/* ============================================
   Table of contents that actually sticks

   .toc already carried position:sticky, and it did nothing. A sticky
   element can only travel inside its own parent, and .cols3 sets
   align-items:start — which makes .rail-r exactly as tall as the cards
   inside it. So the contents stuck for the couple of hundred pixels the
   rail occupied and then left the screen with it, which looks identical
   to not being sticky at all.

   Stretching the rail to the height of the row gives the contents the
   whole article to travel against. Nothing moves visually: the rail has
   no background of its own, only the cards inside it do.
   ============================================ */
.cols3 > .rail-r{align-self:stretch}

.toc{
  position:sticky;
  top:calc(var(--nav-h) + 16px);
  /* A long article can list more headings than fit on screen. Scroll the
     contents rather than letting it run off the bottom. */
  max-height:calc(100vh - var(--nav-h) - 32px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
}
.toc::-webkit-scrollbar{width:5px}
.toc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}

/* Clicking an entry jumped the heading up under the fixed navbar, which
   hid the line you had just asked to read. */
.article h2[id],.article h3[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}
html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width:1100px){
  /* The rail drops below the article at this width, so there is nothing
     left to stick against. */
  .cols3 > .rail-r{align-self:start}
  .toc{position:static;max-height:none;overflow:visible}
}