/* Standalone. Deliberately NOT styles.css: that file is built around the
   full-screen feed and the grid, and pulling it in here would drag the feed
   layout onto a document page. These are simple reading pages. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:#0a0a0d; color:#e8e8ec;
       font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       font-size:16px; line-height:1.6; }
a { color:#9fd0ff; }
.wrap { max-width:760px; margin:0 auto; padding:28px 20px 72px; }
.crumb { font-size:14px; color:#8a8a96; margin:0 0 22px; }
.crumb a { color:#8a8a96; text-decoration:none; }
.crumb a:hover { color:#e8e8ec; }
h1 { font-size:30px; line-height:1.2; margin:0 0 14px; }
.lede { color:#a8a8b4; margin:0 0 26px; }
.hero { width:100%; height:auto; border-radius:10px; margin:6px 0 22px; display:block; }
.body { margin:0 0 26px; }
.facts { display:grid; grid-template-columns:auto 1fr; gap:6px 18px;
         margin:0 0 26px; font-size:15px; }
.facts dt { color:#8a8a96; }
.facts dd { margin:0; }
.ext { display:inline-block; padding:9px 16px; border:1px solid #33333d;
       border-radius:8px; text-decoration:none; }
.ext:hover { border-color:#5a5a68; }
.back { font-size:14px; color:#8a8a96; margin-top:34px;
        border-top:1px solid #1e1e26; padding-top:18px; }
.list { list-style:none; padding:0; margin:0; }
.list li { border-top:1px solid #1e1e26; }
.list a { display:grid; grid-template-columns:160px 1fr; gap:16px;
          padding:14px 0; text-decoration:none; color:inherit; align-items:start; }
.list a:hover .t { text-decoration:underline; }
.list img { width:160px; height:90px; object-fit:cover; border-radius:6px; display:block; }
.list .t { grid-column:2; font-weight:600; }
.list .d { grid-column:2; color:#8a8a96; font-size:14px; }
@media (max-width:560px) {
  .list a { grid-template-columns:1fr; }
  .list img { width:100%; height:auto; aspect-ratio:16/9; }
  .list .t, .list .d { grid-column:1; }
}