.stowly-blog {
--stowly-blog-max: 1180px;
--stowly-blog-gap: 28px;
background: var(--stowly-color-page);
padding-bottom: 72px;
} .stowly-blog-hero {
padding: 40px 20px 8px;
}
.stowly-blog-hero__inner {
max-width: var(--stowly-blog-max);
margin: 0 auto;
}
.stowly-hero-breadcrumbs {
margin-bottom: 18px;
}
.stowly-blog-hero__title {
margin: 0 0 12px;
font-size: clamp(1.9rem, 4vw, 2.8rem);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--stowly-color-ink);
}
.stowly-blog-hero__lede {
margin: 0;
max-width: 62ch;
font-size: 1.05rem;
line-height: 1.6;
color: var(--stowly-color-ink-soft);
} .stowly-blog-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
.stowly-blog-chip {
display: inline-flex;
align-items: center;
padding: 7px 15px;
border-radius: 999px;
border: 1px solid var(--stowly-color-line-strong);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink-soft);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: color var(--stowly-transition, 0.18s ease),
border-color var(--stowly-transition, 0.18s ease),
background var(--stowly-transition, 0.18s ease);
}
.stowly-blog-chip:hover,
.stowly-blog-chip:focus-visible {
color: var(--stowly-color-primary);
border-color: var(--stowly-color-primary);
}
.stowly-blog-chip.is-active {
color: #fff;
background: var(--stowly-color-primary);
border-color: var(--stowly-color-primary);
}  .stowly-blog-list {
padding: 28px 20px 0;
}
.stowly-blog-grid {
max-width: var(--stowly-blog-max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--stowly-blog-gap);
}
@media (max-width: 900px) {
.stowly-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.stowly-blog-grid {
grid-template-columns: 1fr;
}
}
.stowly-blog-card {
display: flex;
flex-direction: column;
background: var(--stowly-color-surface);
border: 1px solid var(--stowly-color-line);
border-radius: 18px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stowly-blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.stowly-blog-card__media {
display: block;
aspect-ratio: 16 / 10;
background: var(--stowly-color-surface-muted);
overflow: hidden;
}
.stowly-blog-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.stowly-blog-card:hover .stowly-blog-card__img {
transform: scale(1.04);
}
.stowly-blog-card__placeholder {
display: block;
width: 100%;
height: 100%;
background: var(--stowly-gradient-primary);
opacity: 0.16;
}
.stowly-blog-card__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 22px;
flex: 1;
}
.stowly-blog-card__eyebrow {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--stowly-color-primary);
}
.stowly-blog-card__title {
margin: 0;
font-size: 1.15rem;
line-height: 1.3;
letter-spacing: -0.01em;
}
.stowly-blog-card__title a {
color: var(--stowly-color-ink);
text-decoration: none;
}
.stowly-blog-card__title a:hover,
.stowly-blog-card__title a:focus-visible {
color: var(--stowly-color-primary);
}
.stowly-blog-card__excerpt {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--stowly-color-ink-soft);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stowly-blog-card__meta {
margin: auto 0 0;
padding-top: 6px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: var(--stowly-color-ink-muted);
} .stowly-blog-pagination {
margin-top: 44px;
}
.stowly-blog-pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.stowly-blog-pagination a,
.stowly-blog-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid var(--stowly-color-line-strong);
background: var(--stowly-color-surface);
color: var(--stowly-color-ink-soft);
font-weight: 600;
text-decoration: none;
}
.stowly-blog-pagination a:hover,
.stowly-blog-pagination a:focus-visible {
color: var(--stowly-color-primary);
border-color: var(--stowly-color-primary);
}
.stowly-blog-pagination .current {
color: #fff;
background: var(--stowly-color-primary);
border-color: var(--stowly-color-primary);
} .stowly-blog-empty {
max-width: var(--stowly-blog-max);
margin: 0 auto;
padding: 40px 20px 0;
}
.stowly-blog-empty__inner {
background: var(--stowly-color-surface);
border: 1px solid var(--stowly-color-line);
border-radius: 18px;
padding: 48px 32px;
text-align: center;
}
.stowly-blog-empty__inner h2 {
margin: 0 0 10px;
color: var(--stowly-color-ink);
}
.stowly-blog-empty__inner p {
margin: 0 auto 22px;
max-width: 52ch;
color: var(--stowly-color-ink-soft);
}
.stowly-blog-empty__cta,
.stowly-article__cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 12px;
background: var(--stowly-color-primary);
color: #fff;
font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.stowly-blog-empty__cta:hover,
.stowly-article__cta-link:hover,
.stowly-article__cta-link:focus-visible {
background: var(--stowly-color-primary-hover);
color: #fff;
} .stowly-blog--single .stowly-article {
--stowly-article-measure: 760px;
max-width: 1120px;
margin: 0 auto;
padding: 40px 20px 0;
}
.stowly-article__header,
.stowly-article__meta {
max-width: var(--stowly-article-measure);
margin-inline: auto;
}
.stowly-article__breadcrumbs {
margin-bottom: 18px;
}
.stowly-article__eyebrow {
margin: 0 0 10px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.stowly-article__eyebrow a {
color: var(--stowly-color-primary);
text-decoration: none;
}
.stowly-article__title {
margin: 0 0 14px;
font-size: clamp(2rem, 4.4vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--stowly-color-ink);
}
.stowly-article__lede {
margin: 0 0 16px;
font-size: 1.2rem;
line-height: 1.5;
color: var(--stowly-color-ink-soft);
}
.stowly-article__meta {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--stowly-color-ink-muted);
}
.stowly-article__hero-media {
margin: 28px 0 0;
padding: 0; border-radius: 20px;
}
.stowly-article__hero-img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 20px;
display: block;
} .stowly-article__layout {
margin-top: 32px;
}
.stowly-article__layout .stowly-article__content {
max-width: var(--stowly-article-measure);
margin-inline: auto;
}
.stowly-article__aside {
margin-bottom: 24px;
}
.stowly-article__toc {
background: var(--stowly-color-surface);
border: 1px solid var(--stowly-color-line);
border-radius: 14px;
padding: 18px 20px;
}
.stowly-article__toc-label {
margin: 0 0 10px;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--stowly-color-ink-muted);
}
.stowly-article__toc-list {
margin: 0;
padding-left: 1.15em;
display: flex;
flex-direction: column;
gap: 9px;
}
.stowly-article__toc-list li::marker {
color: var(--stowly-color-ink-muted);
font-size: 0.85em;
}
.stowly-article__toc-list a {
color: var(--stowly-color-ink-soft);
text-decoration: none;
font-size: 0.92rem;
line-height: 1.4;
}
.stowly-article__toc-list a:hover,
.stowly-article__toc-list a:focus-visible {
color: var(--stowly-color-primary);
}
@media (min-width: 1024px) {
.stowly-article__layout--has-toc {
display: grid; grid-template-columns: minmax(0, var(--stowly-article-measure)) 240px;
gap: 56px;
justify-content: center;
align-items: start;
}
.stowly-article__layout--has-toc .stowly-article__content {
grid-column: 1;
grid-row: 1;
max-width: none;
margin-inline: 0;
}
.stowly-article__layout--has-toc .stowly-article__aside {
grid-column: 2;
grid-row: 1;
position: sticky;
top: 96px;
margin-bottom: 0;
}
} .stowly-article__content > * + * {
margin-top: 1.1em;
}
.stowly-article__content h2 {
margin-top: 1.8em;
font-size: 1.6rem;
letter-spacing: -0.01em;
color: var(--stowly-color-ink);
scroll-margin-top: 90px;
}
.stowly-article__content h3 {
margin-top: 1.5em;
font-size: 1.25rem;
color: var(--stowly-color-ink);
}
.stowly-article__content p,
.stowly-article__content li {
font-size: 1.06rem;
line-height: 1.7;
color: var(--stowly-color-ink);
}
.stowly-article__content a {
color: var(--stowly-color-primary);
text-underline-offset: 2px;
}
.stowly-article__content img {
max-width: 100%;
height: auto;
border-radius: 14px;
}
.stowly-article__content blockquote {
margin: 1.4em 0;
padding: 6px 0 6px 20px;
border-left: 3px solid var(--stowly-color-primary);
color: var(--stowly-color-ink-soft);
font-style: italic;
} .stowly-article__cta {
max-width: var(--stowly-article-measure);
margin: 40px auto 0;
padding: 26px 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
background: var(--stowly-color-primary-soft);
border: 1px solid var(--stowly-color-primary-soft);
border-radius: 18px;
}
.stowly-article__cta-title {
margin: 0 0 4px;
font-size: 1.25rem;
color: var(--stowly-color-primary-strong);
}
.stowly-article__cta-lede {
margin: 0;
color: var(--stowly-color-ink-soft);
max-width: 46ch;
} .stowly-article__cta--compact {
display: none;
}
@media (min-width: 1024px) {
.stowly-article__layout--has-toc .stowly-article__cta--compact {
display: block;
max-width: none;
margin: 20px 0 0;
padding: 20px;
} .stowly-article__layout--has-toc ~ .stowly-article__cta--flow {
display: none;
}
.stowly-article__cta--compact .stowly-article__cta-title {
font-size: 1.05rem;
}
.stowly-article__cta--compact .stowly-article__cta-lede {
font-size: 0.9rem;
max-width: none;
}
.stowly-article__cta--compact .stowly-article__cta-link {
margin-top: 14px;
width: 100%;
justify-content: center;
}
} .stowly-article__author {
max-width: var(--stowly-article-measure);
margin: 40px auto 0;
padding: 22px 24px;
display: flex;
gap: 18px;
align-items: flex-start;
background: var(--stowly-color-surface);
border: 1px solid var(--stowly-color-line);
border-radius: 18px;
}
.stowly-article__author-avatar {
flex: none;
display: block;
}
.stowly-article__author-avatar img {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.stowly-article__author-eyebrow {
margin: 0 0 2px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stowly-color-ink-muted);
}
.stowly-article__author-name {
margin: 0 0 8px;
font-size: 1.1rem;
font-weight: 700;
}
.stowly-article__author-name a {
color: var(--stowly-color-ink);
text-decoration: none;
}
.stowly-article__author-name a:hover,
.stowly-article__author-name a:focus-visible {
text-decoration: underline;
}
.stowly-article__author-bio {
margin: 0 0 10px;
color: var(--stowly-color-ink-soft);
font-size: 0.95rem;
line-height: 1.6;
}
@media (max-width: 560px) {
.stowly-article__author {
flex-direction: column;
gap: 14px;
}
.stowly-article__author-avatar img {
width: 60px;
height: 60px;
}
} .stowly-blog-related {
margin-top: 64px;
padding-top: 8px;
}
.stowly-blog-related__inner {
max-width: var(--stowly-blog-max);
margin: 0 auto;
padding: 0 20px;
}
.stowly-blog-related__title {
margin: 0 0 22px;
font-size: 1.5rem;
letter-spacing: -0.01em;
color: var(--stowly-color-ink);
} .stowly-landing-blog {
padding: 8px 20px 0;
}
.stowly-landing-blog__inner {
max-width: 1180px;
margin: 0 auto;
} .stowly-article__byline a {
color: var(--stowly-color-ink);
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid transparent;
}
.stowly-article__byline a:hover,
.stowly-article__byline a:focus-visible {
border-bottom-color: currentColor;
} .stowly-blog-hero__eyebrow {
margin: 0 0 6px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stowly-color-ink-muted);
}
.stowly-author-hero__identity {
display: flex;
align-items: flex-start;
gap: 20px;
}
.stowly-author-hero__avatar {
flex: none;
}
.stowly-author-hero__avatar img {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.stowly-author-hero__text {
min-width: 0;
}
@media (max-width: 560px) {
.stowly-author-hero__identity {
flex-direction: column;
gap: 14px;
}
.stowly-author-hero__avatar img {
width: 64px;
height: 64px;
}
} .stowly-provider-cta-section {
padding: 8px 20px 0;
}
.stowly-provider-cta {
max-width: var(--stowly-blog-max);
margin: 40px auto 0;
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
background: var(--stowly-color-surface);
border: 1px solid var(--stowly-color-line);
border-radius: 22px;
}
.stowly-provider-cta__media {
position: relative;
min-height: 200px;
}
.stowly-provider-cta__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.stowly-provider-cta__body {
padding: 28px 24px 30px;
}
.stowly-provider-cta__eyebrow {
margin: 0 0 8px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stowly-color-primary-strong);
}
.stowly-provider-cta__title {
margin: 0 0 10px;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--stowly-color-ink);
}
.stowly-provider-cta__lede {
margin: 0 0 20px;
max-width: 46ch;
color: var(--stowly-color-ink-soft);
font-size: 1rem;
line-height: 1.6;
}
.stowly-provider-cta__link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 999px;
background: var(--stowly-color-primary);
color: #fff;
font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.stowly-provider-cta__link:hover,
.stowly-provider-cta__link:focus-visible {
background: var(--stowly-color-primary-hover);
color: #fff;
}
@media (min-width: 720px) {
.stowly-provider-cta {
grid-template-columns: 42% 1fr;
align-items: stretch;
}
.stowly-provider-cta__media {
min-height: 100%;
}
.stowly-provider-cta__body {
padding: 52px 56px 54px;
align-self: center;
}
}