/* Reading shell shared by the article and tool detail pages: the two-column
   layout and the rail that sits beside the content. Kept out of the article's
   typography file so a tool page can adopt the layout without inheriting prose
   rules meant for long-form editorial. */

/* ----------------------------------------------------------------- layout */
/* A contents rail beside the reading column. The column carries the measure,
   so the text stays comfortable to read while the page still uses its width
   instead of trailing off into empty space on the right. */
.a-layout{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:22px;align-items:start}
.a-column{min-width:0;display:grid;gap:14px}
.a-rail{position:sticky;top:86px;min-width:0}
/* The contents list is hidden until JS finds headings. Without this an article
   with no headings would reserve an empty 236px column and sit off-centre. */
/* Collapse whenever the rail has nothing to show — a short article with no
   headings, or a library with no other tools — rather than reserving an empty
   column and pushing the content off centre. */
.a-layout:not(:has(.a-rail > *:not([hidden]))){grid-template-columns:minmax(0,1fr)}
.a-layout:not(:has(.a-rail > *:not([hidden]))) .a-rail{display:none}
@media(max-width:1100px){
  .a-layout{grid-template-columns:1fr}
  .a-rail{position:static;top:auto}
}

/* ------------------------------------------------------------------- hero */
.a-hero{padding:clamp(26px,3.4vw,44px) clamp(22px,3.4vw,46px)}
.a-hero h1{
  margin:14px 0 0;font-size:clamp(29px,3.9vw,46px);line-height:1.14;
  letter-spacing:-.028em;text-wrap:balance;color:var(--text);
}
.a-hero .sub{
  margin:16px 0 0;max-width:60ch;font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.65;font-weight:420;color:var(--text-dim);text-wrap:pretty;
}
.article-dates{font-size:12.5px;color:var(--text-faint);letter-spacing:.01em}
.a-meta-top{margin-bottom:6px}
.chips{gap:6px}
.chip{
  padding:5px 11px;border:1px solid var(--border);border-radius:999px;
  background:var(--soft);font-size:11.5px;font-weight:600;color:var(--text-dim);
  transition:border-color .16s,color .16s;
}
.chip:hover{border-color:var(--brand);color:var(--brand-strong)}

/* Byline reads as a small credential card rather than a stray line. */
.a-byline{
  display:flex;align-items:center;gap:13px;margin-top:22px;padding:14px 16px;
  border:1px solid var(--border);border-radius:13px;background:var(--soft);
}
.a-byline .avatar-initial{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-strong);font-weight:750;font-size:15px;
}
.a-byline .by{display:grid;gap:2px;min-width:0}
.a-byline .by>span:first-child{font-size:14px;font-weight:650;color:var(--text)}
.a-byline .muted{font-size:12px;color:var(--text-faint)}
.a-byline small{font-size:11.5px;line-height:1.55;color:var(--text-faint)}

.a-cover{margin:26px 0 0}
.a-cover img{width:100%;border-radius:15px;box-shadow:var(--shadow)}
.a-cover figcaption{margin-top:9px;font-size:12px;line-height:1.6;color:var(--text-faint);text-align:center}

/* ------------------------------------------------------------- rail feed */
.a-more{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}
.a-more-title{
  margin:0 0 12px;font-size:10px;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);
}
.a-more-item{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center;
  padding:9px;margin:0 -9px;border-radius:11px;transition:background .15s;
}
.a-more-item:hover{background:var(--soft)}
.a-more-thumb{
  width:44px;height:44px;border-radius:9px;overflow:hidden;background:var(--soft);
  display:grid;place-items:center;
}
.a-more-thumb img{width:100%;height:100%;object-fit:cover}
.a-more-thumb-fallback{font-size:16px;font-weight:750;color:var(--brand-strong)}
.a-more-copy{min-width:0}
.a-more-copy strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;font-weight:600;line-height:1.4;color:var(--text);
}
.a-more-copy small{display:block;margin-top:3px;font-size:11px;color:var(--text-faint)}
.a-more-all{display:inline-block;margin-top:12px;font-size:12px;font-weight:650;color:var(--brand-strong)}
.a-more-all:hover{text-decoration:underline}


/* ---------------------------------------------------------------- rail cards */
/* A bare list floating against the page background reads as leftover space.
   Each rail block gets a frame so the column looks intentional. */
.rail-card{
  padding:16px 17px;margin-bottom:12px;
  border:1px solid var(--border);border-radius:13px;background:var(--panel);
}
.rail-card:last-child{margin-bottom:0}
.rail-card--quiet{background:var(--soft)}
.rail-card-title{
  margin:0 0 12px;font-size:10px;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);
}
.rail-note{margin:0 0 12px;font-size:12px;line-height:1.6;color:var(--text-faint)}

.rail-tags{display:flex;flex-wrap:wrap;gap:6px}
.rail-tags a{
  padding:4px 9px;border:1px solid var(--border);border-radius:999px;
  font-size:11.5px;font-weight:600;color:var(--text-dim);text-decoration:none;
  transition:border-color .15s ease,color .15s ease;
}
.rail-tags a:hover{border-color:var(--brand);color:var(--brand-strong)}

.rail-facts{margin:0;display:grid;gap:9px}
.rail-facts div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rail-facts dt{font-size:12px;color:var(--text-faint)}
.rail-facts dd{margin:0;font-size:12.5px;font-weight:650;text-align:right;color:var(--text);overflow-wrap:anywhere}

.rail-links{display:grid;gap:6px;margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}
.rail-links a{font-size:12px;font-weight:600;color:var(--brand-strong);text-decoration:none}
.rail-links a:hover{text-decoration:underline}

.rail-feed{display:grid;gap:2px}
.rail-card .a-more-item{margin:0}