.card{background-color:var(--paper);border-radius:4px;box-shadow:0 0 0 1.5px rgba(51,36,15,.2),0 22px 40px -26px rgba(50,30,5,.55);position:relative;padding:22px 32px 48px}
.post{position:relative;background:var(--paper);border-radius:4px;box-shadow:0 0 0 1.5px rgba(51,36,15,.2),0 22px 40px -26px rgba(50,30,5,.55);padding:34px 20px 52px;display:flex;flex-direction:column;gap:18px}
.post::before{content:"";position:absolute;left:0;right:0;top:0;height:0}
.post::after{content:"";position:absolute;left:50%;bottom:16px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--card-hairline);box-shadow:inset 0 2px 3px rgba(0,0,0,.2)}
.post__tab{left:20px;max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post__tab--moss{background:var(--moss)}
.post__tab--ink{background:var(--ink)}
.post__body{display:flex;flex-direction:column;gap:8px}
.post__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:'Courier Prime',monospace;font-weight:700;font-size:14px;color:var(--ink-soft)}
.post__cat{text-transform:uppercase;letter-spacing:.04em;color:var(--moss)}
.post__title{font-size:23px;line-height:1.18}
.post__title a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--mustard),var(--mustard));background-size:0 3px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s cubic-bezier(.22,1,.36,1)}
.post__title a:hover{color:var(--ink);background-size:100% 3px}
.post__title a::after{content:"";position:absolute;inset:0;z-index:1}
.post__ex{font-size:17px;line-height:34px;color:var(--ink-soft);background-image:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(51,36,15,.13) 33px 34px)}
.post:focus-within{outline:3px solid var(--moss);outline-offset:3px}
.post__cover{border-radius:4px}
.top h1{font-size:clamp(2.8rem,6vw,5rem);line-height:1;margin-top:36px}
.top__lede{margin-top:20px;max-width:30em;font-size:21px;line-height:1.5;color:var(--ink)}
.top__row{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:end}
.top__art{width:100%;height:auto;display:block}
.top__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sec-sm{padding:64px 0 96px}
@media (max-width:960px){.top__row{grid-template-columns:minmax(0,1fr)}.top__art{display:none}}
@media (max-width:640px){.top{padding-bottom:48px}.top h1{font-size:2.7rem;margin-top:24px}.top__lede{font-size:19px}.sec-sm{padding:48px 0 72px}}
.top--post{padding-bottom:64px}
.top--post h1{font-size:clamp(2.3rem,5vw,4.2rem);line-height:1.2;max-width:17em}
.back{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-weight:800;font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.back:hover{color:var(--moss)}
.pmeta{line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:26px;font-family:'Courier Prime',monospace;font-weight:700;font-size:15px;color:var(--ink)}
.pmeta .stamp{line-height:1.3;font-size:14px;padding:4px 10px}
.post-read{max-width:68ch;margin:0 auto;padding:72px 0 40px}
.post-read__cover{margin:0 0 2.4em}
.art-body{font-size:20px;line-height:1.75;color:var(--ink)}
.art-body p{margin:0 0 1.15em}
.art-body h2{font-size:clamp(1.8rem,3vw,2.3rem);line-height:1.2;margin:2.2em 0 .6em;scroll-margin-top:24px}
.art-body h3{font-size:1.5rem;line-height:1.25;margin:1.8em 0 .5em}
.art-body a{color:var(--moss);text-decoration-thickness:2px;text-underline-offset:3px}
.art-body a:hover{color:var(--ink)}
.art-body ul,.art-body ol{margin:0 0 1.3em;padding:0;list-style:none}
.art-body li{position:relative;padding:4px 0 4px 38px;margin:0}
.art-body ul li::before{content:"";position:absolute;left:4px;top:.72em;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--moss) 0 38%,var(--mustard) 40%)}
.art-body ol{counter-reset:n}
.art-body ol li{counter-increment:n}
.art-body ol li::before{content:counter(n);position:absolute;left:0;top:.35em;width:28px;height:28px;border-radius:50%;background:var(--moss);color:var(--paper);font-family:'Courier Prime',monospace;font-weight:700;font-size:15px;line-height:28px;text-align:center}
.endtags{display:flex;flex-wrap:wrap;gap:10px;margin-top:2.4em;padding-top:1.4em;border-top:2px solid var(--mustard)}
.chip{line-height:1.3;display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:4px;background:var(--leaf);color:var(--ink);font-family:'Courier Prime',monospace;font-weight:700;font-size:14px;box-shadow:0 0 0 1.5px rgba(63,74,28,.3) inset}
.byline{margin-bottom:96px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:center;max-width:68ch;margin:0 auto;padding:28px 28px 28px 24px;background:var(--paper);border-radius:4px;box-shadow:0 0 0 1.5px rgba(51,36,15,.2),0 22px 40px -26px rgba(50,30,5,.55)}
.byline__av{width:72px;height:72px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 1.5px rgba(63,74,28,.3);display:flex;align-items:center;justify-content:center}
.byline__name{font-family:'Clarity City',sans-serif;font-weight:800;font-size:22px;line-height:1.3;letter-spacing:-.01em}
.byline p{color:var(--ink-soft);font-size:17px;line-height:1.5}
@media (max-width:640px){.post-read{padding:48px 0 24px}.art-body{font-size:18px}.byline{grid-template-columns:minmax(0,1fr);padding:24px}.top--post{padding-bottom:44px}}
.feature{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:56px;background:var(--paper);border-radius:4px;box-shadow:0 0 0 1.5px rgba(51,36,15,.2),0 26px 44px -28px rgba(50,30,5,.55);padding:40px 40px 56px}
.feature::after{content:"";position:absolute;left:50%;bottom:16px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--card-hairline);box-shadow:inset 0 2px 3px rgba(0,0,0,.2)}
.feature .stamp{position:absolute;left:-14px;top:-18px;z-index:3}
.feature h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;margin-top:10px}
.feature h2 a{color:var(--ink);text-decoration:none}
.feature h2 a:hover{text-decoration:underline;text-decoration-color:var(--mustard);text-decoration-thickness:4px;text-underline-offset:5px}
.feature .post__meta{font-size:15px}
.feature__ex{margin-top:16px;font-size:20px;color:var(--ink-soft)}
.feature .btn{margin-top:26px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px;margin-top:64px;align-items:start}
.grid .post:nth-child(3n+2){margin-top:28px}
.grid .post:nth-child(3n){margin-top:56px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:72px}
.pager__count{font-family:'Courier Prime',monospace;font-weight:700;font-size:15px;color:var(--ink-soft)}
@media (max-width:960px){.feature{grid-template-columns:minmax(0,1fr);gap:28px;padding:32px 24px 56px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid .post:nth-child(n){margin-top:0}}
@media (max-width:640px){.grid{grid-template-columns:minmax(0,1fr);gap:36px}.feature .stamp{left:-6px}.tabs label{font-size:13px;padding:0 12px}}
@media (prefers-reduced-motion:reduce){.post__title a{transition:none}}

.post__cover{margin:0}
.empty{max-width:560px;margin:0 auto}
.pager .btn{white-space:nowrap}
.art-body h4{font-size:1.2rem;line-height:1.3;margin:1.6em 0 .4em}
.art-body strong{font-weight:800}
.art-body li>p{margin:0}
.art-body ul ul,.art-body ol ul,.art-body ul ol,.art-body ol ol{margin:.3em 0 0}
.art-body blockquote{position:relative;margin:2.2em 0;padding:26px 30px;background:var(--leaf);border-radius:4px;box-shadow:0 0 0 1.5px rgba(63,74,28,.3),0 18px 30px -26px rgba(40,25,5,.55);font-family:'Clarity City','Karla',sans-serif;font-weight:800;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;letter-spacing:-.01em}
.art-body blockquote p{margin:0}
.art-body blockquote p+p{margin-top:.8em}
.art-body code{font-family:'Courier Prime',monospace;font-weight:700;font-size:.88em;background:var(--leaf);padding:2px 6px;border-radius:4px}
.art-body pre{margin:1.8em 0;padding:20px 22px;background:var(--paper);border-radius:4px;box-shadow:0 0 0 1.5px rgba(51,36,15,.2);overflow-x:auto;font-size:16px;line-height:1.6}
.art-body pre code{background:none;padding:0;font-size:inherit}
.art-body hr{border:0;border-top:2px solid var(--mustard);margin:2.4em 0}
.art-body img{display:block;max-width:100%;height:auto;margin:1.8em auto;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 24px 40px -28px rgba(50,30,5,.7)}
.art-body img.article-img--full{width:100%}
.art-body img.article-img--medium{width:75%}
.art-body img.article-img--small{width:50%}
.art-body figure{margin:2em 0}
.art-body figure img{margin:0 auto}
.art-body figcaption{margin-top:12px;font-style:italic;font-size:16px;line-height:1.5;color:var(--ink-soft);text-align:center}
.art-body figure.embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;box-shadow:0 24px 40px -28px rgba(50,30,5,.7)}
.art-body figure.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-body iframe{max-width:100%;border:0}
.art-body h2,.art-body h3{text-wrap:balance}
.art-body>:first-child{margin-top:0}
@media (max-width:640px){.art-body img.article-img--medium,.art-body img.article-img--small{width:100%}}
.pmeta .stamp{position:static;left:auto;top:auto}
/* Reserve cover space (no layout shift): dimensions aren't stored, so crop to one ratio, as the guides hub does. */
.post__cover img,.post-read__cover img{aspect-ratio:3/2;object-fit:cover}