.l8w .articles .shead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.l8w .articles .shead .body { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 34ch; }
.l8w .articles .people { display: grid; gap: clamp(1rem, 2vw, 1.5rem); border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.5rem); }
.l8w .articles .person { display: flex; align-items: center; gap: 1rem; }
.l8w .articles .person img { width: 3.3rem; height: 3.3rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--caerulean); flex: none; }
.l8w .articles .person > span { display: grid; gap: .1rem; }
.l8w .articles .pname { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); letter-spacing: -.015em; line-height: 1.15; }
.l8w .articles .person .link { font-size: var(--t-small); justify-self: start; }
.l8w .articles .person .link.go { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

.l8w .alead .wrap { position: relative; }
.l8w .alead .lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 5vw, 6rem); align-items: end; }
.l8w .alead .lead > .eyebrow { grid-column: 1 / -1; color: var(--mauve); margin-bottom: clamp(.75rem, 1.6vw, 1.4rem); }
.l8w .alead .ltitle { grid-column: 1; grid-row: 2 / span 2; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 8vw, 8.75rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.l8w .alead .ltitle .turn { color: var(--mauve); }
.l8w .alead .pread { all: unset; cursor: pointer; border-radius: 3px; }
.l8w .alead .pread:focus-visible { outline: 2px solid var(--mauve); outline-offset: 6px; }
.l8w .alead .pread:hover .ptitle { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.l8w .alead .pmeta { grid-column: 1; grid-row: 4; display: flex; align-items: center; gap: .75rem; margin-top: clamp(1rem, 2vw, 1.75rem); font-size: var(--t-small); }
.l8w .alead .pmeta img { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 3px solid var(--mauve); object-fit: cover; }
.l8w .alead .pwords { grid-column: 2; grid-row: 2; font-size: var(--t-body); line-height: 1.5; max-width: 30em; }
.l8w .alead .pgo { grid-column: 2; grid-row: 3; margin-top: clamp(1rem, 2vw, 1.75rem); display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; }
.l8w .alead .pgo .link.go { font-family: var(--font-body); font-weight: 600; font-size: var(--t-small); letter-spacing: 0; }
.l8w .alead .post.lifted .ptitle { visibility: hidden; }

.l8w .articles .feedbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.l8w .articles .feedbar .fl { font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin-right: .25rem; }
.l8w .articles .feedbar .sep { width: 1px; height: 1.6rem; background: var(--rule); margin: 0 .4rem; }
.l8w .articles .feedbar button { font: 600 var(--t-small)/1 var(--font-body); padding: .55em 1em; border-radius: 3px; border: 1.5px solid rgba(45, 45, 45, .35); background: transparent; color: var(--ink); cursor: pointer; }
.l8w .articles .feedbar button[aria-pressed="true"] { background: var(--caerulean); border-color: var(--caerulean); color: var(--paper); }
.l8w .articles .feedbar button:focus-visible { outline: 2px solid var(--caerulean); outline-offset: 3px; }
.l8w .articles .none { margin-top: 1.25rem; font-size: var(--t-body); color: var(--soft); }
.l8w .articles .none[hidden] { display: none; }

.l8w .alist .feed { margin-top: clamp(2rem, 4vw, 3.5rem); }
.l8w .alist .yr { display: grid; grid-template-columns: clamp(6.5rem, 14vw, 15rem) minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 3rem); border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.l8w .alist .yr + .yr { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.l8w .alist .yr[hidden] { display: none; }
.l8w .alist .yh { font-family: var(--font-display); font-weight: 500; font-size: var(--t-heading); line-height: 1; letter-spacing: -.03em; color: var(--caerulean); }
.l8w .alist .post { display: grid; grid-template-columns: clamp(7rem, 10vw, 9.5rem) minmax(0, 1fr) auto; column-gap: clamp(.9rem, 2vw, 1.75rem); align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.l8w .alist .post:first-child { padding-top: .2rem; }
.l8w .alist .post[hidden] { display: none; }
.l8w .alist .pdate { font-size: var(--t-small); color: var(--soft); font-variant-numeric: tabular-nums; }
.l8w .alist .pmain { min-width: 0; }
.l8w .alist .pread { all: unset; display: block; cursor: pointer; border-radius: 3px; }
.l8w .alist .pread:focus-visible { outline: 2px solid var(--caerulean); outline-offset: 4px; }
.l8w .alist .ptitle { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); letter-spacing: -.015em; line-height: 1.22; text-wrap: pretty; }
.l8w .alist .pread:hover .ptitle { color: var(--caerulean); }
.l8w .alist .post[data-kind="post"] .ptitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.l8w .alist .pwords { margin-top: .35rem; font-size: var(--t-small); line-height: 1.45; color: var(--soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.l8w .alist .post[data-kind="post"] .pwords .pl { display: inline; }
.l8w .alist .post[data-kind="post"] .pwords .pl + .pl::before { content: " "; }
.l8w .alist .pmeta { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: var(--t-small); color: var(--soft); }
.l8w .alist .pmeta img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; }
.l8w .alist .pkind::before { content: "· "; }
.l8w .alist .pgo { font-size: var(--t-small); white-space: nowrap; }
.l8w .alist .pgo .link.go { font-family: var(--font-body); font-weight: 600; font-size: var(--t-small); letter-spacing: 0; }
.l8w .alist .post.lifted .ptitle { visibility: hidden; }

.l8w .aclose .art { align-items: flex-end; }
.l8w .aclose .art svg.il { overflow: visible; }

@media (max-width: 860px) {
  .l8w .articles .shead { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .l8w .articles .people { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.25rem; }
  .l8w .alead .lead { grid-template-columns: minmax(0, 1fr); }
  .l8w .alead .ltitle, .l8w .alead .pmeta, .l8w .alead .pwords, .l8w .alead .pgo { grid-column: 1; grid-row: auto; }
  .l8w .alead .pwords { margin-top: 1.25rem; }
  .l8w .alist .yr { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; }
  .l8w .alist .post { grid-template-columns: minmax(0, 1fr); row-gap: .25rem; }
  .l8w .alist .pgo { margin-top: .4rem; }
}
@media (max-width: 640px) { .l8w .articles .feedbar .sep { flex-basis: 100%; height: 0; margin: 0; } }

.l8rd { position: fixed; inset: 0; z-index: 60; }
.l8rd[hidden] { display: none; }
.l8rd .shade { position: absolute; inset: 0; background: var(--paper); opacity: 0; transition: opacity .25s ease; }
.l8rd.on .shade { opacity: .94; }
.l8rd .win { position: absolute; overflow: hidden; background: var(--white); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 10px 10px 0 -2px var(--mauve), 10px 10px 0 0 var(--ink); display: flex; flex-direction: column; }
.l8rd.josh .win { box-shadow: 10px 10px 0 -2px var(--khaki), 10px 10px 0 0 var(--ink); }
.l8rd .band { flex: none; display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem .55rem 1rem; background: var(--mauve); color: var(--ink); font: 600 var(--t-small)/1.2 var(--font-body); }
.l8rd.josh .band { background: var(--khaki); }
.l8rd .band img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.l8rd .band .who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l8rd .x { width: 40px; height: 40px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 3px; flex: none; }
.l8rd .x:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.l8rd .x svg { width: 20px; height: 20px; overflow: visible; }
.l8rd .x path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.l8rd .body { flex: 1; overflow: auto; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3.5vw, 3rem); overscroll-behavior: contain; }
.l8rd .body > * { opacity: var(--in, 1); }
.l8rd .date { font-size: var(--t-small); color: var(--soft); }
.l8rd h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-heading); letter-spacing: -.02em; line-height: 1.12; margin-top: .4rem; }
.l8rd .text { margin-top: 1.2rem; max-width: 36em; }
.l8rd .text p { font-size: var(--t-body); line-height: 1.5; color: var(--fg); }
.l8rd .text p + p { margin-top: 1em; }
.l8rd .go { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.l8rd .go .soft { font-size: var(--t-small); color: var(--soft); }
.l8rd .art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.l8rd .art .tblk text { font-family: var(--font-display); font-weight: 500; fill: var(--ink); }
.l8rd .art .tblk rect { fill: var(--mauve); }
.l8rd.josh .art .tblk rect { fill: var(--khaki); }
html.l8rd-open { overflow: hidden; }
.l8rd .text h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); margin-top: 1.4em; }
.l8rd .go .page[hidden] { display: none; }

.l8w .apage .wrap { max-width: calc(40 * var(--t-body) + 2 * var(--gutter)); }
.l8w .apage .title { margin-top: .6rem; font-size: var(--t-heading); line-height: 1.1; }
.l8w .apage .byline { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; font-size: var(--t-small); color: var(--soft); }
.l8w .apage .byline b { color: var(--fg); font-weight: 600; }
.l8w .apage .byline img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--mauve); }
.l8w .apage.josh .byline img { border-color: var(--khaki); }
.l8w .apage .atext { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.l8w .apage .atext p { font-size: var(--t-body); line-height: 1.55; }
.l8w .apage .atext p + p { margin-top: 1em; }
.l8w .apage .atext h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); margin: 1.8em 0 .6em; }
.l8w .apage .aafter { margin-top: clamp(2rem, 4vw, 3rem); }
.l8rd .text h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); letter-spacing: -.015em; margin: 1.6em 0 .5em; }
.l8rd .text ul, .l8w .apage .atext ul { list-style: disc; padding-left: 1.2em; display: grid; gap: .35em; margin-top: 1em; }
.l8rd .text li, .l8w .apage .atext li { font-size: var(--t-body); line-height: 1.5; }
.l8rd .text ul + p, .l8w .apage .atext ul + p, .l8rd .text blockquote + p, .l8w .apage .atext blockquote + p { margin-top: 1em; }
.l8rd .text blockquote, .l8w .apage .atext blockquote { margin: 1.3em 0; padding: .2em 0 .2em 1.1em; border-left: 4px solid var(--mauve); }
.l8rd.josh .text blockquote, .l8w .apage.josh .atext blockquote { border-left-color: var(--khaki); }
.l8rd .text blockquote p, .l8w .apage .atext blockquote p { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.01em; }
.l8rd .text .omit, .l8w .apage .atext .omit { font-style: italic; color: var(--soft); }
.l8rd .text a, .l8w .apage .atext a { overflow-wrap: anywhere; }
.l8rd .text .wait { color: var(--soft); }
.l8w .apage .aafter { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.l8w .apage .aafter .link.go { font-family: var(--font-body); font-weight: 600; font-size: var(--t-small); letter-spacing: 0; }
.l8w .apage .eyebrow .link.go { font: inherit; letter-spacing: inherit; }
.l8rd .text .pl { display: block; }