:root { --bg:#ffffff; --rail:#f7f7f7; --fg:#1d1d1f; --text:#333333; --muted:#8a8a8e; --line:#ededed;
  --hover:#f4f4f5; --current:#e8e8ea; --accent:#2bb24c; --link:#1a7f37; --panel:#fafafa; --rail-w:220px; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1c1e; --rail:#232325; --fg:#f2f2f2; --text:#d4d4d6; --muted:#8e8e93; --line:#2e2e31;
    --hover:#28282b; --current:#333337; --accent:#2bb24c; --link:#5ccf78; --panel:#212124; }
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
/* Each platform's own sans first, all with a medium weight for the titles:
   San Francisco, Windows 11's Segoe UI Variable, Ubuntu, Roboto. Older
   Segoe UI and Noto Sans have none, and show the titles at regular. */
body { background:var(--bg); color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Ubuntu,Roboto,
    "Noto Sans",Helvetica,Arial,sans-serif; }
a { color:var(--link); }
.rail { position:fixed; top:0; bottom:0; left:0; width:var(--rail-w); overflow-y:auto; background:var(--rail);
  padding:18px 10px 40px; z-index:10; }
/* The rail's right edge, dragged to set its width. */
.rail-edge { position:fixed; top:0; bottom:0; left:calc(var(--rail-w) - 3px); width:6px; z-index:11;
  cursor:col-resize; }
.rail-edge:hover, html.dragging .rail-edge { background:var(--line); }
html.dragging, html.dragging * { cursor:col-resize; user-select:none; }
.site { font-size:12px; color:var(--muted); margin:0 10px 18px; }
.label { font-size:13px; color:var(--muted); margin:22px 10px 4px; }
.item { display:block; padding:6px 10px; border-radius:6px; color:var(--text); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item:hover { background:var(--hover); }
.item.current { background:var(--current); color:var(--fg); font-weight:600; }
.group > summary { display:flex; align-items:center; list-style:none; }
.group > summary::-webkit-details-marker { display:none; }
.group > summary .item { flex:1; min-width:0; padding-left:4px; }
.chev { flex:none; width:24px; height:28px; cursor:pointer; background-color:var(--muted);
  transition:transform .12s; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5.5 3.5 8.5 7 5.5 10.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5.5 3.5 8.5 7 5.5 10.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat; }
.mark-read { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 1.8v10.6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4.2 2.3h6.8l-1.9 2.6 1.9 2.6H4.2z' fill='%23000'/%3E%3C/svg%3E") center/14px 14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 1.8v10.6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4.2 2.3h6.8l-1.9 2.6 1.9 2.6H4.2z' fill='%23000'/%3E%3C/svg%3E") center/14px 14px no-repeat; }
.group[open] > summary .chev { transform:rotate(90deg); }
.sub { padding-left:38px; }
.main { margin-left:var(--rail-w); padding:20px 40px 64px; }
.top { display:flex; align-items:center; gap:10px; }
.menu { border:0; background:none; color:var(--text); font-size:20px; line-height:1;
  padding:5px 7px; border-radius:6px; cursor:pointer; }
.menu:hover { background:var(--hover); }
/* After Google's box: rounded, the button inside it at the right end. */
.search { display:flex; align-items:center; flex:0 1 460px; margin-left:auto; height:36px;
  padding:0 4px 0 14px; border:1px solid var(--line); border-radius:18px; background:var(--bg); }
.search:hover, .search:focus-within { box-shadow:0 1px 5px rgba(0,0,0,.14); }
.search input { flex:1; min-width:0; border:0; outline:0; background:none; color:var(--fg); font:inherit; }
.search button { display:flex; border:0; background:none; color:var(--muted); padding:5px 7px;
  border-radius:14px; cursor:pointer; }
.search button:hover { color:var(--fg); background:var(--hover); }
/* Collapsed by the ☰ button, on a screen wide enough for the rail to sit
   beside the posts. */
@media (min-width:901px) {
  html.rail-collapsed .rail, html.rail-collapsed .rail-edge { display:none; }
  html.rail-collapsed .main { margin-left:0; }
}
h1 { font-size:28px; font-weight:700; color:var(--fg); letter-spacing:-.01em; margin:26px 0 4px; }
.meta { color:var(--muted); font-size:12.5px; margin:0 0 24px; }
.list { border-top:1px solid var(--line); }
.post { border-bottom:1px solid var(--line); }
.row { display:grid; grid-template-columns:150px minmax(0,1fr) 22px 4.5em; gap:0 16px; align-items:center;
  min-height:34px; padding:0 10px; list-style:none; cursor:pointer; }
.single .row { grid-template-columns:minmax(0,1fr) 22px 4.5em; }
.row::-webkit-details-marker { display:none; }
.row:hover, .post[open] > .row { background:var(--hover); }
div.row { cursor:default; }
.src { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-decoration:none; }
a.src:hover { color:var(--fg); text-decoration:underline; }
/* The marks come first, where they are hard to miss; the title after them
   is cut short with an ellipsis, and they are not. */
.ttl { display:flex; align-items:baseline; min-width:0; color:var(--fg); font-weight:500;
  text-decoration:none; }
.ttl > span:last-child { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.ttl:hover > span:last-child { text-decoration:underline; }
.mark { flex:none; color:var(--muted); font-weight:400; font-size:12px; margin-right:6px; }
.mark.paid { color:var(--text); font-weight:500; font-size:13px; }
/* Unread titles at the weight above, read ones at regular. That difference
   is slight, and nothing where a font has no medium weight, so an unread
   post is flagged too. A read post's flag shows only on the row under the
   pointer, to unread it by; on a touch screen, with no pointer, faintly.
   The script adds the flags, and only where the browser keeps the marks. */
.post.read .ttl { font-weight:400; }
.mark-read { width:22px; height:22px; padding:0; border:0; cursor:pointer; background-color:var(--accent); }
.post.read .mark-read { background-color:var(--muted); opacity:0; }
.post.read > .row:hover .mark-read, .post.read .mark-read:focus-visible { opacity:1; }
.post .mark-read:hover { background-color:var(--fg); }
@media (hover:none) { .post.read .mark-read { opacity:.35; } }
.mark-all { border:0; background:none; padding:0; color:var(--link); font:inherit; cursor:pointer; }
.mark-all:hover:not(:disabled) { text-decoration:underline; }
.mark-all:disabled { color:inherit; cursor:default; }
.ago { color:var(--muted); font-size:12px; text-align:right; white-space:nowrap; }
/* As wide as main, less its padding: no measure of its own. */
.panel { padding:16px 26px 26px; background:var(--panel); border-top:1px solid var(--line); line-height:1.6; }
.byline { color:var(--muted); font-size:12.5px; margin:0 0 14px; }
.panel li { margin-bottom:6px; }
.panel > :last-child { margin-bottom:0; }
.secondary { margin:0 0 14px; }
.secondary > summary { display:flex; align-items:center; gap:2px; color:var(--muted); font-size:13px;
  list-style:none; cursor:pointer; width:max-content; }
.secondary > summary::-webkit-details-marker { display:none; }
.secondary > summary .chev { width:18px; height:22px; }
.secondary[open] > summary .chev { transform:rotate(90deg); }
.secondary-body { margin:8px 0 0; padding:0 0 14px; border-bottom:1px solid var(--line); }
.secondary-body > :first-child { margin-top:0; }
.pager { display:flex; justify-content:center; align-items:center; gap:24px; padding:28px 0 0;
  color:var(--muted); font-size:14px; }
.pager a { color:var(--link); font-weight:500; text-decoration:none; }
.pager a:hover { text-decoration:underline; }
.scrim { display:none; }
/* Below this the rail is a drawer, at a fixed width whatever it was dragged
   to, and a row puts the publication and time on a line above a title that
   wraps. */
@media (max-width:900px) {
  .rail { width:272px; transform:translateX(-100%); transition:transform .15s; }
  .rail-edge { display:none; }
  body.rail-open .rail { transform:none; box-shadow:0 0 24px rgba(0,0,0,.18); }
  body.rail-open .scrim { display:block; position:fixed; inset:0; z-index:9; background:rgba(0,0,0,.2); }
  .main { margin-left:0; padding:10px 16px 48px; }
  /* The box on a line of its own, the width of the screen. 16px, or
     Safari on a phone zooms the page in when the box is tapped. */
  .top { flex-wrap:wrap; }
  .search { flex:1 1 100%; margin-left:0; }
  .search input { font-size:16px; }
  h1 { font-size:24px; margin-top:16px; }
  .meta { margin-bottom:18px; }
  .row { grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"src mark-read ago" "ttl ttl ttl";
    gap:1px 12px; padding:7px 6px; }
  .src { grid-area:src; font-size:12px; }
  .ago { grid-area:ago; }
  .ttl { grid-area:ttl; }
  .mark-read { grid-area:mark-read; }
  .ttl > span:last-child { white-space:normal; }
  .single .row { grid-template-areas:"ttl mark-read ago"; }
  .panel { padding:14px 14px 20px; }
}