/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the CSS given, following the target style and effect variant. The CSS snippet is small: only a media query with three rules. We need to preserve selectors exactly, but we can change visual properties: colors, shadows, radius, transitions, gradients, opacity, etc. However, the provided CSS doesn't have any colors or shadows. It has font-size (which is typography, cannot change), padding (which is layout, can be within ±20%), and text-align (layout, cannot change). So we need to see if there's any opportunity to add visual changes within the allowed rules.

Let's examine the original:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

We must keep selectors and layout. The property declarations are layout/typography: text-align (cannot change), font-size (cannot change), padding (can change ±20%, but it uses var(--space-md) so we could alter the variable? Actually variable is a custom property, its value can be changed if defined elsewhere. But here it's just a reference. We are not supposed to change CSS custom properties values? Wait, in the "MUST CHANGE" list: "CSS custom properties (--color-*, --shadow-*) values" — only color/shadow custom properties. So --space-md is not a color/shadow, so we shouldn't change it. Also padding is layout, can change similar within ±20% but only if we know the value. We could replace var(--space-md) with a literal value? That would change the CSS structure? It's allowed to change padding values within ±20% of input. But input is var(--space-md) — we don't know the computed value. Better keep it as var(--space-md) to be safe. Similarly, font-size cannot change. text-align cannot change.

So essentially, we need to output the exact same CSS, except we can add new properties like color, background, box-shadow, border-radius, etc. But the selectors are specific elements: .app-hero-section .row .col-lg-7 might be a text container; .badge.bg-warning is a badge; .contact-card is a card. We can add visual enhancements such as background, color, border-radius, box-shadow, backdrop-filter, etc. But we must be careful not to break the layout. Since it's a media query for small screens, we might add subtle visual flair in the badge or cards.

However, the instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." The output must be ONLY rewritten CSS, preserving ALL selectors and layout exactly. Since the original has no colors, we can add them. But the original rules only target specific properties. We need to decide whether to add new properties inside the existing rules. That is allowed because we are not changing the layout properties that are already there. We can add declarations.

Given the target style "editorial-magazine" with cream background, ink black text, deep red accent, and glow effects variant with glow shadows in accent color, halo on hover, medium radius, subtle pulsing animations. We can apply these to the badge and cards.

Let's think:

- .app-hero-section .row .col-lg-7 has text-align:center. We could add a color, maybe text-shadow? But it's a container; adding color might affect all text. Since it's hero section, maybe ink black text. We can add color: #1a1a1a. Also maybe a subtle text-shadow? But not necessary.

- .app-hero-section .badge.bg-warning is a warning badge. Original has bg-warning from Bootstrap, likely yellow. But we can override with new background? Since class includes bg-warning, it will have background-color: #ffc107 from Bootstrap. We can override with our accent color, maybe deep red, and add glow shadow, border-radius, etc. But we must not change font-size. We can add color, background-color, box-shadow, border-radius, padding? Padding is layout, but we can adjust if within ±20%? Actually the rule for .badge doesn't specify padding; Bootstrap will apply default padding. We could add padding but that might affect layout. Better to add only visual (color, background, shadow, radius, etc.).

- .contact-channels-section article and .contact-quick-section .contact-card have padding: var(--space-md) !important. We can add background, border-radius, box-shadow, maybe transition.

We can also introduce CSS custom properties? But better to just use hex values.

Also we need to preserve @media conditions unchanged. And selector lists exactly. And the order of declarations? We can reorder? We should keep original declarations and add after them. The original declarations have !important on padding; we keep that.

We should not add any comment markers. No markdown fences.

Let's craft the output.

We must also consider "glow-effects" variant: glow shadows in accent color, halo on hover, medium radius (8-16px). We can add transitions for hover effects. Since the rules are inside a media query, hover effects on touch devices may be less relevant, but fine.

We need to ensure we don't change display, position, grid, flex, width, height, etc. Adding border-radius and box-shadow does not affect layout? box-shadow doesn't affect layout. border-radius doesn't affect layout. background doesn't affect layout. color doesn't affect layout. transition doesn't affect layout. So safe.

Let's design:

Base colors:
- Background cream: #f5f1e8
- Ink black: #1a1a1a
- Accent deep red: #c44536
- Maybe olive as secondary: #6b705c

For the hero text container, we could add:
color: #1a1a1a; (ink)
Maybe text-shadow: 0 1px 2px rgba(0,0,0,0.05)? But text-shadow is allowed. But maybe not needed.

Better to focus on the badge and cards.

Badge:
background-color: #c44536;
color: #f5f1e8;
box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);
border-radius: 12px;
transition: box-shadow 0.3s ease;
Maybe on hover: .app-hero-section .badge.bg-warning:hover { box-shadow: 0 0 32px rgba(196, 69, 54, 0.6); }
But we need to include :hover selector. That's allowed: pseudo-classes can be added? Wait, we are not allowed to change selectors. Adding a new selector with :hover would be adding a style rule, which is a selector change? The rule says "Selectors (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" — we can keep them, but can we add new ones? It's not explicitly forbidden to add new selectors, but the output is rewriting the given CSS, so we should not alter the selector list? Actually the instruction says "Preserving ALL selectors and layout exactly." Adding new selectors would change the selector set, so not allowed. We should not add :hover rules. But we can use transition on the existing rule to enable hover glow. That is fine: transition property is allowed to change. So we can set transition: box-shadow 0.3s ease; and in the existing rule, we can't define the hover state. But we could add the hover state in the same rule? No, we can't add a :hover selector. So better to just have a static glow shadow, as per "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" — that's the base. The "Halo on hover" might not be implementable without adding a :hover rule. Could we use transition and a constant shadow? No.

Alternatively, we could use an inset shadow? Or we could rely on Bootstrap's existing hover? Probably not. To keep within constraints, we should not add new selectors. So we just apply the base glow shadow. On hover, nothing changes. That's acceptable? The variant says "Halo on hover" but we can't add a :hover selector. Maybe we can use the existing :hover from Bootstrap? No. So we'll just have the glow.

Actually, we could use the fact that the original rule for .badge.bg-warning applies to a Bootstrap badge. Bootstrap has a :hover? No. So we can't.

Thus, we output static glow.

For cards:
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #f5f1e8;
    border-radius: 14px;
    box-shadow: 0 0 24px rgba(196, 69, 54, 0.15), 0 8px 24px rgba(26, 26, 26, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

But adding transform transition might be okay, but transform itself is not applied. We can omit transform. Only transition box-shadow.

Also, we might add a border? That's visual. Maybe border: 1px solid rgba(196, 69, 54, 0.2). But border-width is not to be changed? Actually border-width can't be changed? The rule says "border-color and border-style (NOT border-width)" — so we can't change border-width. But if we add a border that wasn't there, that would create a new border-width, which is a layout? Border width adds to box size, potentially affecting layout. Better avoid adding border. Use outline? Outline doesn't affect layout. We can add outline: 1px solid rgba(...) but outline-color is allowed. Outline style? We can set outline: none? But better not.

We can add background, border-radius, box-shadow, transition.

For the hero text, we could add color and maybe text-shadow. Text-shadow doesn't affect layout.

But we should also consider that the background is cream; the text should be ink. However, in the hero section, text color might already be dark from Bootstrap. We can set color explicitly.

Let's craft final CSS.

Original:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

Rewritten with additions:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #f5f1e8;
        background-color: #c44536;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f5f1e8;
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.12), 0 8px 20px rgba(26, 26, 26, 0.08);
        transition: box-shadow 0.3s ease;
    }
}

But wait, we must ensure that the padding is within ±20% of input? Input padding is var(--space-md), so we can't compare. But we are keeping it exactly, so fine.

Do we need to worry about the badge's background-color overriding Bootstrap's .bg-warning? It will, because this rule appears after Bootstrap in the CSS file, and has same specificity? Actually .app-hero-section .badge.bg-warning has higher specificity than .bg-warning alone, so it will override. Good.

Should we add `background-image` gradient? Maybe not necessary.

Also, we might change the `color` of the hero text to ink black, but text-align center remains. Adding text-shadow is allowed.

But the editor wants "fresh color palette + shadow/radius identity". The original has no colors, so any addition is a refresh.

However, we must be careful: The `@media (max-width: 575.98px)` is a media query. We should keep it exactly. The selector list `.contact-channels-section article, .contact-quick-section .contact-card` must be exact. The comma and whitespace matter. In the original, it's:

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }

We must preserve the same formatting? The instruction says output ONLY rewritten CSS, preserving selectors exactly. Whitespace around selectors isn't critical, but we should keep the same structure. We'll output it exactly.

Also, we shouldn't add any comments or markers.

Let's verify that no layout properties are changed. We only added color, text-shadow, background-color, border-radius, box-shadow, transition. All allowed.

We should consider that `transition` property is visual. Yes.

Potential issue: `filter` in transition but not used. We can remove filter. Let's just use `transition: box-shadow 0.3s ease;` for badge.

Also, we might want to add a subtle pulsing animation. That would require @keyframes, which we can add? The animation property values can change, but adding new @keyframes and animation would change the CSS structure. The instruction says "Animation & Media: @keyframes names (values inside CAN change)" but we are not allowed to add new rules? It doesn't explicitly say we can add new @keyframes. Better not add animations.

We'll keep it simple.

Let's think if there is any hidden requirement to change colors throughout file. Since the file is small, we've added accent colors.

One more thing: The target style "editorial-magazine" suggests cream/beige backgrounds, ink black text, deep red accent. We are using those.

For the card background, using cream (#f5f1e8) on a small screen might make the card blend with the page background if the page is also cream. But the actual page background might be white. We don't know. We could use a slightly different beige like #faf7f0 or white. But the palette says cream/beige backgrounds (#f5f1e8). For cards, maybe use a slightly lighter cream or white. But to stay within palette, we can use #f5f1e8. Or we can use #fffdf7. Let's use a lighter cream: #faf6ef. But the palette specifically says #f5f1e8. We'll use #f5f1e8.

For the text color on the badge, we set #f5f1e8 (cream) on deep red background. Good.

For the hero text, we set #1a1a1a. Good.

We might also want to set the background of the hero section? But we can't target it because we only have .col-lg-7. So no.

Let's ensure the `padding: var(--space-md) !important;` is exactly there. We will put it as the first declaration, then add others.

Now, output.

But before finalizing, let's double-check the constraints:

- "All color values: background, color, border-color, fill, stroke, outline-color" — we changed color and background-color.
- "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" — we added multi-layer box-shadow.
- "text-shadow" — we added text-shadow.
- "border-radius (visual rounding only)" — we added border-radius.
- "transition timing, easing, duration" — we added transition.
- "filter, backdrop-filter" — not used.
- "opacity" — not used.
- "outline styles" — not used.
- "border-color and border-style" — not used.
- "caret-color, accent-color" — not used.
- "CSS custom properties (--color-*, --shadow-*) values" — not used.

We are within allowed changes.

We haven't changed any forbidden properties: display, position, etc. font-size and text-align unchanged. padding unchanged. Good.

We need to output only the CSS, no markdown. So final answer should be the CSS text.

Let's write it elegantly.

One thought: Should we add `box-shadow` to the hero text container? Maybe not, as it might look weird. We could add a subtle text-shadow.

Also, for the badge, border-radius: 12px is medium radius. Good.

For the cards, border-radius: 14px. Good.

Multi-layer shadow for cards: `box-shadow: 0 0 24px rgba(196, 69, 54, 0.12), 0 8px 20px rgba(26, 26, 26, 0.08);` This has a glow and a soft drop shadow. Good.

Could we add a subtle glow to the badge: `0 0 24px rgba(196, 69, 54, 0.4), 0 4px 12px rgba(196, 69, 54, 0.25)` for multi-layer. Let's do that.

So badge box-shadow: `0 0 24px rgba(196, 69, 54, 0.4), 0 4px 16px rgba(196, 69, 54,