<!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=Quicksand:wght@500;600;700&display=swap" rel="stylesheet">
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        html{-webkit-text-size-adjust:100%}
        body{font-family:'Quicksand',-apple-system,BlinkMacSystemFont,sans-serif;background:#FFF6E9;color:#3A2A22;line-height:1.8;font-size:1.04rem}
        a{color:#0F5F5A;text-decoration:none;border-bottom:2px solid rgba(15,95,90,.28);transition:color .2s,border-color .2s}
        a:hover{color:#FF6B57;border-bottom-color:#FF6B57}
        a:focus-visible{outline:3px solid #FF6B57;outline-offset:3px;border-radius:4px}

        .pp-wrap{max-width:780px;margin:0 auto;padding:0 22px}

        .pp-top{padding:20px 0}
        .pp-top-inner{max-width:780px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
        .pp-brand{font-weight:700;font-size:1.18rem;letter-spacing:.01em;color:#3A2A22;text-decoration:none;border-bottom:none}
        .pp-brand:hover{color:#FF6B57}
        .pp-chip{display:inline-block;background:#FFE1D6;color:#8A3A28;font-size:.82rem;font-weight:700;letter-spacing:.04em;padding:8px 16px;border-radius:14px}

        .pp-hero{padding:38px 0 10px}
        .pp-hero-card{background:#FFFFFF;border-radius:24px;padding:clamp(28px,5vw,52px);box-shadow:0 12px 32px rgba(255,107,87,.12);border:2px solid #FFE1D6}
        .pp-hero h1{font-size:clamp(1.85rem,4.8vw,2.9rem);line-height:1.16;font-weight:700;letter-spacing:-.015em}
        .pp-accent{width:84px;height:8px;background:#FF6B57;border-radius:4px;margin:24px 0}
        .pp-byline{display:flex;flex-wrap:wrap;gap:8px 22px;color:#7A5C4E;font-size:.94rem;font-weight:600}

        article{padding:30px 0 18px}
        article p{margin:0 0 1.35em}
        article h2{display:inline-block;font-size:1.58rem;font-weight:700;margin:2em 0 .75em;line-height:1.28;border-bottom:6px solid #FFB3A1;padding-bottom:2px}
        article h3{font-size:1.24rem;font-weight:700;margin:1.7em 0 .55em;color:#0F5F5A}
        article ul,article ol{margin:0 0 1.35em 1.3em}
        article li{margin:.5em 0}
        article blockquote{margin:2em 0;padding:18px 24px;background:#FFF0E8;border-radius:18px;border-left:6px solid #FF6B57;font-style:italic}
        article table{width:100%;border-collapse:separate;border-spacing:0;margin:2em 0;font-size:.96rem;border-radius:16px;overflow:hidden;border:2px solid #FFE1D6}
        article th,article td{padding:12px 15px;text-align:left;border-bottom:1px solid #FFE1D6}
        article th{background:#FFE1D6;color:#8A3A28;font-weight:700}
        article tr:last-child td{border-bottom:none}

        .pp-figure{margin:2.3em 0}
        .pp-figure img{width:100%;height:auto;display:block;border-radius:20px;box-shadow:0 10px 26px rgba(58,42,34,.12)}
        .pp-figure figcaption{margin-top:11px;font-size:.87rem;color:#7A5C4E;font-weight:600;text-align:center}

        .pp-ads{margin:2.2em 0;text-align:center}

        .pp-related{margin-top:44px;background:#FFFFFF;border-radius:24px;border:2px solid #FFE1D6;padding:clamp(24px,4vw,40px)}
        .pp-related h4{font-size:1.22rem;font-weight:700;margin-bottom:20px}
        .pp-related ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
        .pp-related li a{display:block;background:#FFF6E9;border-radius:16px;padding:15px 18px;font-weight:600;border-bottom:none;transition:transform .18s,background .18s,color .18s}
        .pp-related li a:hover{background:#FF6B57;color:#3A2A22;transform:translateY(-3px)}
        .pp-related li a:focus-visible{outline:3px solid #0F5F5A}

        .pp-footer{margin-top:50px;padding:30px 0 46px;color:#7A5C4E;font-size:.9rem;text-align:center}

        @media (max-width:640px){
            .pp-top-inner{flex-direction:column;align-items:flex-start;gap:10px}
            .pp-related ul{grid-template-columns:1fr}
        }
        @media (prefers-reduced-motion:reduce){
            *{transition:none!important}
        }
    </style>
    {{safe .InjectHeader}}
</head>
<body>
    <nav class="pp-top" aria-label="Site">
        <div class="pp-top-inner">
            <a href="/">{{htmlEscape .SiteName}}</a>
            <span class="pp-chip">{{htmlEscape .Date}}</span>
        </div>
    </nav>

    <header class="pp-hero pp-wrap">
        <div class="pp-hero-card">
            <h1>{{htmlEscape .Title}}</h1>
            <div class="pp-accent" role="presentation"></div>
            <div class="pp-byline">
                <span>{{htmlEscape .AuthorName}}</span>
                <span>{{htmlEscape .Date}}</span>
            </div>
        </div>
    </header>

    <main class="pp-wrap">
        {{if .InjectAds}}<div class="pp-ads">{{safe .InjectAds}}</div>{{end}}
        <article>
            {{renderCompleteArticle .AIBlocks .Images .InjectAds "playful-pop"}}
        </article>

        {{if .HasRelated}}
        <section class="pp-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="pp-footer">
        <div class="pp-wrap">
            <p>&copy; 2026 {{htmlEscape .SiteName}}. All rights reserved.</p>
        </div>
        {{safe .InjectFooter}}
    </footer>
</body>
</html>
