{{ define "main" }}
{{ partial "page-heading.html" . }}
<div class="brand-kit wrap">
  <section class="brand-download">
    <div><span class="eyebrow">Start here</span><h2>Everything in one folder.</h2><p>Download the kit, unzip it, and open <code>START-HERE.html</code> for an offline asset catalog. SVGs stay sharp at any size; PNGs are ready to drop into a profile, README, slide, or post.</p></div>
    <a class="button primary" href="{{ "brand/nanolathe-brand-kit.zip" | relURL }}" download>Download the brand kit <span aria-hidden="true">↓</span></a>
  </section>
  <nav class="brand-section-nav" aria-label="Brand guide sections"><a href="#readme-header">README header</a><a href="#logos">Logos</a><a href="#colors">Colors</a><a href="#typography">Typography</a><a href="#icons">Icons</a><a href="#creating">Create something new</a></nav>
  <section class="brand-section" id="readme-header">
    <div class="section-heading"><div><span class="eyebrow">For the repository</span><h2>An introduction worth building.</h2></div><p>A new fabrication scene and the exact Nanolathe wordmark. Ready to use at the top of the engine README.</p></div>
    <img class="brand-banner" src="{{ "brand/readme-header.webp" | relURL }}" alt="Nanolathe — Open-source 2.5D RTS engine. Original concept artwork of a reactor core assembling from a green nanoframe." width="2048" height="768" loading="lazy">
    <p class="brand-note"><a href="{{ "brand/readme-header.png" | relURL }}" download>PNG ↓</a> · <a href="{{ "brand/readme-header.webp" | relURL }}" download>WebP ↓</a> · <a href="{{ "brand/readme-header.svg" | relURL }}" download>Editable SVG ↓</a> · <a href="{{ "brand/README_HEADER.md" | relURL }}" download>Usage and source details ↓</a></p>
    <div class="command-panel"><div class="command-title">Paste into the engine README<button class="copy-button" data-copy="readme-header-markdown">Copy Markdown</button></div><pre><code id="readme-header-markdown">[![Nanolathe — Open-source 2.5D RTS engine](https://nanolathe.gg/brand/readme-header.png)](https://nanolathe.gg/)</code></pre></div>
  </section>
  <section class="brand-section" id="logos"><div class="section-heading"><div><span class="eyebrow">Identity</span><h2>One mark. Room to adapt.</h2></div><p>Keep the segmented N and its assembly particles together. Choose the variant for your background.</p></div>
    <div class="brand-assets">{{ range hugo.Data.brand.assets }}<article class="brand-asset"><div class="brand-asset-preview{{ if or (eq .file "wordmark-light") (eq .file "wordmark-dark") (eq .file "mark-dark") (eq .file "avatar-light") }} on-light{{ end }}"><img src="{{ printf "brand/%s.svg" .file | relURL }}" alt="{{ .name }}" loading="lazy"></div><div class="brand-asset-info"><h3>{{ .name }}</h3><p>{{ .description }}</p><div><a href="{{ printf "brand/%s.svg" .file | relURL }}" download>SVG ↓</a><a href="{{ printf "brand/%s.png" .file | relURL }}" download>PNG ↓</a></div></div></article>{{ end }}</div>
    <p class="brand-note">Also included: 16, 32, and 48 px favicons, an ICO, a 180 px Apple touch icon, and a 1024 px avatar. Use the <a href="{{ "brand/GUIDE.md" | relURL }}" download>design guide</a> for sizing and clear space.</p>
  </section>
  <section class="brand-section" id="colors"><div class="section-heading"><div><span class="eyebrow">Palette</span><h2>Green builds. Amber guides.</h2></div><p>Nano green anchors the identity. Foundry amber brings warmth to labels and supporting actions. Charcoal and steel keep the page grounded.</p></div>
    <div class="brand-swatches">{{ range hugo.Data.brand.colors }}{{ if .featured }}<article><div class="swatch" style="background-color: {{ .hex | safeCSS }}" aria-hidden="true"></div><h3>{{ .name }}</h3><p>{{ .role }}</p><div class="swatch-value"><code id="color-{{ .token }}">{{ .hex }}</code><button class="copy-button" data-copy="color-{{ .token }}">Copy hex</button></div></article>{{ end }}{{ end }}</div>
    <p class="brand-note">Take the full palette with you: <a href="{{ "brand/tokens.css" | relURL }}" download>CSS variables ↓</a> · <a href="{{ "brand/tokens.json" | relURL }}" download>JSON tokens ↓</a></p>
  </section>
  <section class="brand-section" id="typography"><span class="eyebrow">Typography</span><h2>Industrial headings. Comfortable reading.</h2><div class="type-specimens">
    {{ range slice "display" "body" "mono" }}{{ $font := index hugo.Data.brand.fonts . }}<article><div class="type-meta"><h3>{{ $font.name }}</h3><p>{{ $font.use }}<br>Weight {{ $font.weight }}</p></div><div class="type-sample type-{{ . }}">{{ if eq . "display" }}Build something worth keeping.{{ else if eq . "body" }}A familiar battlefield, with every moving part explained.{{ else }}go run ./cmd/nanolathe{{ end }}</div></article>{{ end }}
    </div><p class="brand-note"><a href="{{ "fonts/chakra-petch-semibold.ttf" | relURL }}" download>Download Chakra Petch SemiBold ↓</a> · <a href="{{ "fonts/OFL.txt" | relURL }}">Font license</a>. Body and code text use system fonts. The SVG wordmarks have outlined lettering and need no installed font.</p>
  </section>
  <section class="brand-section" id="icons"><span class="eyebrow">Interface essentials</span><h2>A small, consistent icon set.</h2><p>24 px grid, 1.6 px strokes, square line ends. Each SVG uses <code>currentColor</code> when placed inline.</p><div class="brand-icons">{{ range hugo.Data.brand.icons }}<a href="{{ printf "brand/icons/%s.svg" . | relURL }}" download><span class="brand-icon" aria-hidden="true">{{ os.ReadFile (printf "static/brand/icons/%s.svg" .) | safeHTML }}</span><span>{{ replace . "-" " " }}</span><span aria-hidden="true">↓</span></a>{{ end }}</div></section>
  <section class="brand-section" id="creating"><div class="section-heading"><div><span class="eyebrow">Make it yours</span><h2>A useful starting point for the next thing.</h2></div></div><div class="brand-guides">
    <article><span class="eyebrow">01 / Design language</span><h3>The rules behind the look.</h3><p>Color roles, logo spacing, typography, tone, and accessibility. Share this with a designer or an agent.</p><a class="text-link" href="{{ "brand/GUIDE.md" | relURL }}" download>Download the guide ↓</a></article>
    <article><span class="eyebrow">02 / Original artwork</span><h3>Prompts that carry the style.</h3><p>A reusable style block, scene briefs, and editing prompts. Pair them with the reference illustration included in the kit.</p><a class="text-link" href="{{ "brand/ARTWORK_PROMPTS.md" | relURL }}" download>Download the prompts ↓</a></article>
    <article><span class="eyebrow">03 / New pages</span><h3>Patterns you can build from.</h3><p>Hugo examples for layouts, sections, buttons, and documentation. Reuse the components and tokens already in the site.</p><a class="text-link" href="{{ "brand/PAGE_PATTERNS.md" | relURL }}" download>Download the page patterns ↓</a></article>
    </div><div class="command-panel"><div class="command-title">A brief for your next task<button class="copy-button" data-copy="brand-brief">Copy brief</button></div><pre><code id="brand-brief">Use the Nanolathe brand kit. Read brand/GUIDE.md first, then brand/ARTWORK_PROMPTS.md for artwork or brand/PAGE_PATTERNS.md for a page. Reuse the supplied logo assets and color tokens. Create: [describe the asset, audience, placement, and dimensions].</code></pre></div>
    <p class="brand-note">Website code and original brand geometry are MIT licensed. Keep the bundled font license with the font. The construction illustration is original concept artwork, not a game screenshot. <a href="{{ site.Params.websiteRepo }}/blob/main/ASSETS.md">Asset provenance ↗</a></p>
  </section>
</div>
{{ end }}