.article {padding: 3rem 0;position: relative;z-index: 1;}
.article .post-thumbnail {width: calc(100% + 2rem); margin-left: -1rem}
.article .info { text-align: center; width: 100%; max-width: 900px; margin:  0 auto;}
.article h1 {font: normal 3.6rem var(--fontGraphikCondensed);max-width: 710px;margin: 0 auto 1rem;}
.article h2 {font-size: var(--fontSize-Medium);color: #666;font-size: 1.6rem;line-height: 1.4;}
.article figure {width: 100%;}
.article figure img {width: 100%;display: block;height: auto;box-shadow: 0 0 5px rgba(0,0,0,.05);margin: 0 0 4px;}
.article figure figcaption{font: 400 var(--fontSize-Small) "Graphik", sans-serif;margin: 0;}
.article .category { text-transform: uppercase; color: var(--primary); font-family: var(--fontGraphikCondensed); letter-spacing: 0.2rem; font-size: var(--fontSize-Medium); text-decoration: underline;}
.article .author_date { font-size: var(--fontSize-Small); margin: 1rem 0;}
.article .author_date div{ margin: 0 0 0.5rem;}
.article .author_date a{ text-decoration: underline; color: var(--primary);}

.article .body {display: grid;grid-template-columns: 50px 0.8fr 300px;grid-gap: 3rem;justify-content: space-between;padding: 1rem 0 0;border-top: 1px solid #d1d1d1;}
.article .pubs {padding: 0;position: sticky;top: 70px; }
.article .text { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; }
.article .text .pubs{grid-row: 4;position: initial; grid-column: 1;}
.article .text .pubs[data-accesor="box-extra"]{grid-row: 1;/* min-height: 250px; */}
.article .text .pubs[data-accesor="half-extra"]{grid-row: 5;min-height: 600px;}


.related {padding: 0.5rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin:1rem 0}
.related > strong {font-family: var(--fontGraphikCondensed); font-size:1.6rem; text-transform: uppercase; letter-spacing: 0.1rem; margin-bottom: 1rem; display:block;}
.related .card {color: var(--black);display: flex;border: none; text-decoration: none;}
.related .card figure{ width: 100px;  margin-right: 1rem;}
.related .card figure img{ height: 100%; object-fit:cover }
.related .card figcaption{ flex:1;}
.related .card figcaption strong { font-family:'Graphik'; font-size:1rem}
.related.top { grid-row: 2;}
.related.bottom {  border-bottom: none;}

/* .continue_reading { border-top:1px solid #ddd; padding: 2rem 0 0 ; margin-bottom: 2rem}
.continue_reading a{ display: block; padding: 0.5rem 0 0.5rem 30px;  position: relative;}
.continue_reading a::before{content: "";width: 15px;height: 15px;background: var(--primary);display: block;position: absolute;left: 4px;transform: rotate(45deg);top: 11px;} */

/* .newsletter_note{border-top:1px solid #ddd; padding: 2rem 0 0 ;}
.newsletter_note h4{ font-family: var(--fontGraphikCondensed); font-size:1.6rem; text-transform: uppercase; letter-spacing: 0.1rem}
.newsletter_note p {margin-bottom: 1rem} */

.tags{display: flex;align-items: center;margin: 0rem 0 2rem; flex-wrap: wrap;}
.tags strong{margin-right: 1rem;}
.tags a{font-size: var(--fontSize-Small);line-height: 25px;border: 1px solid var(--black);color: var(--black);padding: 0 1rem;margin: 0 0.5rem 5px;white-space: nowrap;display: none;}
.tags a:nth-child(-n + 4) {display: block;}


.article .newsletter {background: none;color: var(--black);text-align: left;padding: 2rem 0 0;border-top: 1px solid #ddd;}
.article .newsletter .inner{justify-content: flex-start;width: 100%;padding: 0;}
.article .newsletter h5{font-family: var(--fontGraphikCondensed);font-size:1.6rem;text-transform: uppercase;letter-spacing: 0.1rem;grid-column: 1/3;}
.article .newsletter p{font-family: var(--fontGraphik);font-size:.8rem;line-height:1.4;grid-column: 1/3;}
.article .newsletter form .wp-block-jetpack-contact-form{padding:0!important;text-align: left;display: grid;grid-template-columns: 1fr 100px;width: 100%;max-width: initial;}
.article .newsletter form .checkbox{color:var(--black);color:#888;justify-content: flex-start;}
.article .newsletter .grunion-field-checkbox-wrap{grid-column: 1/3;}
.article .newsletter .grunion-field-email-wrap,.article .newsletter .wp-block-jetpack-button {grid-row: 3;height: 50px;}
.article .newsletter .grunion-field-email-wrap input { width:100%;}
.article .newsletter .wp-block-button__link{  background: var(--black); color: var(--white); height:100%;}

.share{display: flex;width: 50px;flex-wrap: wrap;padding: 1px 0;align-items: flex-start; position: relative; z-index: 2;}
.share > div {position:sticky;top: 90px;}
.share a{width: 50px;height: 50px;margin: -1px 0 0;color: #555;border: 1px solid #444;display: grid;place-items: center;background: var(--white);position: relative; padding: 14px;}
.share a:after{display:block; content:''; position: absolute; inset:0}
.share a:hover{color: #000;}
.share_opts {width: 50px;height: 50px;border-radius: 4px;display: none;padding: 0;}
.share_opts span{ display: none;}
.share_icon { width:100%; height:100%; display:grid; place-items:center;}
.share_icon .nodes {position: relative;width: 25px;height: 25px;}
.share_icon .nodes i{width: 9px;height: 9px;background: #fff;position: absolute;border-radius:10rem;margin: 0;}
.share_icon .nodes i:nth-child(1){top: -2px;right:0;}
.share_icon .nodes i:nth-child(2){bottom: -1px;right:0;}
.share_icon .nodes i:nth-child(3){top: calc(50% - 4px);left:0;}
.share_icon .nodes i:nth-child(3)::after,
.share_icon .nodes i:nth-child(3)::before
{content: "";width: 18px;height: 2px;background: #fff;position: absolute;}
.share_icon .nodes i:nth-child(3)::after{transform: rotate(35deg);bottom: 0;}
.share_icon .nodes i:nth-child(3)::before{transform: rotate(-35deg);top: -1px;}




@media (max-width: 1130px) {
    .article .body { grid-template-columns: 40px 1fr 300px}
}

@media (max-width: 940px) {
    .article .body { grid-template-columns: 1fr 300px}
    .share {position:fixed;bottom: 2rem;}
    .share > div { display: none;}
    .share.active > div { display: block;}
    .share_opts{ display:block}
}
@media (max-width: 840px) {
    .article .body { grid-template-columns: 1fr}
    .share { right: 1.4rem;}

    .article h1 { font-size: 2.6rem;}
    .article h2 {font-size: 1.2rem;line-height: 1.4;}

    .article .text > *{grid-column: 1!important;}
    .article .text .pubs{grid-column: 1!important;}
    .article .text .pubs[data-accesor="box"] {grid-row: 3;}
    .article .text .pubs[data-accesor="box-extra"] {grid-row: 7;}
    .article .text .pubs[data-accesor="half-extra"]{grid-row: 10;}

    
}