<!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}}">
    <meta name="author" content="{{htmlEscape .AuthorName}}">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="{{htmlEscape .Canonical}}">

    <meta property="og:type" content="article">
    <meta property="og:title" content="{{htmlEscape .Title}}">
    <meta property="og:description" content="{{htmlEscape .Description}}">
    <meta property="og:url" content="{{htmlEscape .Canonical}}">
    <meta property="og:site_name" content="{{htmlEscape .SiteName}}">
    {{if .Images}}
    <meta property="og:image" content="{{htmlEscape .MainImage.ImageURL}}">
    {{end}}
    <meta property="article:published_time" content="{{htmlEscape .CreatedAt}}">
    <meta property="article:author" content="{{htmlEscape .AuthorName}}">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{htmlEscape .Title}}">
    <meta name="twitter:description" content="{{htmlEscape .Description}}">
    {{if .Images}}
    <meta name="twitter:image" content="{{htmlEscape .MainImage.ImageURL}}">
    {{end}}

    <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=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&display=swap" rel="stylesheet">
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        html{-webkit-text-size-adjust:100%}
        body{font-family:'Newsreader',Georgia,'Times New Roman',serif;background:#FBF7F0;color:#241F19;line-height:1.82;font-size:1.12rem}
        a{color:#241F19;text-decoration:underline;text-decoration-color:#B3552F;text-underline-offset:3px;transition:color .2s}
        a:hover{color:#B3552F}
        a:focus-visible{outline:2px solid #B3552F;outline-offset:3px}

        .ip-wrap{max-width:820px;margin:0 auto;padding:0 24px}

        .ip-masthead{border-bottom:3px double #241F19;padding:26px 0 20px}
        .ip-masthead-inner{max-width:820px;margin:0 auto;padding:0 24px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
        .ip-brand{font-size:1.35rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#241F19}
        .ip-brand:hover{color:#B3552F}
        .ip-date{font-variant:small-caps;letter-spacing:.12em;font-size:.92rem;color:#6B6156}

        .ip-headline{padding:56px 0 8px}
        .ip-kicker{font-variant:small-caps;letter-spacing:.18em;font-size:.88rem;color:#B3552F;margin-bottom:14px}
        .ip-headline h1{font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.12;font-weight:700;letter-spacing:-.015em}
        .ip-sub{margin-top:18px;padding-bottom:22px;border-bottom:1px solid #E4DCCB;display:flex;flex-wrap:wrap;gap:8px 22px;color:#6B6156;font-size:.96rem;font-variant:small-caps;letter-spacing:.08em}

        article{padding:36px 0 16px;max-width:680px}
        article p{margin:0 0 1.4em}
        article>div>p:first-of-type::first-letter{float:left;font-size:3.6em;line-height:.82;padding:6px 12px 0 0;color:#B3552F;font-weight:700}
        article h2{font-size:1.72rem;font-weight:700;margin:2em 0 .7em;line-height:1.25}
        article h3{font-size:1.32rem;font-weight:600;margin:1.7em 0 .55em}
        article ul,article ol{margin:0 0 1.4em 1.35em}
        article li{margin:.5em 0}
        article blockquote{margin:2.1em 0;padding:4px 0 4px 26px;border-left:3px solid #B3552F;font-style:italic;color:#4A4238}
        article table{width:100%;border-collapse:collapse;margin:2.1em 0;font-size:.97rem}
        article th,article td{border:1px solid #D8CEBB;padding:11px 14px;text-align:left}
        article th{background:#F2EADA;font-weight:600}

        .ip-figure{margin:2.5em 0;padding:14px 0;border-top:1px solid #D8CEBB;border-bottom:1px solid #D8CEBB}
        .ip-figure img{width:100%;height:auto;display:block}
        .ip-figure figcaption{margin-top:12px;font-size:.88rem;color:#6B6156;font-style:italic;line-height:1.55}

        .ip-ads{margin:2.2em 0;text-align:center;max-width:680px}

        .ip-related{border-top:3px double #241F19;margin-top:42px;padding:38px 0 10px}
        .ip-related h4{font-variant:small-caps;letter-spacing:.16em;font-size:1.02rem;margin-bottom:20px}
        .ip-related ul{list-style:none;column-count:2;column-gap:44px}
        .ip-related li{break-inside:avoid;padding:11px 0;border-bottom:1px solid #E4DCCB}
        .ip-related li a{font-size:1.05rem;text-decoration:none;font-weight:500}
        .ip-related li a:hover{text-decoration:underline;text-decoration-color:#B3552F}

        .ip-footer{border-top:1px solid #D8CEBB;margin-top:52px;padding:30px 0 46px;color:#6B6156;font-size:.92rem}

        @media (max-width:640px){
            .ip-headline{padding:38px 0 4px}
            .ip-masthead-inner{flex-direction:column;gap:6px}
            .ip-related ul{column-count:1}
            article>div>p:first-of-type::first-letter{font-size:3em;padding-right:10px}
        }
        @media (prefers-reduced-motion:reduce){
            *{transition:none!important}
        }
    </style>
    {{safe .InjectHeader}}
</head>
<body>
    <nav class="ip-masthead" aria-label="Site">
        <div class="ip-masthead-inner">
            <a href="/">{{htmlEscape .SiteName}}</a>
            <span class="ip-date">{{htmlEscape .Date}}</span>
        </div>
    </nav>

    <header class="ip-headline ip-wrap">
        <div class="ip-kicker">Article</div>
        <h1>{{htmlEscape .Title}}</h1>
        <div class="ip-sub">
            <span>{{htmlEscape .AuthorName}}</span>
            <span>{{htmlEscape .Date}}</span>
        </div>
    </header>

    <main class="ip-wrap">
        {{if .InjectAds}}<div class="ip-ads">{{safe .InjectAds}}</div>{{end}}
        <article>
            {{renderCompleteArticle .AIBlocks .Images .InjectAds "ink-paper"}}
        </article>

        {{if .HasRelated}}
        <section class="ip-related" aria-label="Related articles">
            <h4>Related Articles</h4>
            <ul>
                {{range (truncateArticles .RelatedArticles 10)}}
                <li><a href="{{htmlEscape .Slug}}.html">{{htmlEscape .Keyword}}</a></li>
                {{end}}
            </ul>
        </section>
        {{end}}
    </main>

    <footer class="ip-footer">
        <div class="ip-wrap">
            <p>&copy; 2026 {{htmlEscape .SiteName}}. All rights reserved.</p>
        </div>
        {{safe .InjectFooter}}
    </footer>
</body>
</html>
