/* Shared visual rules for public content cards. */
:root { --card-surface: #0d1117; --card-hover: #111722; --card-line: rgba(255,255,255,.1); --card-radius: 12px; --card-blue: #2563eb; }
.article-banner, .project-card, .offer-card, .tool-card {
    background: var(--card-surface); border: 1px solid var(--card-line); border-radius: var(--card-radius);
    box-shadow: none; backdrop-filter: none; transition: border-color .2s, background .2s;
}
.article-banner:hover, .project-card:hover, .offer-card:hover, .tool-card:hover {
    background: var(--card-hover); border-color: rgba(37,99,235,.65); box-shadow: none; transform: none;
}
.article-banner:focus-visible, .project-card:focus-visible, .tool-card:focus-visible { outline: 2px solid var(--card-blue); outline-offset: 4px; }
.article-banner h3, .project-card h3, .offer-card h3, .tool-card h2 {
    color: var(--card-blue); font-family: 'Segoe UI', 'Inter', sans-serif; font-size: 26px; font-weight: 900;
    line-height: 1.25; letter-spacing: -.015em; text-transform: uppercase; text-shadow: none;
}
.article-banner:hover h3, .article-banner:focus-visible h3, .tool-card:hover h2 { color: var(--card-blue); text-shadow: none; }
.project-card .card-info, .project-card .card-icon { background: transparent; }
.project-card .card-info { padding: 28px 32px; }
.offer-card { padding: 28px 32px; }
.tool-card { padding: 28px; font-family: 'Segoe UI', 'Inter', sans-serif; }
.tool-card p { font-size: 16px; line-height: 1.65; }
.tool-card p:first-child { font-size: 17px; font-weight: 600; }
.article-list { gap: 24px; }
.article-banner { display: grid; grid-template-rows: auto auto 230px auto; gap: 12px; padding: 28px 24px 24px; }
.article-copy { display: contents; }
.article-banner h3 { min-height: 0; margin: 0; text-wrap: balance; }
.article-banner p { font-size: 17px; line-height: 1.625; color: #cbd5e1; margin: 0; }
.article-banner .article-cover { order: initial; width: 100%; height: 230px; aspect-ratio: auto; object-fit: contain; margin: 4px 0 0; padding: 12px 0; border: 0; border-radius: 0; background: transparent; }
.article-action { align-self: end; color: #e2e8f0; font-size: 14px; line-height: 1.4; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding-top: 8px; }
.article-banner:hover .article-action, .article-banner:focus-visible .article-action { color: #ccff00; }
@supports (grid-template-rows: subgrid) {
    .article-banner { grid-row: span 4; grid-template-rows: subgrid; }
}
@media(max-width: 767px) {
    .article-banner h3, .project-card h3, .offer-card h3, .tool-card h2 { font-size: 22px; }
    .article-banner { gap: 12px; grid-row: auto; grid-template-rows: auto auto auto auto; }
    .article-banner .article-cover { height: auto; aspect-ratio: 16 / 9; }
    .project-card .card-info, .offer-card, .tool-card { padding: 24px; }
}
@media(prefers-reduced-motion: reduce) { .article-banner, .project-card, .offer-card, .tool-card { transition: none; } }
/* Article cards: text with a quiet icon in the upper-right corner. */
.article-list .article-banner { grid-row: auto; grid-template-columns: minmax(0, 1fr) 32px; grid-template-rows: auto 1fr auto; gap: 24px 20px; padding: 32px; }
.article-symbol { display: block; grid-column: 2; grid-row: 1; color: #94a3b8; padding-top: 2px; transition: color .2s; }
.article-symbol svg { display: block; width: 32px; height: 32px; }
.article-list .article-banner h3 { grid-column: 1; grid-row: 1; text-wrap: pretty; }
.article-list .article-banner p { grid-column: 1 / -1; grid-row: 2; }
.article-list .article-action { grid-column: 1 / -1; grid-row: 3; margin: 0; }
.article-banner:nth-child(1) { --icon-accent: #2563eb; }
.article-banner:nth-child(2) { --icon-accent: #ccff00; }
.article-banner:nth-child(3) { --icon-accent: #a855f7; }
.article-banner:hover .article-symbol, .article-banner:focus-visible .article-symbol { color: var(--icon-accent); }
@media(max-width: 1000px) and (min-width: 768px) { .article-list { grid-template-columns: 1fr; } }
@media(max-width: 767px) { .article-list .article-banner { padding: 24px; } }
@media(prefers-reduced-motion: reduce) { .article-symbol { transition: none; } }