:root{
  --bg:#f7f6f2; --fg:#111111; --muted:#555555; --line:#e5e5e0; --line2:#ecebe7;
  --container-w: min(100vw, 1500px);
  --container-left: calc((100vw - var(--container-w)) / 2);
  --split: 0.60; /* 60/40 */
  --divider-left: calc(var(--container-left) + var(--container-w) * var(--split));
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}

/* Full-height divider to visually split entire page into two columns */
.divider-fixed{position:fixed;top:0;bottom:0;width:1px;background:var(--line);z-index:30;left:var(--divider-left);pointer-events:none}

/* Left-side header ONLY over the left column */
.topnav{
  position:fixed; top:0; left:var(--container-left); width: calc(var(--container-w) * var(--split));
  z-index:35; background:rgba(247,246,242,.95);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.topnav-inner{padding:14px 18px;display:flex;gap:18px}
.topnav .letters{display:flex;gap:18px;font-weight:600;letter-spacing:.02em}

/* Two independent scroll columns filling the viewport */
.shell{
  position:relative; max-width:1500px; margin:0 auto; height:100vh;
  display:grid; grid-template-columns: 60% 40%;
}
/* Left column scrolls, content offset to sit below the fixed left header */
.col-left{overflow:auto; padding:52px 24px 80px 16px;} /* top padding ≈ header height */
.col-right{overflow:auto; padding:0 18px 80px 24px;}   /* starts at very top */

/* Local divider for accessibility (kept off because fixed divider exists) */
/* .col-right{border-left:1px solid var(--line);} */

/* Left stream cards */
.card{padding:18px 0 24px;border-top:1px solid var(--line2)}
.card h3{margin:8px 0 8px 0;font-size:20px;line-height:1.25}
.meta{font-size:12px;color:var(--muted);margin-top:8px}

/* Right column content */
.title{font-size:34px;font-weight:800;margin:0 0 8px 0}
.quote{font-style:italic;white-space:pre-line}
.attribution{margin-top:6px;color:var(--muted);font-size:13px}
.section{margin:18px 0}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.links a{display:block;margin:6px 0}

/* Categories: single continuous column */
.columns{columns:1 auto}
.columns a{display:block;margin:6px 0}

/* Utility */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;color:var(--muted)}