/* Article editorial sidebar: inherit the existing palette and type. */
.article-layout{max-width:1120px;display:grid;grid-template-columns:minmax(0,760px) 300px;gap:60px;align-items:start}
.article-reading{min-width:0}
.article-reading>.gh-content{width:100%;max-width:none}
.article-reading .gh-content>:last-child{margin-bottom:0}
.article-sidebar{min-width:0;align-self:stretch;font-family:var(--sans)}
.article-sidebar__inner{position:sticky;top:32px}
.article-square-ad{width:300px;max-width:100%;margin:0 auto;text-align:center;font-family:var(--sans)}
.article-square-ad__slot{width:300px;max-width:100%;aspect-ratio:1;overflow:hidden;border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;background:color-mix(in srgb,var(--card) 50%,transparent)}
.article-square-ad__slot:empty::before{content:"300 × 300";height:100%;display:grid;place-items:center;color:var(--muted);font-size:12px;letter-spacing:.04em}
.article-square-ad__slot img,.article-square-ad__slot iframe{display:block;width:100%;max-width:100%;height:auto;border:0;border-radius:0}
@media(min-width:1100px){
 .article-reading .gh-content :is(.kg-width-wide,.kg-width-full,.is-youtube-embed,.kg-embed-card:has(iframe[src*="youtube"]),.kg-embed-card:has(iframe[src*="youtu.be"])){position:static;left:auto;width:100%;max-width:100%;margin-inline:0;transform:none}
}
@media(max-width:1099px){
 .article-layout{display:block;max-width:760px}
 .article-sidebar{margin-top:0}
 .article-sidebar__inner{position:static}
 .article-square-ad{margin-bottom:36px}
 .article-reading .article-footer>.article-square-ad{margin:32px auto 0}
}
@media(max-width:360px){.article-square-ad__slot{width:100%}}

.article-reading .gh-content :is(h2,h3){font-family:var(--gh-font-heading,var(--sans))}

/* The masthead and cover share the reading column; the ad starts at the metadata. */
.post-template .article-layout{padding-top:clamp(28px,4vw,58px)}
.post-template .article-reading .article-hero{padding:0}
.post-template .article-reading .article-header{width:100%;max-width:none;margin:0}
.post-template .article-reading .article-meta{margin-bottom:22px;gap:12px}
.post-template .article-reading .article-header h1{max-width:100%;font-size:clamp(42px,4.4vw,64px);line-height:1.08;font-weight:600;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:break-word}
.post-template .article-reading .article-deck{max-width:100%;margin-top:24px;font-size:18px;line-height:1.5}
.post-template .article-reading .article-image{width:100%;max-width:none;margin:32px 0 38px}

.post-template .article-reading .article-image img{width:100%;height:auto;max-height:none;object-fit:contain}
.post-template .article-reading .article-top-ad{width:100%;margin-top:36px;margin-bottom:30px}
@media(max-width:640px){
 .post-template .article-layout{padding-top:18px}
 .post-template .article-reading .article-header h1{font-size:clamp(36px,10vw,48px);letter-spacing:-.03em;text-wrap:pretty}
 .post-template .article-reading .article-meta{margin-bottom:20px}
 .post-template .article-reading .article-deck{margin-top:20px;font-size:16px}
 .post-template .article-reading .article-image{margin-top:26px;margin-bottom:30px}
 
}

/* Keep the sticky boundary below the author, footer ad and loaded comments. */
.post-template .article-reading > .article-footer{width:100%;max-width:none;margin-inline:0}

/* Supplied Surfshark skyscraper: preserve its native dimensions and artwork. */
.article-square-ad--skyscraper{width:160px}
.article-square-ad--skyscraper .article-square-ad__slot{width:160px;aspect-ratio:4 / 15;background:transparent;box-shadow:none;border-radius:0}
.article-square-ad--skyscraper .article-square-ad__slot a{display:block;overflow:hidden}
.article-square-ad--skyscraper .article-square-ad__slot img{width:160px;height:600px;max-width:100%;object-fit:contain}
.article-square-ad--skyscraper .article-square-ad__slot a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

.article-square-ad__slot a{border-radius:12px}
@media(max-width:640px){.article-square-ad__slot a{border-radius:8px}}
.post-template .article-reading .article-ad{width:100%;margin-top:36px}
.post-template .article-reading .article-header{padding-top:0}