:root { --ink:#111; --ground:#f3f3f2; --quiet:#858585; --card:#f8f8f6; --card-line:#d7d7d4; --page-gutter:clamp(20px,5vw,120px); --content-width:min(100%,clamp(60rem,84vw,135rem)); --display-ink-start:.25em; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--reading-sans); }
.ai-topbar { position:fixed; z-index:11; inset:0 0 auto; display:flex; height:54px; align-items:center; justify-content:space-between; padding:0 clamp(18px,3.6vw,55px); border-bottom:1px solid rgb(17 17 17 / .14); background:var(--ground); font:500 10px var(--reading-sans); letter-spacing:-.04em; }
.ai-nav { display:flex; min-width:0; align-items:center; gap:8px; }.ai-topbar a { color:inherit; text-decoration:none; }.ai-topbar-context { overflow:hidden; color:var(--quiet); text-overflow:ellipsis; white-space:nowrap; }
.ai-page { width:100%; margin:0; padding:calc(clamp(64px,8vw,130px) + 54px) var(--page-gutter) 10vh; }
.series-header,.ai-page section { width:var(--content-width); margin-inline:auto; }.series-header { text-align:left; }
.series-header h1 { margin:0; font-size:clamp(3rem,5vw,8rem); font-weight:500; line-height:1.02; letter-spacing:-.065em; text-wrap:balance; transform:translateX(calc(-1 * var(--display-ink-start))); }.series-header h1 span { display:inline; margin:0; text-indent:0; }
.series-intro { max-inline-size:min(100%,clamp(42rem,62vw,92rem)); margin:clamp(1.4rem,2.2vw,2rem) 0 0; color:#444; font-size:clamp(1rem,1.2vw,1.25rem); line-height:1.9; text-wrap:pretty; }
.ai-page section { margin-top:clamp(64px,8vw,120px); }.article-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:clamp(16px,1.8vw,30px); }
.article-entry { display:flex; min-height:clamp(260px,22vw,360px); flex-direction:column; padding:clamp(24px,2.8vw,42px); border:1px solid var(--card-line); background:var(--card); color:inherit; text-decoration:none; transition:background-color .18s ease,border-color .18s ease; }.article-index { display:block; margin:0 0 clamp(26px,3vw,42px); color:var(--quiet); font:500 10px var(--reading-sans); letter-spacing:.04em; }
.article-entry h3 { margin:0 0 .9rem; font-size:clamp(1.4rem,1.95vw,2.1rem); font-weight:500; line-height:1.12; letter-spacing:-.055em; text-wrap:balance; }.article-entry>p { margin:0; color:#666; font-size:clamp(.75rem,.75vw,.9rem); line-height:1.8; letter-spacing:.01em; text-wrap:pretty; }.article-cta { display:block; width:100%; margin:auto 0 0; padding-top:28px; color:var(--quiet); font:500 10px var(--reading-sans); letter-spacing:-.04em; }.article-cta b { padding-left:4px; color:var(--ink); font-size:13px; font-weight:400; }.article-entry:hover,.article-entry:focus-visible { border-color:#a8a8a5; background:#fff; outline:none; }
@media(max-width:700px){.ai-topbar{font-size:9px}.ai-page{padding:126px 20px 72px}.series-header h1{font-size:clamp(2.55rem,10.5vw,3.65rem);line-height:1.05}.series-intro{font-size:14px;line-height:1.8}.ai-page section{margin-top:64px}.article-list{grid-template-columns:1fr;gap:14px}.article-entry{min-height:0;padding:25px 22px}.article-index{margin-bottom:30px}.article-cta{margin-top:30px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* A vertical reading directory: articles are separated by lines, not cards. */
.article-list {
  display: block;
  width: min(100%, 78rem);
  border-top: 1px solid rgb(17 17 17 / .11);
}
.article-entry {
  display: grid;
  min-height: 0;
  grid-template-columns: clamp(3.25rem, 5vw, 5.5rem) minmax(0, 1fr);
  column-gap: clamp(14px, 1.8vw, 30px);
  align-items: start;
  padding: clamp(25px, 2.4vw, 38px) 0;
  border: 0;
  border-bottom: 1px solid rgb(17 17 17 / .11);
  background: transparent;
  box-shadow: none;
  transition: color .18s ease, background-color .18s ease;
}
.article-index {
  grid-column: 1;
  margin: .35rem 0 0;
  color: #6f716e;
}
.article-entry h3 {
  grid-column: 2;
  margin: 0;
}
.article-entry > p {
  grid-column: 2;
  max-width: 48rem;
  margin: .7rem 0 0;
}
.article-cta {
  grid-column: 2;
  grid-row: auto;
  align-self: start;
  width: auto;
  margin: 1rem 0 0;
  padding: 0;
  color: #4f514e;
  font-size: 11px;
  letter-spacing: 0;
  transition: color .18s ease;
}
.article-entry:hover,
.article-entry:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
}
.article-entry:hover h3,
.article-entry:focus-visible h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.article-entry:hover .article-cta,
.article-entry:focus-visible .article-cta { color: var(--ink); }
.article-entry:focus-visible { outline: 2px solid rgb(17 17 17 / .52); outline-offset: -2px; }
@media (max-width:700px) {
  .article-list { width:100%; border-top-color: rgb(17 17 17 / .11); }
  .article-entry {
    display: block;
    padding: 28px 0 30px;
    border-bottom-color: rgb(17 17 17 / .11);
  }
  .article-index { margin: 0 0 18px; }
  .article-entry h3 { margin: 0; }
  .article-entry > p { margin-top: .7rem; }
  .article-cta { width: auto; margin-top: 22px; padding: 0; }
}