<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{htmlEscape .Title}}</title>
    <meta name="description" content="{{htmlEscape .Description}}">
    <link rel="canonical" href="{{htmlEscape .Canonical}}">
    <script type="application/ld+json">{{safe .Schema}}</script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Space Grotesk', 'Arial', sans-serif;
            background: #f0f0f0;
            color: #111;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
        a:hover { background: #111; color: #f0f0f0; }

        .br-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            min-height: 100vh;
        }

        .br-header {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            border-bottom: 4px solid #111;
        }
        .br-header-brand {
            grid-column: 1 / 5;
            padding: 20px 24px;
            border-right: 4px solid #111;
            display: flex;
            align-items: center;
        }
        .br-header-brand h2 {
            font-family: 'Space Mono', monospace;
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .br-header-title {
            grid-column: 5 / 11;
            padding: 20px 24px;
            border-right: 4px solid #111;
        }
        .br-header-meta {
            grid-column: 11 / 13;
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-family: 'Space Mono', monospace;
            font-size: 0.7rem;
            text-transform: uppercase;
            text-align: right;
        }
        .br-header-meta .date { font-weight: 700; }
        .br-header-meta .tag {
            margin-top: 4px;
            background: #111;
            color: #f0f0f0;
            padding: 2px 8px;
            display: inline-block;
            align-self: flex-end;
        }

        .br-hero {
            grid-column: 1 / -1;
            padding: 60px 48px 48px;
            border-bottom: 4px solid #111;
        }
        .br-hero-category {
            font-family: 'Space Mono', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 16px;
            display: inline-block;
            background: #111;
            color: #f0f0f0;
            padding: 4px 12px;
        }
        .br-hero h1 {
            font-size: clamp(2.2rem, 7vw, 4.5rem);
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.04em;
            text-transform: uppercase;
            max-width: 900px;
        }
        .br-hero-line {
            width: 100%;
            height: 4px;
            background: #111;
            margin: 24px 0;
        }
        .br-hero-byline {
            font-family: 'Space Mono', monospace;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #555;
        }

        .br-main {
            grid-column: 1 / 9;
            border-right: 4px solid #111;
        }
        .br-article {
            padding: 40px 48px;
        }
        .br-prose { margin-bottom: 20px; }
        .br-prose p { font-size: 1rem; color: #222; line-height: 1.75; }
        .br-article h2 {
            font-size: 1.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            margin: 2.5rem 0 1rem;
            padding: 8px 0;
            border-top: 4px solid #111;
            border-bottom: 1px solid #111;
        }
        .br-article h3 {
            font-size: 1.3rem;
            font-weight: 700;
            margin: 2rem 0 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        .br-article table {
            width: 100%;
            border-collapse: collapse;
            margin: 24px 0;
            font-size: 0.88rem;
            border: 3px solid #111;
        }
        .br-article th {
            background: #111;
            color: #f0f0f0;
            padding: 12px 16px;
            text-align: left;
            font-weight: 700;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-family: 'Space Mono', monospace;
        }
        .br-article td {
            padding: 12px 16px;
            border: 1px solid #ddd;
        }
        .br-article tr:nth-child(even) { background: #e8e8e8; }

        .br-figure {
            margin: 28px 0;
            border: 3px solid #111;
        }
        .br-figure img { width: 100%; display: block; }
        .br-figure figcaption {
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 10px 16px;
            background: #111;
            color: #f0f0f0;
        }

        .br-ads { margin: 28px 0; text-align: center; }

        .br-aside {
            grid-column: 9 / 13;
            padding: 40px 24px;
        }
        .br-aside-block {
            margin-bottom: 32px;
            padding-bottom: 24px;
            border-bottom: 4px solid #111;
        }
        .br-aside-block h4 {
            font-family: 'Space Mono', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            background: #111;
            color: #f0f0f0;
            padding: 8px 12px;
            margin-bottom: 16px;
        }
        .br-aside-list { list-style: none; }
        .br-aside-list li {
            margin-bottom: 0;
            border-bottom: 1px solid #ccc;
        }
        .br-aside-list li a {
            display: block;
            padding: 12px 0;
            font-size: 0.85rem;
            font-weight: 500;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            transition: all 0.1s;
        }
        .br-aside-list li a::before {
            content: '→ ';
            font-family: 'Space Mono', monospace;
            font-weight: 700;
        }
        .br-aside-list li a:hover {
            background: #111;
            color: #f0f0f0;
            padding-left: 12px;
        }

        .br-footer {
            grid-column: 1 / -1;
            background: #111;
            color: #888;
            padding: 32px 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .br-footer strong { color: #f0f0f0; }

        @media (max-width: 900px) {
            .br-header { grid-template-columns: 1fr; }
            .br-header-brand { grid-column: 1; border-right: none; border-bottom: 4px solid #111; }
            .br-header-title { grid-column: 1; border-right: none; border-bottom: 4px solid #111; }
            .br-header-meta { grid-column: 1; text-align: left; flex-direction: row; gap: 12px; }
            .br-main { grid-column: 1 / -1; border-right: none; }
            .br-aside { grid-column: 1 / -1; border-top: 4px solid #111; }
            .br-hero { padding: 40px 24px 36px; }
            .br-article { padding: 32px 24px; }
            .br-aside { padding: 32px 24px; }
            .br-footer { flex-direction: column; gap: 8px; text-align: center; padding: 24px; }
        }
        @media (max-width: 600px) {
            .br-hero h1 { font-size: 1.8rem; }
            .br-article h2 { font-size: 1.3rem; }
        }
    </style>
    {{safe .InjectHeader}}
</head>
<body>
    <div class="br-grid">
        <header class="br-header">
            <div class="br-header-brand"><h2>{{htmlEscape .SiteName}}</h2></div>
            <div class="br-header-title"></div>
            <div class="br-header-meta">
                <span class="date">{{htmlEscape .Date}}</span>
                <span class="tag">RAW</span>
            </div>
        </header>
        <section class="br-hero">
            <div class="br-hero-category">Article</div>
            <h1>{{htmlEscape .Title}}</h1>
            <div class="br-hero-line"></div>
            <div class="br-hero-byline">{{htmlEscape .AuthorName}} / {{htmlEscape .Date}}</div>
        </section>
        <main class="br-main">
            {{if .InjectAds}}<div class="br-ads">{{safe .InjectAds}}</div>{{end}}
            <div class="br-article">
                {{renderCompleteArticle .AIBlocks .Images .InjectAds "brutalist"}}
            </div>
        </main>
        <aside class="br-aside">
            {{if .HasRelated}}
            <div class="br-aside-block">
                <h4>Related</h4>
                <ul class="br-aside-list">
                    {{range (truncateArticles .RelatedArticles 10)}}
                    <li><a href="{{htmlEscape .Slug}}.html">{{htmlEscape .Keyword}}</a></li>
                    {{end}}
                </ul>
            </div>
            {{end}}
            {{if .InjectAds}}<div class="br-aside-block">{{safe .InjectAds}}</div>{{end}}
        </aside>
        <footer class="br-footer">
            <span><strong>{{htmlEscape .SiteName}}</strong></span>
            <span>&copy; 2026. No rights reserved.</span>
            {{safe .InjectFooter}}
        </footer>
    </div>
</body>
</html>