.post .global-header {
	position: relative;
}

.article {
  --container: 1040px;
  --container: calc(var(--container-width) + var(--gutter) * 2);		
	--content-width: 600px;
	--sidebar-width: 250px;
	--heading-margin-bottom: 12px;
	--copy-margin-bottom: clamp(18px, 2vw, 20px);
	--copy-link-color: rgb(0 0 238);
  font-feature-settings: "ss01", "ss02", "ss03";
	
	& img, video {
		display: block;
	}
}

.article-layout {
	display: grid;
	grid-template-areas:
		". breadcrumb ."
		". sidebar-right ."
		". header ."
		". body ."
		". sidebar-left ."
		". author ."
		". footer .";
	grid-template-columns: var(--gutter) 1fr var(--gutter);
	max-width: var(--vertical-line-max-width);
	margin: 0 auto;
	
	@media (min-width: 960px) {
    grid-template-columns: minmax(min-content, var(--sidebar-width)) var(--gutter) minmax(var(--content-width), 760px) var(--gutter) minmax(min-content, 132px);
	  grid-template-areas:
		". breadcrumb breadcrumb breadcrumb ."
		"sidebar-left header header header ."
		"sidebar-left . body . sidebar-right"
		". . author . ."
		". . footer . .";		
	}
}



.sidebar-left {
	grid-area: sidebar-left;
	
	@media (min-width: 960px) {
		margin: 0 var(--content-gap) 0 var(--gutter);
	}	
}

.sidebar-right {
	grid-area: sidebar-right;
}

.article-author-bio {
	grid-area: author;
}

.article-footer {
	grid-area: footer;
}



.article-header {
	grid-area: header;
	padding: clamp(32px, 6.4vw, 64px) 0 clamp(32px, 4vw, 40px);
}

.article-tag {
	color: var(--color-light);
	font-size 12px;
}

.article-intro {
	max-width: var(--content-width);
	margin: 0 auto;
	width: 100%;
}

.article-title {
	--min: 24px;
	--fluid: 4.2vw;
	--max: 42px;
	--height: 4px;
	--font-size: clamp(var(--min), var(--fluid), var(--max));
	--line-height: clamp(calc(var(--min) + var(--height)), calc(var(--fluid) + var(--height)), calc(var(--max) + var(--height)));
	color: var(--headline-color);
	font-size: var(--font-size);	
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height);
  text-wrap: balance;	
	margin: 0 0 clamp(24px, 3.2vw, 32px);
}

.article-cover {
	border-radius: 4px;
	max-width: var(--content-width);
	margin: 0 auto;
	overflow: hidden;
}


.article-body {
	grid-area: body;
	
	& h2, h3, h4, p, blockquote, ol, ul {
		max-width: var(--content-width);
	}
	
	& h2, h3 {
		font-size: var(--font-size);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height);		
	}
	
	& h2 {
		--min: 20px;
	  --fluid: 2.4vw;
	  --max: 24px;
	  --height: 6px;
	  --font-size: clamp(var(--min), var(--fluid), var(--max));
	  --line-height: clamp(calc(var(--min) + var(--height)), calc(var(--fluid) + var(--height)), calc(var(--max) + var(--height)));
	  margin: 56px auto var(--heading-margin-bottom);	
	}

	& h3 {
		--min: 18px;
	  --fluid: 2vw;
	  --max: 20px;
	  --height: 6px;
	  --font-size: clamp(var(--min), var(--fluid), var(--max));
	  --line-height: clamp(calc(var(--min) + var(--height)), calc(var(--fluid) + var(--height)), calc(var(--max) + var(--height)));
	  margin: 36px auto var(--heading-margin-bottom);	
	}
	
	& p, ol, ul {
		--min: 16px;
	  --fluid: 1.9vw;
	  --max: 19px;
	  --height: 10px;
	  --font-size: clamp(var(--min), var(--fluid), var(--max));
	  --line-height: clamp(calc(var(--min) + var(--height)), calc(var(--fluid) + var(--height)), calc(var(--max) + var(--height)));
		font-size: var(--font-size);
	  line-height: var(--line-height);
	  text-wrap: pretty;
		font-family: Sitka Text, Georgia, serif;
		font-size: var(--font-size);
		line-height: var(--line-height);
	}
	
	& p:not(:last-child), p:has(.hs-cta-wrapper) {
    margin: 0 auto var(--copy-margin-bottom);		
	}
	
	& .hs-cta-img  {
		height: auto;
	}
	
	& figure, img, video {
	  margin: 40px auto;	
	}
	
	& figure {
	  position: relative;	
	}
	
	& figcaption {
		color: var(--color-slate-gray);
		font-size: 14px;
		margin: -32px 0 0;
		text-align: center;
	}
	
	& ol, ul {
		margin: -16px auto var(--copy-margin-bottom);
	}
	
	& ol {
    counter-reset: li;		
	}
	
	& ol li {
    counter-increment: li;		
	}
	
	& ol li {
    padding: 0 0 8px 32px;
    position: relative;
		
		&:before {
			content: counter(li, decimal) ".";
	    font-weight: bold;
	    position: absolute;
	    top: 0;
	    left: 10px;					
		}
	}
	
	& ul li {
	  padding: 0 0 8px 24px;
    position: relative;
		
		&:before {
    content: "●";
    color: inherit;
	  font-size: 16px;
    display: block;
    position: absolute;
	  top: -1px;
    left: 6px;			
		}
  }
	
	& a {
		color: var(--copy-link-color);
		text-decoration: underline;
		text-decoration-color: currentColor;
		transition: var(--underline-transition);
		
		&:hover {
			text-decoration-color: transparent;
		}
	}
	
}