/* Curated from the archived live blog bundle (ghost-blog-0ebfbb9f142-6ca2bfa43741a.webflow.shared.a3740f0f3.css) by scripts/extract-blog-css.py.
Loaded only on /blog* routes. Do not hand-edit — re-run the script. */
/* The live blog pages set this in a page embed; scoped here by the stylesheet
only loading on blog routes (rem values below assume it). */
html {
font-size: 15px;
}
/* Fold-in shims. Live renders these elements as body children with a
`color: var(--ghost-black)` body; the rebuild nests them in the main-site
shell (white-on-dark .main). The padding stops .blog-wrapper's 32rem
margin collapsing through .main, which would drag the absolutely
positioned .blog-hero down with it. */
.main {
padding-top: 0.05px;
}
.blog-wrapper {
color: var(--ghost-black);
}
/* Fold-in scoped element bases. Live styles these on /bare elements
(body 16px/20 ghost-black, a #333 underlined); the fold-in scopes them to
the blog containers so the main-site nav/footer on the same page are
untouched. :where() keeps the bare-element specificity (0,0,1) so class
rules beat them exactly as they do on live. */
:where(.blog-home-main, .blog-wrapper, .more-stories-wrapper) {
color: var(--ghost-black);
font-size: 16px;
line-height: 20px;
}
:where(.blog-home-main, .blog-wrapper, .more-stories-wrapper) a {
color: #333;
text-decoration: underline;
}
:where(.blog-home-main, .blog-wrapper, .more-stories-wrapper) a:hover {
color: var(--ghost-lime-green);
}
/* ghost.css's own .blog-title (main-site page, 100px centred) outlives the
type-scale tie-break on text-align — live has no alignment rule, so the
initial left must be restored explicitly. */
.h-3xl.blog-title {
text-align: left;
}
/* ghost.css's own .blog-hero (another main-site class of the same name)
paints the ghost-mural background; the blog hero is its ![]()
, and the
listing pages' bottom-fade mask lets any backdrop show through. */
.blog-hero {
background-image: none;
}
/* ghost.css's own .blog-categories (main-site class of the same name) is a
centred display:flex, max-width:292px container. Folded in, it makes the
categories a content-width flex item, so justify-content:space-between
has no room and the tabs bunch on mobile. Live is a plain full-width block;
restore that. The @media(max-width:767px) rule below (blog.css, later) keeps
its margin-left:-2.133rem; margin-right stays 0 to match live. */
.blog-categories {
display: block;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* ghost.css's responsive .section padding (24px at 991, 32/100px at 767)
narrows the blog card grid; live blog sections compute to zero padding
at every width except a 70px phone-width bottom. */
.section {
padding: 0;
}
@media screen and (max-width: 479px) {
.section {
padding-bottom: 70px;
}
}
/* ghost.css's shared .copyright-year (the main-site footer's script-embed
wrapper) sets display:none — the main-site footer reveals the year via a
separate .footer-year node set by ui.ts. The blog footer writes the year
straight into .copyright-year via its own inline script, so it must stay
visible here. */
.copyright-year {
display: block;
}
:root {
--ghost-black: #000321;
--ghost-lime-green: #1de385;
--ghost-white: white;
--ghost-lilac: #9a80ec;
--ghost-turquoise: #4dccd3;
--beige: #f5f1ee;
--ghost-deep-purple: #262261;
}
.section.featured-articles {
min-height: 24.2667rem;
margin-bottom: 12.933rem;
}
.blog-item-media {
object-fit: cover;
width: 100%;
height: 273px;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 4px 4px #00000040;
}
.blog-item-media.more-stories {
height: 208px;
box-shadow: none;
}
.blog-item-media.cover {
z-index: -2;
height: 100%;
}
.blog-item-title {
text-align: left;
margin-top: 17.667rem;
margin-bottom: .8rem;
font-size: 2.4rem;
font-weight: 800;
line-height: 2.64rem;
}
.blog-item-title.more-stories {
margin-top: 15.467rem;
}
.blog-item-title.cover {
text-shadow: 0 1px 3px #0003;
margin-top: 13.333rem;
}
.blog-item-title.large {
margin-top: 0;
font-size: 4.2rem;
line-height: 4.62rem;
}
.blog-item-summary {
margin-bottom: 1.067rem;
font-size: .8rem;
font-weight: 400;
line-height: .88rem;
}
.blog-hero {
z-index: 2;
width: 100%;
height: 720px;
position: absolute;
top: 0;
}
.blog-home-main {
z-index: 2;
padding-top: 11.867rem;
padding-left: 8.8rem;
padding-right: 8.8rem;
position: relative;
}
.featured-article-wrapper {
flex-direction: column;
}
.featured-article-link {
color: var(--ghost-white);
padding: 3.2rem 4.267rem;
text-decoration: none;
}
.featured-article-link:hover {
color: var(--ghost-turquoise);
}
.featured-article-link:active {
color: var(--ghost-white);
}
.featured-article-item {
width: 38.4rem;
color: var(--ghost-white);
}
.blog-posts-item {
color: var(--ghost-white);
flex: 0 auto;
margin-bottom: 2.133rem;
position: relative;
}
.blog-posts-item:hover {
box-shadow: 0 0 40px 4px #00000040;
}
.blog-posts-item.more-stories {
background-color: var(--ghost-white);
color: var(--ghost-black);
}
.blog-posts-list {
column-count: 3;
}
.blog-posts-list.more-stories {
column-count: 0;
}
.blog-item-author {
flex-direction: row;
justify-content: flex-start;
align-items: center;
display: flex;
}
.item-author-info {
flex-direction: column;
font-size: 14px;
line-height: 21px;
display: flex;
}
.item-author-img {
width: 3.2rem;
height: 3.2rem;
}
.blog-item-info {
border-top: 1px solid #fff3;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 1.067rem;
padding-top: 1.067rem;
font-size: 12px;
line-height: 18px;
display: flex;
}
.blog-item-info.on-article {
grid-column-gap: 4rem;
border-top-style: none;
justify-content: flex-end;
margin-top: 0;
padding-top: 0;
}
.blog-item-info.white-background {
border-top-color: #00032133;
}
.blog-header {
z-index: 9;
border-bottom: 0px none var(--ghost-lime-green);
background-color: var(--ghost-black);
width: 100%;
height: auto;
padding: 24px;
position: fixed;
top: 0;
box-shadow: 0 0 4px 4px #0000001a;
}
.blog-header.expanded {
height: auto;
box-shadow: none;
background-color: #0000;
background-image: linear-gradient(#000321, #0002149c 0%, #0000);
border-bottom-style: none;
border-bottom-width: 0;
justify-content: space-between;
align-items: center;
padding: 48px 8.8rem;
overflow: visible;
}
.blog-nav-container {
justify-content: space-between;
align-items: center;
max-width: 100%;
height: 100%;
display: flex;
}
.blog-categories {
border-bottom: 1px solid #fff3;
margin-bottom: 72px;
}
.blog-category-link {
color: var(--ghost-white);
border-bottom: 4px solid #0000;
padding-bottom: .6rem;
font-size: 20px;
font-weight: 400;
line-height: 27px;
text-decoration: none;
display: inline-block;
}
.blog-category-link:hover {
border-bottom-color: var(--ghost-turquoise);
color: var(--ghost-turquoise);
}
.blog-category-link:active {
color: var(--ghost-white);
}
.blog-category-link.w--current {
border-bottom: 3px solid var(--ghost-lime-green);
font-weight: 700;
}
.blog-category-link.h-m {
font-size: 1.333rem;
font-weight: 800;
line-height: 1.467rem;
}
.blog-category-link.h-m.w--current {
border-bottom-width: 4px;
border-bottom-color: var(--ghost-turquoise);
}
.blog-category-link.h-m.current {
border-bottom-color: var(--ghost-turquoise);
}
.blog-article {
background-color: var(--ghost-white);
text-align: center;
border-radius: 50px;
width: 100%;
max-width: 1440px;
margin: 0 auto 96px;
padding-top: 3rem;
padding-bottom: 48px;
font-weight: 700;
}
.blog-article-hero {
margin-bottom: 48px;
}
.blog-article-content {
text-align: left;
width: 100%;
max-width: 776px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
font-weight: 300;
line-height: 30px;
}
.blog-article-info {
flex-direction: column;
justify-content: center;
width: 100%;
margin-bottom: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
}
.blog-date-author {
justify-content: center;
margin-bottom: 1.5rem;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
}
.blog-article-breadcrumbs {
width: 100%;
max-width: 1176px;
margin-bottom: 48px;
padding-top: 48px;
display: flex;
}
.blog-article-conclusion {
background-color: #e9e9ec;
margin-bottom: 48px;
padding: 28px;
}
.blog-article-author {
border-top: 1px solid var(--ghost-lime-green);
border-bottom: 1px solid var(--ghost-lime-green);
flex-direction: row;
align-items: center;
padding-top: 2rem;
padding-bottom: 2rem;
display: flex;
}
.blog-article-title {
margin-top: 0;
margin-bottom: 1.5rem;
}
.blog-footer {
z-index: 2;
color: var(--ghost-white);
flex-direction: column;
align-items: center;
padding-top: 80px;
padding-bottom: 80px;
display: flex;
position: relative;
}
.blog-footer-slogan {
margin-bottom: 32px;
font-size: 20px;
font-weight: 300;
line-height: 37px;
}
.blog-footer-link-main-site {
text-decoration: none;
}
.blog-post {
background-color: var(--beige);
margin-top: 96px;
}
.blog-card-img-overlay {
opacity: 0;
background-color: #1de38599;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: absolute;
inset: 0% auto auto 0%;
}
.blog-hero-img {
object-fit: cover;
width: 100%;
height: 100%;
}
.blog-hero-gradient {
background-image: linear-gradient(to bottom, #0000, var(--ghost-black));
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
}
.blog-wrapper {
z-index: 2;
background-color: var(--ghost-white);
margin-top: 32rem;
margin-left: 4.267rem;
margin-right: 4.267rem;
padding-top: 8.533rem;
padding-left: 8.8rem;
padding-right: 8.8rem;
position: relative;
}
.blog-header-info {
border-bottom: 1px solid #00032133;
justify-content: space-between;
align-items: center;
padding-bottom: .882rem;
display: flex;
}
.blog-header-info.on-article {
margin-bottom: 3.2rem;
}
.blog-content.grid {
grid-template-rows: auto auto;
grid-template-columns: 35% 60%;
grid-auto-columns: 1fr;
justify-content: space-between;
display: grid;
}
.blog-content.quote {
color: var(--ghost-turquoise);
margin-top: 7.467rem;
margin-bottom: 6.4rem;
position: relative;
}
.blog-section {
margin-bottom: 8.533rem;
}
.blog-author {
display: flex;
}
.author-img-wrapper {
border-radius: 50%;
width: 3.2rem;
height: 3.2rem;
}
.author-img {
object-fit: cover;
width: 100%;
height: 100%;
}
.blog-info {
grid-column-gap: 5.067rem;
justify-content: flex-end;
align-items: center;
display: flex;
}
.h-3xl {
margin-top: 0;
margin-bottom: 0;
font-size: 63px;
font-weight: 800;
line-height: 69.3px;
}
.h-3xl.blog-title {
color: var(--ghost-turquoise);
margin-bottom: 3.2rem;
font-size: 4.2rem;
line-height: 4.62rem;
}
.p-xs {
margin-bottom: 0;
font-size: .8rem;
line-height: .88rem;
}
.p-xs.mb-16 {
margin-bottom: 1.067rem;
}
.blog-intro {
margin-bottom: 9.6rem;
}
.p-2xl {
font-size: 3.133rem;
line-height: 3.447rem;
}
.blog-conclusion {
background-color: var(--ghost-turquoise);
padding: 3.2rem;
}
.item-author-name {
margin-bottom: 2px;
font-size: 1rem;
font-weight: 800;
line-height: 1.1rem;
}
.item-author-role {
opacity: .5;
font-size: .8rem;
line-height: .88rem;
}
.item-info-read-time, .item-info-date {
align-items: center;
display: flex;
}
.info-date-year {
margin-left: 3px;
}
.info-read-text {
text-transform: uppercase;
margin-left: 3px;
}
.blog-posts-wrapper.hide {
display: none;
}
.h-xl {
font-size: 2.4rem;
font-weight: 800;
line-height: 2.64rem;
}
.h-xl.mb-12 {
margin-bottom: .8rem;
}
.item-info-cat {
align-items: center;
display: flex;
}
.item-info-cat.on-article {
color: var(--ghost-lilac);
}
.link-svg {
margin-right: 3px;
display: flex;
}
.p-s {
margin-bottom: 0;
font-size: 1rem;
line-height: 1.5rem;
}
.p-s.mb-16 {
margin-bottom: 1.067rem;
}
.sh-xs {
font-size: .8rem;
font-weight: 600;
line-height: .88rem;
}
.blog-categories-list {
justify-content: space-between;
width: 22rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding-left: 0;
display: flex;
}
.blog-post-link {
color: var(--ghost-white);
padding: 2.133rem 2.133rem 1.6rem;
text-decoration: none;
}
.blog-post-link:hover {
color: var(--ghost-turquoise);
}
.blog-post-link:active {
color: var(--ghost-white);
}
.blog-post-link.more-stories {
color: var(--ghost-black);
padding-top: 0;
}
.p-l {
font-size: 1.8rem;
line-height: 2.25rem;
}
.h-2xl {
margin-top: 0;
margin-bottom: 0;
font-size: 3.133rem;
font-weight: 800;
line-height: 3.447rem;
}
.blog-quote {
position: absolute;
top: -5px;
left: -20px;
}
.blog-share {
border-top: 1px solid #00032133;
justify-content: center;
align-items: center;
margin-top: 4.333rem;
padding-top: 4.333rem;
padding-bottom: 4.333rem;
display: flex;
}
.sh-s {
font-size: 1rem;
font-weight: 600;
line-height: 1.1rem;
}
.sh-s.cap {
text-transform: uppercase;
}
.share-buttons {
grid-column-gap: 1.333rem;
justify-content: flex-start;
align-items: center;
margin-left: 3.733rem;
display: flex;
}
.share-link {
cursor: pointer;
border-bottom-style: none;
width: 2.75rem;
height: 2.75rem;
position: relative;
}
.share-link.copy {
grid-column-gap: .5rem;
width: auto;
color: var(--ghost-black);
background-color: #0003211a;
border-radius: 99px;
align-items: center;
padding-left: 1.067rem;
padding-right: 1.067rem;
text-decoration: none;
display: flex;
}
.share-link.copy:hover {
background-color: #00032133;
}
.share-link.copy:active {
background-color: #0003211a;
}
.social-share-code {
width: 100%;
height: 100%;
position: absolute;
inset: 0%;
}
.more-stories-wrapper {
z-index: 2;
padding: 9.6rem 8.8rem;
position: relative;
}
.more-stories-heading {
color: #ffffff80;
text-align: center;
margin-top: 0;
margin-bottom: 3.2rem;
font-size: 1.6rem;
line-height: 2rem;
}
.blog-item-gradient {
z-index: -1;
background-image: linear-gradient(#0000, #000000b3 88%, #000);
position: absolute;
inset: 0%;
}
.blog-img-gallery {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto;
grid-template-columns: 62.5% auto;
grid-auto-columns: 1fr;
margin-left: -8.8rem;
margin-right: -8.8rem;
display: grid;
overflow: hidden;
}
.blog-img-gallery.one-img, .blog-img-gallery.source {
display: block;
}
.single-img-sizer {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
width: 100%;
padding-bottom: 54.878%;
position: relative;
overflow: hidden;
}
.single-img-sizer.two, .single-img-sizer.three {
grid-template-columns: 62.5% 36.28%;
padding-bottom: 0%;
}
.gallery-single-img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
}
.gallery-multi-img, .gallery-multi-img.left, .gallery-multi-img.fit {
object-fit: cover;
}
.blog-img-gallery-copy {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto;
grid-template-columns: 62.5% auto;
grid-auto-columns: 1fr;
margin-left: -8.8rem;
margin-right: -8.8rem;
display: grid;
overflow: hidden;
}
.blog-img-gallery-copy.one-img, .blog-img-gallery-copy.source {
display: block;
}
.gallery-caption {
margin-top: 1.067rem;
font-size: 1rem;
font-style: italic;
line-height: 1.1rem;
}
.video-play-btn {
position: absolute;
top: 136.5px;
left: 50%;
transform: translate(-50%, -50%);
}
.blog-video-wrapper {
position: relative;
}
.blog-posts-empty {
color: var(--ghost-white);
text-align: center;
background-color: #0000;
}
.author-img-frame {
background-color: #d9d9d97a;
border-radius: 50%;
width: 3.2rem;
min-width: 3.2rem;
height: 3.2rem;
min-height: 3.2rem;
margin-right: 1.067rem;
overflow: hidden;
}
.home-link {
margin-bottom: 2rem;
font-size: 14px;
text-decoration: none;
display: block;
}
.home-link:hover {
color: var(--ghost-black);
text-decoration: underline;
}
.div-block-22.p-xs {
opacity: .75;
}
.copyright-year {
margin-left: .25rem;
}
.blog-footer-link, .blog-footer-link:hover {
color: #fff;
}
@media screen and (min-width: 1440px) {
.blog-posts-item {
flex: none;
}
}
@media screen and (max-width: 991px) {
.section.featured-articles {
margin-bottom: 4rem;
}
.blog-home-main {
padding-top: 20rem;
padding-left: 2.133rem;
padding-right: 2.133rem;
}
.featured-article-item {
width: auto;
}
.blog-posts-item {
margin-bottom: 32px;
}
.blog-posts-list.more-stories {
flex-direction: column;
display: flex;
}
.blog-item-info.on-article {
grid-column-gap: 1rem;
}
.blog-header.expanded {
padding: 28px 2.133rem;
}
.blog-categories {
margin-bottom: 32px;
}
.blog-category-link {
font-size: 16px;
}
.blog-article {
border-radius: 25px;
margin-bottom: 65px;
}
.blog-article-content {
max-width: 100%;
padding-left: 1.5625rem;
padding-right: 1.5625rem;
}
.blog-article-breadcrumbs {
margin-bottom: 32px;
padding-top: 32px;
padding-left: 24px;
padding-right: 24px;
font-size: 12px;
line-height: 18px;
}
.blog-footer {
padding-top: 48px;
padding-bottom: 48px;
}
.blog-wrapper {
padding-top: 4.267rem;
padding-left: 2.133rem;
padding-right: 2.133rem;
}
.blog-content.grid {
display: block;
}
.h-3xl.blog-title {
font-size: 2.067rem;
line-height: 2.273rem;
}
.p-s.content-right {
width: auto;
}
.p-l.blog-intro {
font-size: 1.2rem;
line-height: 1.32rem;
}
.h-2xl.content-heading {
width: auto;
margin-bottom: 1.6rem;
}
.blog-img-gallery {
grid-column-gap: 8px;
grid-row-gap: 8px;
margin-left: -2.133rem;
margin-right: -2.133rem;
overflow: hidden;
}
.blog-img-gallery-copy {
grid-column-gap: .5rem;
grid-row-gap: .5rem;
margin-left: -2.133rem;
margin-right: -2.133rem;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
.blog-item-title {
font-size: 1.733rem;
line-height: 1.907rem;
}
.blog-item-title.large {
font-size: 2.467rem;
line-height: 2.713rem;
}
.blog-hero {
height: 686px;
}
.featured-article-link {
padding: 1.6rem 2.133rem;
}
.blog-posts-item {
margin-bottom: 32px;
}
.blog-posts-list {
column-count: 0;
flex-direction: column;
display: flex;
}
.blog-item-author.on-article {
margin-bottom: 1.067rem;
}
.blog-item-info.on-article {
grid-column-gap: 0rem;
justify-content: space-between;
width: auto;
max-width: none;
}
.blog-categories {
border-bottom-style: none;
width: 100vw;
margin-left: -2.133rem;
padding-left: 1.067rem;
padding-right: 1.067rem;
}
.blog-wrapper {
margin-top: 13.333rem;
margin-left: 1.067rem;
margin-right: 1.076rem;
}
.blog-header-info.on-article {
display: block;
}
.h-3xl {
font-size: 37px;
line-height: 40.7px;
}
.p-2xl {
font-size: 2.067rem;
line-height: 2.273rem;
}
.blog-conclusion {
margin-left: -1.067rem;
margin-right: -1.067rem;
padding: 2.133rem;
}
.h-xl {
font-size: 1.733rem;
line-height: 1.907rem;
}
.blog-categories-list {
border-bottom: 1px solid #fff3;
width: auto;
}
.p-l.blog-intro {
margin-bottom: 7rem;
}
.h-2xl {
font-size: 2.067rem;
line-height: 2.273rem;
}
.blog-share {
flex-direction: column;
width: 100vw;
margin-left: -3.2rem;
display: flex;
}
.sh-s.cap {
margin-bottom: 1.333rem;
}
.share-buttons {
flex-wrap: wrap;
justify-content: center;
margin-left: 0;
}
.share-link.copy {
flex: 0 45%;
justify-content: center;
margin-top: 1.333rem;
display: flex;
}
.more-stories-wrapper {
padding-left: 2.133rem;
padding-right: 2.133rem;
}
.blog-img-gallery {
grid-template-columns: auto auto;
}
.blog-img-gallery.two-img {
grid-template-rows: minmax(21.333rem, 1fr);
}
.blog-img-gallery-copy {
grid-template-columns: auto auto;
}
.blog-img-gallery-copy.two-img {
grid-template-rows: minmax(21.333rem, 1fr);
}
}
@media screen and (max-width: 479px) {
.blog-article-author {
flex-direction: column;
align-items: flex-start;
padding-left: 2rem;
padding-right: 2rem;
}
}
#w-node-f508a108-28e7-70b4-26ee-8d0b7ac52969-4cd07a50, #w-node-ad0df7e4-4832-b3d5-b70c-8ee1f2fd35f9-c0ca8339, #w-node-_22e1d006-ded9-471d-70c1-4e6bb87eee13-c0ca8339, #w-node-_4f5111af-7d07-4a81-3d88-7adcc3710313-c0ca8339, #w-node-a7eeecfb-c2ee-b9f5-545c-64a5cab3a11f-c0ca8339, #w-node-_1542f950-b32f-0b69-9be3-5f99e27f5a5a-c0ca8339, #w-node-_0f6e99d0-1c17-35f1-1d4c-2a9f725f08f5-c0ca8339, #w-node-_3786a807-c5d9-ca01-d43d-118f75a1b1b6-c0ca8339, #w-node-_8fa37ed2-52a8-d80f-0ee2-4d8e8b28d533-c0ca8339, #w-node-c1ef4c1e-38f0-9e38-f42c-d6d93a6bdcb7-c0ca8339, #w-node-_0be993f4-3a9e-789a-42e3-e150fd81ed30-c0ca8339 {
grid-area: span 1 / span 1 / span 1 / span 1;
}
/* Live blog's animated orb layer (blog.ghostdynamics.co inline