:root {
    color-scheme: light;
    --frontend-bg: #f7efe5;
    --frontend-surface: rgba(255, 255, 255, .78);
    --frontend-border: rgba(199, 107, 41, .14);
    --frontend-text: #2f1f17;
    --frontend-muted: #71594d;
    --frontend-brand: #c76b29;
    --frontend-brand-deep: #8d4618;
    --frontend-ring: rgba(199, 107, 41, .22);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    padding: 24px;
    color: var(--frontend-text);
    font: 16px/1.7 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at top left, rgba(199, 107, 41, .18), transparent 32%),
        radial-gradient(circle at bottom right, rgba(141, 70, 24, .18), transparent 28%),
        linear-gradient(135deg, #fff7ef 0%, var(--frontend-bg) 55%, #f3e4d6 100%);
}

.frontend-shell {
    position: relative;
    width: min(960px, 100%);
    margin: 0 auto;
    padding: 52px clamp(24px, 6vw, 64px);
    overflow: hidden;
    background: var(--frontend-surface);
    border: 1px solid var(--frontend-border);
    border-radius: 28px;
    box-shadow: 0 24px 80px rgba(72, 38, 18, .12);
    backdrop-filter: blur(18px);
}

.frontend-shell::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -90px;
    right: -70px;
    border-radius: 999px;
    background: var(--frontend-ring);
}

.frontend-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--frontend-brand-deep);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--frontend-border);
    border-radius: 999px;
}

.frontend-badge span { width: 9px; height: 9px; background: var(--frontend-brand); border-radius: 50%; }
.frontend-title { position: relative; margin: 24px 0; font-size: clamp(34px, 6vw, 60px); line-height: 1.08; }
.frontend-featured-image { display: block; width: 100%; max-height: 460px; margin: 0 0 30px; object-fit: cover; border-radius: 18px; }
.frontend-content { position: relative; color: var(--frontend-muted); font-size: 17px; }
.frontend-content img { max-width: 100%; height: auto; }
.frontend-content a { color: var(--frontend-brand-deep); }
.legal-links { margin-top: 12px; }
.legal-links a { margin: 0 8px; color: var(--frontend-brand-deep); }

@media (max-width: 640px) {
    body { padding: 16px; }
    .frontend-shell { padding: 36px 22px; border-radius: 22px; }
}