.ja-section *,
.ja-section *::before,
.ja-section *::after {
box-sizing: border-box;
} .ja-grid {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.ja-card {
list-style: none;
} .ja-section {
--ja-bg:          #ffffff;
--ja-bg-card:     #ffffff;
--ja-bg-hover:    #faf8f5;
--ja-ink-900:     #1a1610;
--ja-ink-700:     #3d3830;
--ja-ink-500:     #7a7060;
--ja-ink-300:     #c2b9a8;
--ja-accent:      #c41a1a; --ja-accent-soft: #fef2f2;
--ja-border:      #e8e4dd;
--ja-shadow-sm:   0 1px 3px rgba(26,22,16,.06), 0 1px 2px rgba(26,22,16,.04);
--ja-shadow-md:   0 4px 16px rgba(26,22,16,.10), 0 2px 6px rgba(26,22,16,.06);
--ja-shadow-hover:0 8px 28px rgba(26,22,16,.13), 0 4px 10px rgba(26,22,16,.08);
--ja-radius:      10px;
--ja-radius-sm:   6px;
--ja-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ja-transition:  .22s cubic-bezier(.22,1,.36,1);
font-family: var(--ja-font);
color: var(--ja-ink-900);
padding: 3rem 0 2rem;
} .ja-header {
margin-bottom: 2.5rem;
}
.ja-kicker {
display: inline-block;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ja-accent);
background: var(--ja-accent-soft);
border: 1px solid #fca5a5;
border-radius: 99px;
padding: .25em .85em;
margin-bottom: .75rem;
}
.ja-title {
font-size: clamp(1.35rem, 2.5vw, 1.85rem);
font-weight: 700;
line-height: 1.2;
color: var(--ja-ink-900);
margin: 0 0 .5rem;
}
.ja-subtitle {
font-size: .875rem;
color: var(--ja-ink-500);
margin: 0;
line-height: 1.5;
} .ja-grid {
display: grid;
gap: 1.25rem;
list-style: none;
padding: 0;
margin: 0;
} .ja-grid--col-3 {
grid-template-columns: repeat(3, 1fr);
} .ja-grid--col-3 .ja-card--featured {
grid-column: 1 / -1;
} .ja-grid--col-2 {
grid-template-columns: repeat(2, 1fr);
}
.ja-grid--col-2 .ja-card--featured {
grid-column: 1 / -1;
} .ja-card {
background: var(--ja-bg-card);
border: 1px solid var(--ja-border);
border-radius: var(--ja-radius);
box-shadow: var(--ja-shadow-sm);
transition: transform var(--ja-transition),
box-shadow var(--ja-transition),
background var(--ja-transition);
overflow: hidden;
}
.ja-card:hover {
transform: translateY(-4px);
box-shadow: var(--ja-shadow-hover);
background: var(--ja-bg-hover);
border-color: var(--ja-border);
} .ja-card--featured {
border-left: 3px solid var(--ja-accent);
}
.ja-card--featured .ja-card__inner {
padding: 1.75rem 2rem;
}
.ja-card--featured .ja-card__title {
font-size: clamp(1rem, 1.8vw, 1.2rem);
}
.ja-card--featured .ja-card__excerpt {
-webkit-line-clamp: 4;
line-clamp: 4;
font-size: .9375rem;
} .ja-card__inner {
padding: 1.25rem 1.375rem 1.25rem;
display: flex;
flex-direction: column;
height: 100%;
gap: .75rem;
} .ja-card__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem;
} .ja-badge {
display: inline-flex;
align-items: center;
gap: .35em;
font-size: .6rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ja-accent);
background: var(--ja-accent-soft);
border: 1px solid #fca5a5;
border-radius: 99px;
padding: .25em .75em;
line-height: 1.6;
white-space: nowrap;
}
.ja-badge__icon {
width: 11px;
height: 11px;
flex-shrink: 0;
opacity: .8;
} .ja-card__date {
font-size: .72rem;
color: var(--ja-ink-500);
letter-spacing: .02em;
} .ja-card__divider {
height: 1px;
background: var(--ja-border);
margin: -.1rem 0;
} .ja-card__title {
font-size: .9375rem;
font-weight: 700;
line-height: 1.35;
color: var(--ja-ink-900);
margin: 0;
flex: 1;
}
.ja-card__title a {
color: inherit;
text-decoration: none;
transition: color var(--ja-transition);
}
.ja-card__title a:hover,
.ja-card__title a:focus-visible {
color: var(--ja-accent);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
} .ja-card__excerpt {
font-size: .8125rem;
line-height: 1.65;
color: var(--ja-ink-500);
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
} .ja-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: .25rem;
border-top: 1px solid var(--ja-border);
}
.ja-card__author {
display: inline-flex;
align-items: center;
gap: .35em;
font-size: .72rem;
color: var(--ja-ink-500);
letter-spacing: .01em;
}
.ja-card__author svg {
flex-shrink: 0;
opacity: .7;
} .ja-card__cta {
display: inline-flex;
align-items: center;
gap: .4em;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ja-ink-700);
text-decoration: none;
white-space: nowrap;
padding: .3em .75em;
border: 1px solid var(--ja-border);
border-radius: var(--ja-radius-sm);
background: var(--ja-bg);
transition: color var(--ja-transition),
background var(--ja-transition),
border-color var(--ja-transition),
box-shadow var(--ja-transition);
}
.ja-card__cta:hover,
.ja-card__cta:focus-visible {
color: var(--ja-accent);
background: var(--ja-accent-soft);
border-color: #fca5a5;
box-shadow: 0 1px 4px rgba(196,26,26,.12);
text-decoration: none;
}
.ja-card__cta svg {
flex-shrink: 0;
transition: transform var(--ja-transition);
}
.ja-card__cta:hover svg {
transform: translate(2px, -2px);
} .ja-fallback {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #fef9f0;
border: 1px solid #f9d580;
border-radius: var(--ja-radius);
padding: 1.25rem 1.5rem;
color: var(--ja-ink-700);
}
.ja-fallback svg {
flex-shrink: 0;
color: #b45309;
margin-top: 2px;
}
.ja-fallback p {
font-size: .875rem;
line-height: 1.6;
margin: 0;
}
.ja-fallback a {
color: var(--ja-accent);
font-weight: 600;
text-underline-offset: 2px;
} .ja-footer {
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--ja-border);
}
.ja-nota {
font-size: .72rem;
color: var(--ja-ink-300);
line-height: 1.7;
margin: 0;
text-align: center;
}
.ja-nota a {
color: var(--ja-ink-500);
text-decoration: underline;
text-underline-offset: 2px;
}
.ja-nota a:hover {
color: var(--ja-accent);
} @media (max-width: 900px) {
.ja-grid--col-3,
.ja-grid--col-2 {
grid-template-columns: repeat(2, 1fr);
}
.ja-card--featured {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.ja-section {
padding: 2rem 0 1.5rem;
}
.ja-grid--col-3,
.ja-grid--col-2 {
grid-template-columns: 1fr;
gap: 1rem;
}
.ja-card--featured {
grid-column: auto;
border-left-width: 3px;
}
.ja-card--featured .ja-card__inner {
padding: 1.25rem 1.375rem;
}
.ja-card__footer {
flex-direction: column;
align-items: flex-start;
gap: .6rem;
}
.ja-card__cta {
width: 100%;
justify-content: center;
}
.ja-title {
font-size: 1.25rem;
}
} .ja-card__title a:focus-visible,
.ja-card__cta:focus-visible {
outline: 2px solid var(--ja-accent);
outline-offset: 3px;
border-radius: 3px;
} @media print {
.ja-card:hover {
transform: none;
box-shadow: var(--ja-shadow-sm);
}
}