/* Thoughts listing and article follow the supplied 1440px composition. */
.thought-article { --grey-500:#d3d8e8; }
/* Clip horizontal artwork without creating a scroll container that traps sticky. */
.thought-article .page { overflow:clip; }
.thought-collection { padding:64rem 100rem; display:flex; flex-direction:column; align-items:center; gap:32rem; }
.thought-grid { width:1240rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32rem; align-items:start; }
.thought-card { min-width:0; }
.thought-card>a,.thought-card>button { display:flex; flex-direction:column; gap:16rem; width:100%; padding:0; border:0; background:none; color:var(--ink); text-align:left; font:inherit; }
.thought-cover { width:100%; aspect-ratio:1; border-radius:32rem; background:white; }
.thought-card-copy { display:flex; flex-direction:column; gap:8rem; }
.thought-card h3 { font-size:32rem; line-height:38rem; }
.thought-card p { font-size:16rem; line-height:22rem; }
.thought-card>a:hover h3,.thought-card>button:hover h3 { text-decoration:underline; text-decoration-thickness:1rem; text-underline-offset:5rem; }
.thought-breadcrumb { justify-content:center; }
.thought-intro { padding:24rem 100rem 0; display:flex; flex-direction:column; align-items:center; gap:24rem; }
.thought-meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10rem; text-align:center; color:#7f828b; font:400 18rem/24rem Belanosima,sans-serif; }
.thought-author { display:inline-flex; align-items:center; gap:10rem; color:var(--ink); }
.thought-author img { width:32rem; height:32rem; border-radius:50%; object-fit:cover; object-position:center 20%; }
.thought-author:hover { text-decoration:underline; text-underline-offset:3rem; }
.thought-intro h1 { width:1240rem; font-size:64rem; line-height:77rem; color:#1e1e1e; text-align:center; }
.thought-art { width:1240rem; height:512rem; border-radius:20rem; background:var(--ink); }
.thought-reading { padding:64rem 100rem; display:grid; grid-template-columns:320rem minmax(0,1fr); align-items:start; gap:32rem; }
.thought-toc { position:sticky; top:80px; align-self:start; max-height:calc(100dvh - 104px); overflow-y:auto; padding:28rem; border-radius:24rem; background:var(--grey-500); display:flex; flex-direction:column; gap:24rem; scrollbar-width:thin; }
.thought-toc h2 { font:600 18rem/24rem Belanosima,sans-serif; color:var(--ink); }
.thought-toc nav { display:flex; flex-direction:column; gap:16rem; }
.thought-toc a { position:relative; color:#54565d; font:400 18rem/22rem Belanosima,sans-serif; }
.thought-toc a:hover,.thought-toc a[aria-current="location"] { color:var(--ink); }
.thought-toc a[aria-current="location"] { padding-left:20rem; }
.thought-toc a[aria-current="location"]::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1rem; background:var(--ink); }
.thought-toc a.toc-subitem { margin-left:20rem; }
.thought-toc a:focus-visible { outline:2rem solid var(--blue); outline-offset:4rem; border-radius:2rem; }
.thought-socials { display:flex; gap:12rem; padding-top:16rem; border-top:1rem solid rgb(8 12 45 / 20%); }
.thought-socials button { width:48rem; height:48rem; display:grid; place-items:center; flex:none; border:0; border-radius:12rem; background:#606699; color:white; font-size:24rem; }
.thought-socials button:hover { background:var(--ink); }
.thought-prose { min-width:0; display:flex; flex-direction:column; gap:24rem; }
.thought-prose section { display:flex; flex-direction:column; gap:12rem; scroll-margin-top:80px; }
.thought-prose h2 { font-size:32rem; line-height:38rem; }
.thought-prose p { font-size:20rem; line-height:28rem; }
.thought-essential { background:var(--ink); color:white; border-radius:32rem; padding:24rem; display:flex; flex-direction:column; gap:8rem; }
.thought-essential p { color:var(--paper); }
.thought-related { display:flex; flex-direction:column; align-items:center; gap:64rem; padding:64rem 100rem 128rem; }
.thought-related>h2 { color:black; text-align:center; font-size:98rem; line-height:118rem; }
@media (max-width:760px) {
 .thought-collection { padding:48rem 24rem; }
 .thought-grid { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24rem 16rem; }
 .thought-cover { border-radius:20rem; }
 .thought-card h3 { font-size:24rem; line-height:29rem; overflow-wrap:anywhere; }
 .thought-card p { font-size:14rem; line-height:20rem; }
 .thought-intro { padding:24rem 24rem 0; gap:20rem; }
 .thought-meta { width:100%; font-size:16rem; line-height:22rem; }
 .thought-intro h1 { width:100%; font-size:clamp(28rem,6.5vw,48rem); line-height:1.2; }
 .thought-intro h1 br { display:none; }
 .thought-art { width:100%; height:clamp(220rem,55vw,400rem); }
 .thought-reading { padding:40rem 24rem; grid-template-columns:1fr; gap:32rem; }
 .thought-toc { position:static; padding:24rem; max-height:none; overflow:visible; }
 .thought-toc h2 { font-size:18rem; line-height:24rem; }
 .thought-toc h2 br { display:none; }
 .thought-toc a { font-size:16rem; line-height:24rem; }
 .thought-prose h2 { font-size:26rem; line-height:32rem; }
 .thought-prose p { font-size:18rem; line-height:26rem; }
 .thought-related { padding:24rem 24rem 64rem; gap:32rem; }
 .thought-related>h2 { font-size:42rem; line-height:50rem; }
}
@media (max-width:420px) {
 .thought-grid { grid-template-columns:1fr; }
}