fix: remove obsolete posts

fix(style): single post tags listing
chore: consolidate the-reliquary-engine under 2026-09-13
2026-09-13 21:08:41 +02:00 · 2026-09-13 18:41:08 +02:00 · 2026-09-13 17:58:10 +02:00 · 2026-09-13 17:57:30 +02:00 · 2026-09-13 17:55:18 +02:00 · 2026-09-13 17:52:09 +02:00
72 changed files with 2476 additions and 1712 deletions
@@ -0,0 +1,5 @@
+public/
+resources/
+node_modules/
+.hugo_build.lock
+static/
@@ -0,0 +1,32 @@
+{
+  "plugins": ["prettier-plugin-go-template", "prettier-plugin-toml"],
+  "overrides": [
+    {
+      "files": ["layouts/**/*.html", "themes/**/*.html"],
+      "options": {
+        "parser": "go-template",
+        "goTemplateBracketSpacing": true,
+        "printWidth": 120
+      }
+    },
+    {
+      "files": "*.toml",
+      "options": {
+        "parser": "toml"
+      }
+    },
+    {
+      "files": "*.css",
+      "options": {
+        "printWidth": 100,
+        "singleQuote": false
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "proseWrap": "preserve"
+      }
+    }
+  ]
+}
@@ -1,16 +1,20 @@
 # Stage 1: Build
-FROM node:22-alpine AS builder
+# hugomods image bundles Hugo Extended + Node at matching, tested versions —
+# Hugo's css.TailwindCSS execs node_modules/.bin/tailwindcss during the build,
+# and pnpm-workspace.yaml's preferSymlinkedExecutables makes that a plain
+# symlink Hugo's exec-security check accepts (see layouts/partials/head.html).
+FROM hugomods/hugo:debian-node-0.165.0 AS builder

-# Install Hugo + FFmpeg (video compression)
-RUN apk add --no-cache hugo ffmpeg git
+# Install FFmpeg (video compression)
+RUN apt-get update && apt-get install -y --no-install-recommends ffmpeg && rm -rf /var/lib/apt/lists/*

 # Install pnpm
-RUN corepack enable && corepack prepare pnpm@latest --activate
+RUN npm install -g pnpm

 WORKDIR /app

 # Copy package files first (for layer caching)
-COPY package.json pnpm-lock.yaml ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 RUN pnpm install --frozen-lockfile

 # Copy source files
@@ -5,30 +5,31 @@
@source "../../content/**/*.md";
@source "../../assets/js/**/*.js";

+@custom-variant hover (&:hover);
+
 /* ── Design tokens — sneaker drop culture ────────────────────── */
@theme {
-
  /* Dark base — deep navy-black */
  --color-void: #050510;
-  --color-ink:       #09091A;
-  --color-concrete:  #0F0F22;
-  --color-zinc:      #1C1C38;
+  --color-ink: #09091a;
+  --color-concrete: #0f0f22;
+  --color-zinc: #1c1c38;
  --color-smoke: #383860;
-  --color-fog:       #6868A0;
-  --color-chalk:     #B8B8E0;
-  --color-paper:     #EEEEFF;
+  --color-fog: #6868a0;
+  --color-chalk: #b8b8e0;
+  --color-paper: #eeeeff;

  /* Gradient triad — pink → purple → ice */
-  --color-heat:      #FF1A8C;   /* hot pink — primary energy  */
-  --color-pulse:     #9B00FF;   /* electric purple — mid      */
-  --color-frost:     #00C8FF;   /* ice blue — cool accent     */
-  --color-ember:     #FF4455;   /* alert red                  */
-  --color-lime:      #1AFF8D;   /* acid lime — highlight      */
-  --color-stem:      #FF7A1A;   /* peony stem orange          */
+  --color-heat: #ff1a8c; /* hot pink — primary energy  */
+  --color-pulse: #9b00ff; /* electric purple — mid      */
+  --color-frost: #00c8ff; /* ice blue — cool accent     */
+  --color-ember: #ff4455; /* alert red                  */
+  --color-lime: #1aff8d; /* acid lime — highlight      */
+  --color-stem: #ff7a1a; /* peony stem orange          */

  /* Backward-compat aliases so existing templates still work */
  --color-gold: var(--color-heat);
-  --color-gold-dim:  #CC1570;
+  --color-gold-dim: #cc1570;
  --color-hot: var(--color-heat);
  --color-volt: var(--color-lime);
  --color-ice: var(--color-frost);
@@ -52,8 +53,14 @@

 /* ── Base ─────────────────────────────────────────────────────── */
@layer base {
-  *, *::before, *::after { box-sizing: border-box; }
-  [x-cloak] { display: none !important; }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  [x-cloak] {
+    display: none !important;
+  }

  html {
    background-color: var(--color-void);
@@ -66,9 +73,16 @@
    text-rendering: optimizeLegibility;
  }

-  body { min-height: 100vh; }
+  body {
+    min-height: 100vh;
+  }

-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
@@ -82,7 +96,12 @@
    transition: color 0.2s var(--ease-sharp);
  }

-  img, video { max-width: 100%; height: auto; display: block; }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }

  ::selection {
    background-color: var(--color-heat);
@@ -95,14 +114,20 @@
  }

  /* Gradient scrollbar */
-  ::-webkit-scrollbar         { width: 4px; height: 4px; }
-  ::-webkit-scrollbar-track   { background: var(--color-ink); }
-  ::-webkit-scrollbar-thumb   { background: linear-gradient(180deg, var(--color-heat), var(--color-frost)); }
+  ::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--color-ink);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, var(--color-heat), var(--color-frost));
+  }
 }

 /* ── Components ───────────────────────────────────────────────── */
@layer components {
-
  /* ── Gradient text ─────────────────────────────────────────── */
  .text-gradient {
    background: var(--color-heat);
@@ -113,7 +138,13 @@
  }

  .text-gradient-animated {
-    background: linear-gradient(90deg, var(--color-heat), var(--color-pulse), var(--color-frost), var(--color-heat));
+    background: linear-gradient(
+      90deg,
+      var(--color-heat),
+      var(--color-pulse),
+      var(--color-frost),
+      var(--color-heat)
+    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
@@ -165,23 +196,58 @@
    padding: 5px 16px;
    text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
-    transition: transform 0.15s var(--ease-bounce), filter 0.2s;
+    transition:
+      transform 0.15s var(--ease-bounce),
+      filter 0.2s;
  }

-  a.badge:hover { transform: skewX(-4deg) scale(1.06); filter: brightness(1.2); }
-  a.badge, a > .badge { cursor: pointer; }
+  a.badge:hover {
+    transform: skewX(-4deg) scale(1.06);
+    filter: brightness(1.2);
+  }
+  a.badge,
+  a > .badge {
+    cursor: pointer;
+  }

-  .badge-heat     { background: var(--color-heat);  color: #fff; }
-  .badge-pulse    { background: var(--color-pulse);  color: #fff; }
-  .badge-frost    { background: var(--color-frost);  color: var(--color-void); }
-  .badge-lime     { background: var(--color-lime);   color: var(--color-void); }
-  .badge-ember    { background: var(--color-ember);  color: #fff; }
-  .badge-stem     { background: var(--color-stem);   color: var(--color-void); }
+  .badge-heat {
+    background: var(--color-heat);
+    color: #fff;
+  }
+  .badge-pulse {
+    background: var(--color-pulse);
+    color: #fff;
+  }
+  .badge-frost {
+    background: var(--color-frost);
+    color: var(--color-void);
+  }
+  .badge-lime {
+    background: var(--color-lime);
+    color: var(--color-void);
+  }
+  .badge-ember {
+    background: var(--color-ember);
+    color: #fff;
+  }
+  .badge-stem {
+    background: var(--color-stem);
+    color: var(--color-void);
+  }

  /* Semantic aliases kept for template compat */
-  .badge-hot   { background: var(--color-heat);  color: #fff; }
-  .badge-volt  { background: var(--color-lime);  color: var(--color-void); }
-  .badge-ice   { background: var(--color-frost); color: var(--color-void); }
+  .badge-hot {
+    background: var(--color-heat);
+    color: #fff;
+  }
+  .badge-volt {
+    background: var(--color-lime);
+    color: var(--color-void);
+  }
+  .badge-ice {
+    background: var(--color-frost);
+    color: var(--color-void);
+  }

  .badge-gradient {
    background: var(--color-heat);
@@ -220,7 +286,7 @@

  /* shimmer sweep */
  .btn::before {
-    content: '';
+    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
@@ -236,11 +302,16 @@

  .btn:hover {
    transform: translateY(-2px);
-    box-shadow: 0 8px 32px rgba(255, 26, 140, 0.5),
+    box-shadow:
+      0 8px 32px rgba(255, 26, 140, 0.5),
      0 2px 8px rgba(155, 0, 255, 0.2);
  }
-  .btn:hover::before { transform: translateX(200%); }
-  .btn:active        { transform: translateY(0px); }
+  .btn:hover::before {
+    transform: translateX(200%);
+  }
+  .btn:active {
+    transform: translateY(0px);
+  }

  .btn-outline {
    background: transparent;
@@ -248,7 +319,9 @@
    color: var(--color-heat);
    clip-path: none;
  }
-  .btn-outline::before { display: none; }
+  .btn-outline::before {
+    display: none;
+  }
  .btn-outline:hover {
    background: var(--color-heat);
    color: #fff;
@@ -269,7 +342,9 @@
    color: var(--color-chalk);
    clip-path: none;
  }
-  .btn-ghost::before { display: none; }
+  .btn-ghost::before {
+    display: none;
+  }
  .btn-ghost:hover {
    border-color: var(--color-heat);
    color: var(--color-heat);
@@ -307,7 +382,7 @@

  /* gradient top bar */
  .card-comic::after {
-    content: '';
+    content: "";
    position: absolute;
    top: 0;
    left: 0;
@@ -329,20 +404,25 @@
      6px 6px 0 rgba(255, 26, 140, 0.22);
  }

-  .card-comic:hover::after { opacity: 1; }
+  .card-comic:hover::after {
+    opacity: 1;
+  }

  /* ── Isometric triangle grid — 3 sets of lines at 0° / 60° / -60°
     Creates an infinite isometric floor-tile illusion.
     Colors: heat (horizontal) · frost (60°) · pulse (-60°)
  ────────────────────────────────────────────────────────────── */
  .speed-lines {
-    background-image:
-      repeating-linear-gradient(
+    background-image: repeating-linear-gradient(
      -55deg,
-        rgba(255, 26, 140, 0.14) 0,    rgba(255, 26, 140, 0.14) 1px,
-        transparent                  1px, transparent              22px,
-        rgba(0, 200, 255, 0.08)    22px, rgba(0, 200, 255, 0.08) 23px,
-        transparent                 23px, transparent              44px
+      rgba(255, 26, 140, 0.14) 0,
+      rgba(255, 26, 140, 0.14) 1px,
+      transparent 1px,
+      transparent 22px,
+      rgba(0, 200, 255, 0.08) 22px,
+      rgba(0, 200, 255, 0.08) 23px,
+      transparent 23px,
+      transparent 44px
    );
  }

@@ -351,13 +431,17 @@
    background-image:
      repeating-linear-gradient(
        45deg,
-        rgba(255, 26, 140, 0.07) 0, rgba(255, 26, 140, 0.07) 1px,
-        transparent 1px, transparent 24px
+        rgba(255, 26, 140, 0.07) 0,
+        rgba(255, 26, 140, 0.07) 1px,
+        transparent 1px,
+        transparent 24px
      ),
      repeating-linear-gradient(
        -45deg,
-        rgba(0, 200, 255, 0.05) 0, rgba(0, 200, 255, 0.05) 1px,
-        transparent 1px, transparent 24px
+        rgba(0, 200, 255, 0.05) 0,
+        rgba(0, 200, 255, 0.05) 1px,
+        transparent 1px,
+        transparent 24px
      );
  }

@@ -366,8 +450,12 @@
    background-image:
      radial-gradient(circle, rgba(255, 26, 140, 0.09) 1px, transparent 1px),
      radial-gradient(circle, rgba(0, 200, 255, 0.06) 1px, transparent 1px);
-    background-size: 18px 18px, 29px 29px;
-    background-position: 0 0, 9px 9px;
+    background-size:
+      18px 18px,
+      29px 29px;
+    background-position:
+      0 0,
+      9px 9px;
  }

  /* ── Noise overlay ──────────────────────────────────────────── */
@@ -399,10 +487,15 @@
    white-space: nowrap;
    animation: marquee-scroll 32s linear infinite;
  }
-  .marquee-track:hover { animation-play-state: paused; }
+  .marquee-track:hover {
+    animation-play-state: paused;
+  }

  /* ── Section rules ──────────────────────────────────────────── */
-  .section-rule { border: none; border-top: 1px solid var(--color-zinc); }
+  .section-rule {
+    border: none;
+    border-top: 1px solid var(--color-zinc);
+  }

  .section-rule-electric {
    border: none;
@@ -419,9 +512,21 @@
  }

  /* ── Neon glow utilities ────────────────────────────────────── */
-  .neon-heat  { box-shadow: 0 0 24px rgba(255,  26, 140, 0.35), 0 0 60px rgba(255,  26, 140, 0.08); }
-  .neon-pulse { box-shadow: 0 0 24px rgba(155,   0, 255, 0.35), 0 0 60px rgba(155,   0, 255, 0.08); }
-  .neon-frost { box-shadow: 0 0 24px rgba(  0, 200, 255, 0.35), 0 0 60px rgba(  0, 200, 255, 0.08); }
+  .neon-heat {
+    box-shadow:
+      0 0 24px rgba(255, 26, 140, 0.35),
+      0 0 60px rgba(255, 26, 140, 0.08);
+  }
+  .neon-pulse {
+    box-shadow:
+      0 0 24px rgba(155, 0, 255, 0.35),
+      0 0 60px rgba(155, 0, 255, 0.08);
+  }
+  .neon-frost {
+    box-shadow:
+      0 0 24px rgba(0, 200, 255, 0.35),
+      0 0 60px rgba(0, 200, 255, 0.08);
+  }

  /* ── Prose editorial ────────────────────────────────────────── */
  .prose-editorial {
@@ -432,15 +537,25 @@
    max-width: 72ch;
  }

-  .prose-editorial > * + * { margin-top: 1.6em; }
+  .prose-editorial > * + * {
+    margin-top: 1.6em;
+  }

-  .prose-editorial strong { color: var(--color-paper); font-weight: 600; }
-  .prose-editorial em     { font-style: italic; color: var(--color-paper); }
+  .prose-editorial strong {
+    color: var(--color-paper);
+    font-weight: 600;
+  }
+  .prose-editorial em {
+    font-style: italic;
+    color: var(--color-paper);
+  }

  .prose-editorial a {
    color: var(--color-heat);
    border-bottom: 1px solid rgba(255, 26, 140, 0.35);
-    transition: border-color 0.2s, color 0.2s;
+    transition:
+      border-color 0.2s,
+      color 0.2s;
  }
  .prose-editorial a:hover {
    color: var(--color-frost);
@@ -457,7 +572,9 @@
    letter-spacing: 0.01em;
    line-height: 1.1;
  }
-  .prose-editorial blockquote p { margin: 0; }
+  .prose-editorial blockquote p {
+    margin: 0;
+  }

  .prose-editorial h2 {
    font-size: 2.5rem;
@@ -509,7 +626,9 @@
    background: linear-gradient(90deg, var(--color-heat), var(--color-pulse), var(--color-frost));
    box-shadow: 0 0 12px rgba(255, 26, 140, 0.6);
    z-index: 9999;
-    transition: width 0.4s var(--ease-out-expo), opacity 0.3s ease;
+    transition:
+      width 0.4s var(--ease-out-expo),
+      opacity 0.3s ease;
    width: 0;
    opacity: 0;
  }
@@ -517,62 +636,128 @@

 /* ── Utilities ────────────────────────────────────────────────── */
@layer utilities {
-
  .gutter-x {
    padding-left: clamp(1rem, 4vw, 3rem);
    padding-right: clamp(1rem, 4vw, 3rem);
  }

  /* Aspect ratios */
-  .aspect-editorial { aspect-ratio: 3 / 4; }
-  .aspect-cinema    { aspect-ratio: 21 / 9; }
-  .aspect-portrait  { aspect-ratio: 2 / 3; }
+  .aspect-editorial {
+    aspect-ratio: 3 / 4;
+  }
+  .aspect-cinema {
+    aspect-ratio: 21 / 9;
+  }
+  .aspect-portrait {
+    aspect-ratio: 2 / 3;
+  }

  /* Text wrapping */
-  .text-balance { text-wrap: balance; }
-  .text-pretty  { text-wrap: pretty; }
+  .text-balance {
+    text-wrap: balance;
+  }
+  .text-pretty {
+    text-wrap: pretty;
+  }

  /* Offset shadow */
-  .shadow-comic      { box-shadow: 5px 5px 0 var(--color-heat); }
-  .shadow-comic-hot  { box-shadow: 5px 5px 0 var(--color-heat); }
-  .shadow-comic-volt { box-shadow: 5px 5px 0 var(--color-lime); }
-  .shadow-comic-ice  { box-shadow: 5px 5px 0 var(--color-frost); }
+  .shadow-comic {
+    box-shadow: 5px 5px 0 var(--color-heat);
+  }
+  .shadow-comic-hot {
+    box-shadow: 5px 5px 0 var(--color-heat);
+  }
+  .shadow-comic-volt {
+    box-shadow: 5px 5px 0 var(--color-lime);
+  }
+  .shadow-comic-ice {
+    box-shadow: 5px 5px 0 var(--color-frost);
+  }

  /* Text stroke — hollow headline */
-  .text-stroke-gold  { -webkit-text-stroke: 1.5px var(--color-heat);  color: transparent; }
-  .text-stroke-paper { -webkit-text-stroke: 1.5px var(--color-paper); color: transparent; }
-  .text-stroke-heat  { -webkit-text-stroke: 1.5px var(--color-heat);  color: transparent; }
-  .text-stroke-frost { -webkit-text-stroke: 1.5px var(--color-frost); color: transparent; }
+  .text-stroke-gold {
+    -webkit-text-stroke: 1.5px var(--color-heat);
+    color: transparent;
+  }
+  .text-stroke-paper {
+    -webkit-text-stroke: 1.5px var(--color-paper);
+    color: transparent;
+  }
+  .text-stroke-heat {
+    -webkit-text-stroke: 1.5px var(--color-heat);
+    color: transparent;
+  }
+  .text-stroke-frost {
+    -webkit-text-stroke: 1.5px var(--color-frost);
+    color: transparent;
+  }

  /* Scrollbar hide */
-  .scrollbar-hide                    { scrollbar-width: none; -ms-overflow-style: none; }
-  .scrollbar-hide::-webkit-scrollbar { display: none; }
+  .scrollbar-hide {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 }

 /* ── Keyframes ────────────────────────────────────────────────── */
@keyframes gradient-shift {
-  0%   { background-position: 0%   50%; }
-  50%  { background-position: 100% 50%; }
-  100% { background-position: 0%   50%; }
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 }

@keyframes marquee-scroll {
-  to { transform: translateX(-50%); }
+  to {
+    transform: translateX(-50%);
+  }
 }

@keyframes scroll-line {
-  0%   { transform: translateY(-100%); opacity: 0; }
-  20%  { opacity: 1; }
-  80%  { opacity: 1; }
-  100% { transform: translateY(100%); opacity: 0; }
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
 }

 /* ── Logo glitch animation ───────────────────────────────────── */
@keyframes glitch-clip {
-  0%, 88%, 100% { transform: translate(0); clip-path: none; }
-  90%  { transform: translate(-3px, 1px);  clip-path: polygon(0 15%, 100% 15%, 100% 40%, 0 40%); }
-  92%  { transform: translate(3px, -1px);  clip-path: polygon(0 60%, 100% 60%, 100% 78%, 0 78%); }
-  94%  { transform: translate(0);          clip-path: none; }
+  0%,
+  88%,
+  100% {
+    transform: translate(0);
+    clip-path: none;
+  }
+  90% {
+    transform: translate(-3px, 1px);
+    clip-path: polygon(0 15%, 100% 15%, 100% 40%, 0 40%);
+  }
+  92% {
+    transform: translate(3px, -1px);
+    clip-path: polygon(0 60%, 100% 60%, 100% 78%, 0 78%);
+  }
+  94% {
+    transform: translate(0);
+    clip-path: none;
+  }
 }

 a:hover .logo-glitch {
@@ -591,15 +776,24 @@ footer .logo-img {
 }

@keyframes logo-float {
-  0%, 100% { transform: translateY(0);    filter: drop-shadow(0 0  8px rgba(255, 26, 140, 0.35)); }
-  50%       { transform: translateY(-4px); filter: drop-shadow(0 6px 14px rgba(255, 26, 140, 0.6)); }
+  0%,
+  100% {
+    transform: translateY(0);
+    filter: drop-shadow(0 0 8px rgba(255, 26, 140, 0.35));
+  }
+  50% {
+    transform: translateY(-4px);
+    filter: drop-shadow(0 6px 14px rgba(255, 26, 140, 0.6));
+  }
 }

 /* ── Nav & footer link hover polish ─────────────────────────── */

 /* Desktop nav links — lift + glow on hover */
 header nav a.label {
-  transition: color 0.2s var(--ease-sharp), transform 0.2s var(--ease-out-expo);
+  transition:
+    color 0.2s var(--ease-sharp),
+    transform 0.2s var(--ease-out-expo);
 }
 header nav a.label:hover {
  transform: translateY(-1px);
@@ -612,7 +806,9 @@ header nav a.label span {

 /* Footer links — subtle lift */
 footer nav a.label {
-  transition: color 0.2s var(--ease-sharp), transform 0.2s var(--ease-out-expo);
+  transition:
+    color 0.2s var(--ease-sharp),
+    transform 0.2s var(--ease-out-expo);
 }
 footer nav a.label:hover {
  transform: translateY(-1px);
@@ -636,10 +832,15 @@ footer nav a.label:hover svg {
 }

@keyframes page-out {
-  to { opacity: 0; transform: translateY(-10px); }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
 }

@keyframes page-in {
-  from { opacity: 0; transform: translateY(14px); }
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
 }
-
@@ -17,7 +17,9 @@
    bar.style.width = "100%";
    setTimeout(() => {
      bar.style.opacity = "0";
-      setTimeout(() => { bar.style.width = "0"; }, 350);
+      setTimeout(() => {
+        bar.style.width = "0";
+      }, 350);
    }, 150);
  });
 })();
@@ -37,9 +39,11 @@ function initLazyVideos(root) {
        observer.unobserve(video);
      });
    },
-    { rootMargin: "300px" }
+    { rootMargin: "300px" },
  );
-  (root || document).querySelectorAll("video[data-src]").forEach((v) => observer.observe(v));
+  (root || document)
+    .querySelectorAll("video[data-src]")
+    .forEach((v) => observer.observe(v));
 }

 initLazyVideos();
@@ -67,7 +71,9 @@ document.body.addEventListener("htmx:historyRestore", () => {
    bar.style.width = "100%";
    setTimeout(() => {
      bar.style.opacity = "0";
-      setTimeout(() => { bar.style.width = "0"; }, 350);
+      setTimeout(() => {
+        bar.style.width = "0";
+      }, 350);
    }, 150);
  }

@@ -81,4 +87,3 @@ document.body.addEventListener("htmx:historyRestore", () => {
  window.scrollTo({ top: 0, behavior: "instant" });
  window.dispatchEvent(new Event("scroll"));
 });
-
@@ -3,7 +3,7 @@ title: "About Pivoine"
 description: "A magazine dedicated to the intersection of artificial intelligence and aesthetic culture."
 ---

-*Pivoine* is an independent editorial project exploring how machine intelligence reshapes visual culture.
+_Pivoine_ is an independent editorial project exploring how machine intelligence reshapes visual culture.

 We publish editorial features, artist profiles, and critical essays about AI-generated art — approaching this emerging medium with the same rigour and aesthetic seriousness as any other.

@@ -13,7 +13,7 @@ The name comes from the French word for **peony** — a flower that is both extr

 ## What We Publish

-We are interested in the **editorial dimension** of AI image-making. Not the tools, not the prompts, not the speed records — but the *work* itself and the questions it raises about authorship, aesthetics, and what it means to make an image in an age when images are free.
+We are interested in the **editorial dimension** of AI image-making. Not the tools, not the prompts, not the speed records — but the _work_ itself and the questions it raises about authorship, aesthetics, and what it means to make an image in an age when images are free.

 Each feature is a collaboration between a human sensibility and a machine process. The artists and authors we publish treat the generator as a medium, not a shortcut.

@@ -1,14 +1,14 @@
 ---
 title: "Valknar"
 name: "Valknar"
-bio:    "Valknar treats diffusion models as a engine of contradiction — pitting the cute against the grotesque, the opulent against the decayed, and the familiar against the deeply wrong. The results are cinematic concept images that feel like stills from films that should not exist."
+bio: "Valknar builds cinematic AI concept art at the intersection of gothic darkness, mythological grandeur, and neon-soaked noir — images that feel like stills from films that were never made, but should have been."
 social:
  instagram: "valknarix"
  x: "valknar100"
 ---

-Valknar approaches AI generation as a collision course. The work takes familiar cultural touchstones — video game icons, children's characters, Renaissance still life — and forces them through genre frameworks they were never designed to survive: survival horror, Gigeresque biomechanics, neo-Tokyo neon, Burtonesque gothic.
+Valknar works at the intersection of the dark and the epic. The images move between worlds — candlelit vampire chambers and rain-slicked Neo-Tokyo streets, Norse battlefields at the hour the last warrior falls, ancient Japanese throne rooms suspended in a single moment of ceremony. Across all of it, the aesthetic constants are atmosphere and weight.

-The technique is less about coaxing beauty from the model and more about engineering productive discomfort. Vivid colour is deployed against desolation. Opulence is buried in decay. The cinematic framing is deliberate — wide shots, hero angles, macro details — borrowed from the language of film concept art and applied to subjects the camera would not normally linger on.
+Each scene is engineered with the specificity of a cinematographer's brief: lighting quality, lens choice, colour science, and the physical texture of materials described precisely enough that the model has no choice but to commit. The goal is never decoration — it is to make a still image feel like a held breath, a moment poised just before or just after something irreversible.

 Based in Stuttgart.
@@ -10,7 +10,7 @@ description: "Legal information and editorial responsibility."

 ## Editorial Policy

-*Pivoine* is an independent publication. All AI-generated images and videos published on this site are the creative work of the named authors using various generative AI tools. The editorial team curates, commissions, and publishes this work under the publication's name.
+_Pivoine_ is an independent publication. All AI-generated images and videos published on this site are the creative work of the named authors using various generative AI tools. The editorial team curates, commissions, and publishes this work under the publication's name.

 ## Copyright

@@ -1,19 +1,24 @@
 ---
 title: "The Pale Pour"
 description: "A skeletal Grim Reaper tends bar in a subterranean Gothic absinthe den, where the Green Fairy's bioluminescent fog coils between candlelit bottles and tarnished mirrors."
-date:        2026-05-07
+date: 2026-05-07T18:00:00+02:00
 author: "valknar"
 featured: true
 categories:
  - Dark
+  - Surrealist
 tags:
  - Grim Reaper
  - Absinthe
-  - Bar
+  - Speakeasy
  - The Green Fairy
-slug: pale-pour
+  - Gothic
+  - Victorian
+  - Macabre
+slug: the-pale-pour
 prompt:
-  scene: "A cinematic, wide-angle interior shot of a subterranean, rustic Gothic Absinthe bar. The atmosphere is thick with a swirling, ethereal green bioluminescent fog (\"The Green Fairy\"). In the center, a skeletal Grim Reaper stands behind a heavy, scarred oak bar, draped in tattered, ink-black hooded robes; his bony hands are delicately preparing a traditional absinthe drip over a silver slotted spoon and sugar cube."
+  scene: 'A cinematic, wide-angle interior shot of a subterranean, rustic Gothic Absinthe bar. The atmosphere is thick with a swirling, ethereal green bioluminescent fog ("The Green Fairy"). In the center, a skeletal Grim Reaper stands behind a heavy, scarred oak bar, draped in tattered, ink-black hooded robes; his bony hands are delicately preparing a traditional absinthe drip over a silver slotted spoon and sugar cube.'
  environment: "Vaulted stone ceilings with cracked ribs, dripping wax from oversized iron chandeliers, walls lined with dusty, unlabeled apothecary bottles and antique mirrors showing tarnished reflections. Plush, rotting emerald velvet barstools and flickering candlelight."
  style: "Moody chiaroscuro lighting, deep shadows contrasted with vibrant neon-emerald highlights. Art Nouveau accents, hyper-realistic textures of bone, aged wood, and etched glass. Dark Victorian aesthetic, macabre elegance, 8k resolution, photorealistic with a touch of oil painting gloom."
+  video: "The Reaper's skeletal right hand brings a long match — a single small orange flame — down to the absinthe-soaked sugar cube resting on the silver slotted spoon. A clean blue-gold flame catches immediately and burns steadily on the sugar. Caramelised sugar begins to drip slowly through the slots into the glass below, clouding the absinthe pale green. The green bioluminescent fog swirls gently as the firelight touches it. The Reaper is otherwise completely motionless. Camera holds static throughout."
 ---
@@ -0,0 +1,25 @@
+---
+title: "The Count's Chamber"
+description: "The room speaks before its master does — an ancient Gothic chamber of firelight and shadow, an armchair that still holds the warmth of centuries, and a wine glass of blood on a small table, patiently waiting."
+date: 2026-05-08T12:00:00+02:00
+author: "valknar"
+featured: false
+categories:
+  - Dark
+  - Gothic
+tags:
+  - Dracula
+  - Vampire
+  - Gothic
+  - Interior
+  - Atmospheric
+  - Horror
+  - Candlelight
+  - Victorian
+slug: the-counts-chamber
+prompt:
+  scene: "A grand, wide-angle establishing shot of Count Dracula's opulent private chamber — vast and magnificent, the full room revealed in breathtaking detail. The camera is pulled back to show the entire space: soaring vaulted ceilings of dressed stone, twenty feet high, hung with an enormous tattered chandelier of black iron and a hundred burnt-down black candles still smouldering. Dead centre of the room, angled toward a monumental double fireplace of carved obsidian and grey marble — large enough to stand inside — sits a throne-like armchair of deep burgundy leather and black wrought-iron rivets, its cushion subtly depressed. To its right, a small ornate side table holds a single crystal wine glass of deep crimson blood, an uncorked decanter, a withered black rose, and a pocket watch stopped at midnight. The room extends dramatically on all sides around this centrepiece."
+  environment: "The chamber is a palace of accumulated dark splendour: the walls are panelled in age-blackened oak to half-height, above which bare stone is hung with an overwhelming collection of enormous oil portraits in gilded frames — dozens of them, floor to ceiling, every painted eye subtly converging on the armchair. A library wall of floor-to-ceiling shelves groans under thousands of leather-bound tomes, accessible by a rolling iron ladder on a brass rail. Opposite, a series of three immense arched windows, each twelve feet tall, shuttered in iron — thin blades of cold blue moonlight falling in parallel stripes across the vast Persian rug below, a masterwork of burgundy, black and gold that covers the entire flagstone floor. A grand pipe organ of tarnished black metal occupies one corner, sheet music still on its stand. Suits of armour flank the fireplace. A writing desk of dark mahogany near the window is buried in maps, correspondence sealed with red wax, and quill pens in a silver stand. The grandfather clock in the far corner reads midnight. Every surface is a testament to centuries of wealth and absolute solitude."
+  style: "Pure Gothic atmospheric horror — the tension of an empty room that is not truly empty. Vermeer-level interior lighting mastery: firelight as the dominant warm source casting long amber shadows, cold moonlight blades from the shuttered window as counterpoint, candlelight filling the middle distance with wavering amber halos. Deep focus throughout — every surface rich with aged texture: cracked leather, tarnished silver, dusty velvet, wet stone. The wine glass in sharp focus, blood surface catching the light with impossible depth. Colour palette: deep burgundy, ebony, aged ivory, old gold, cold blue. 8K resolution, photorealistic oil painting render in the tradition of Dutch Golden Age interior painting with Gothic horror overtones."
+  video: "The camera opens on the fireplace — flames and candles burning in total silence, no sound but the occasional soft pop of embers. A slow, deliberate dolly back reveals the armchair, then the side table, then the wine glass. Atmosphere: the dread of a room that is waiting for its owner to return."
+---
@@ -0,0 +1,25 @@
+---
+title: "The Last Valkyrie"
+description: "She walks the field when the battle is already over — magnificent, heavily armed, towering above the fallen — choosing among the dead with the cold authority of a goddess who has never known defeat."
+date: 2026-05-08T14:00:00+02:00
+author: "valknar"
+featured: false
+categories:
+  - Dark
+  - Fantasy
+tags:
+  - Valkyrie
+  - Viking
+  - Battlefield
+  - Norse Mythology
+  - Epic
+  - Warrior
+  - Mythology
+  - Cinematic
+slug: the-last-valkyrie
+prompt:
+  scene: "A magnificent, heavily armed and armoured Valkyrie stands alone on a vast epic battlefield littered with fallen Vikings, rendered in breathtaking cinematic grandeur. She is colossal in presence — full-figure, centre frame — clad in immaculate yet battle-tested armour of layered steel and burnished gold, intricately engraved with Norse knotwork and raven motifs. A great winged helm crowns her head, her long silver-white hair whipping in the wind. In one gauntleted hand she holds a massive war spear crackling with pale lightning; in the other, a round shield of black iron and gold bearing the mark of Odin. Her expression is absolute, divine authority — neither cruel nor merciful, simply inevitable. Around her in every direction, hundreds of fallen Viking warriors lie across the mud and stone, their shields shattered, their banners torn."
+  environment: "A vast Norse battlefield at the moment after the last blow has fallen — dusk sky of deep violet and bruised amber, storm clouds massing overhead shot through with distant lightning. The field itself is a panorama of epic carnage rendered with mythic gravity: broken longships beached in the distance, ravens circling in vast spirals overhead, shield walls collapsed into tangles of iron and oak. Mist rolls across the ground in slow waves. In the far background, the silhouette of a great hall burns against the sky. A single riderless horse stands motionless among the fallen. The Valkyrie's armour catches the last dying light of the sun as the storm closes in."
+  style: "Norse epic fantasy at maximum cinematic scale — the visual grandeur of God of War Ragnarök meets the painterly sweep of classic Frank Frazetta barbarian art and the mythic weight of Zack Snyder's 300. Hyper-detailed armour engraving, fur cloaks, weathered iron and aged leather across the fallen warriors. Dramatic upward low-angle composition placing the Valkyrie against the storming sky. Volumetric god-rays breaking through storm clouds onto the battlefield. Rich desaturated colour grade: steel grey, tarnished gold, deep violet sky, muted blood-red earth. Wind-motion blur on hair, cloaks, and torn banners. 8K resolution, photorealistic epic fantasy render with oil-painting atmosphere."
+  video: "The Valkyrie stands motionless. Storm wind slowly stirs her hair and cloak. The Valkyrie stands motionless. Storm wind slowly stirs her hair and cloak. Lightning pulses once in her spear. A single raven descends and lands on her outstretched shield arm. She turns her head slowly to survey the field. Camera holds static throughout — no movement, no cut."
+---
@@ -0,0 +1,25 @@
+---
+title: "The Warlord's Hour"
+description: "A fearsome samurai warlord, clad in magnificent lacquered armour, receives the quiet ceremony of sake from a geisha — power and grace suspended in a single, breathless moment on an ancient throne."
+date: 2026-05-08T10:00:00+02:00
+author: "valknar"
+featured: false
+categories:
+  - Dark
+  - Historical
+tags:
+  - Samurai
+  - Japan
+  - Feudal
+  - Geisha
+  - Warlord
+  - Armor
+  - Ceremony
+  - Cinematic
+slug: the-warlords-hour
+prompt:
+  scene: "A commanding samurai warlord sits in absolute stillness upon an ancient lacquered throne of dark cedar and iron, set within a vast feudal Japanese great hall. His armour is extraordinary — full ō-yoroi in deep crimson and black lacquered plates, gilded mon crests on the shoulder guards, a fearsome menpō face mask pushed up to reveal a scarred, weathered face of absolute authority. His katana rests across his knees, unsheathed. Before him, a geisha in a pristine white and gold furisode kimono kneels gracefully on a tatami mat, both hands extended, presenting a lacquered sake tray with a single ceramic cup. Her gaze is downcast, her white-painted face a mask of serene composure."
+  environment: "The great hall is cavernous and dimly lit — massive wooden pillars rising to a shadowed ceiling hung with battle banners bearing clan crests in faded red and black. Rice paper shoji screens along the walls glow faintly with the light of paper lanterns beyond. Incense smoke drifts in slow diagonals across the space. Scattered armour stands and weapon racks line the periphery. Sparse cherry blossom petals have blown in through an unseen open screen, settling on the tatami floor. Outside, the muffled sound of a distant war drum."
+  style: "Cinematic feudal Japan, hyper-realistic textures of lacquered armour, raw silk, and aged cedar. Dramatic chiaroscuro lighting — a single strong source from a paper lantern above illuminates the warlord's armour and the geisha's kimono, deep shadows consuming the hall behind. Rich colour palette: crimson, black, ivory, gold. Inspired by Akira Kurosawa's compositional gravity and the painterly depth of ukiyo-e woodblock prints. Ultra-detailed fabric and metalwork, 8K resolution, photorealistic with cinematic grain."
+  video: "Camera opens on a slow push through the darkened great hall — battle banners drifting almost imperceptibly in unseen air. The warlord's silhouette emerges from shadow first, the glint of his unsheathed blade catching light. The geisha kneels. Her arms extend with the tray. A long, suspended silence. The warlord's gauntleted hand moves — slowly, deliberately — and lifts the cup. Incense smoke drifts between them. A single cherry blossom petal falls onto the tatami. Atmosphere: absolute power held in ceremonial stillness, the calm before or after great violence."
+---
@@ -0,0 +1,25 @@
+---
+title: "Iron Rain"
+description: "A colossal combat mech holds the intersection — armour scarred by a hundred engagements, missile pods tracking, plasma blade coiled and ready — while Neo-Tokyo dissolves in rain around it and no one dares move."
+date: 2026-05-10T18:00:00+02:00
+author: "valknar"
+featured: true
+categories:
+  - Dark
+  - Sci-Fi
+tags:
+  - Mech
+  - Cyberpunk
+  - Neo-Tokyo
+  - Rain
+  - Night
+  - Futuristic
+  - War Machine
+  - Combat
+slug: iron-rain
+prompt:
+  scene: "A colossal combat mech stands motionless at a rain-soaked intersection in futuristic Neo-Tokyo, late at night. Full-figure, wide shot — the entire machine visible from ground to crown. The mech is massively armoured: layered titanium-alloy plating battle-scarred and oil-stained, hydraulic joints venting live steam into the cold night air, twin missile pods on both shoulders, a rotary gatling cannon where the left arm should be, a plasma blade housing on the right forearm crackling with suppressed blue-white energy. The torso bears a faded corporate military insignia, half-obscured by scoring and carbon residue. The head unit is a featureless armoured dome with a single wide horizontal optical band pulsing amber — slowly sweeping, scanning. Rain hammers every surface: bouncing off armour plates in silver droplets, running in sheets down the cockpit glass, pooling in neon-lit puddles around the mech's enormous hydraulic feet. It is completely still. Everything about it communicates that this stillness is temporary."
+  environment: "A deep rain-canyon of Neo-Tokyo at maximum atmospheric density. Corporate megablock towers rise on both sides, walls plastered floor-to-roof in overlapping holographic advertisements and kanji signage — pink, amber, cyan, electric green — their light bleeding and fracturing across every rain-slicked surface. Power cables and elevated transit rails crisscross the gap overhead. The street is empty: abandoned street vendor carts, an overturned delivery vehicle still sparking, shattered glass across the tarmac. A police cordon barrier lies flattened in the background. In the far distance, a mega-structure rises into low cloud cover, upper floors lost in rain-haze and sweeping searchlight beams. Everything civilian has been evacuated. The city holds its breath."
+  style: "Hyper-realistic cyberpunk war photography. Blade Runner 2049 colour science and atmospheric density meets Pacific Rim's mechanical scale — rendered through the lens of a war correspondent on the ground. Photorealistic wet-surface caustics: neon colour bleeding across every puddle with physical accuracy, rain streaks rendered with motion-blur density, steam particles volumetrically lit. Three-point cinematic lighting: dominant amber sodium vapour from below, cold blue-white from a searchlight above, magenta-pink neon spill from signage at left. The mech rendered with absolute material fidelity — scratched titanium highlights, oil-dark joint cavities, heat-scorched venting panels. 8K photorealistic render, anamorphic lens with characteristic oval bokeh, cinematic colour grade: deep teal shadows, amber-orange midtones, magenta-pink neon highlights."
+  video: "Rain falls continuously. The mech raises the hand, which doesn't hold the gun, to show a traffic stop gesture. A single vehicle creeps into frame from the right. The mech holds position. Neon reflections ripple in the puddles. Camera holds completely static throughout."
+---
@@ -0,0 +1,26 @@
+---
+title: "The Drowned Queen"
+description: "She sails still — centuries dead, cursed to never reach port — her black hull half-fog and half-ruin, her skeletal crew working the rigging in silence, her tattered sails full of a wind that does not exist."
+date: 2026-05-11T10:00:00+02:00
+author: "valknar"
+featured: false
+categories:
+  - Dark
+  - Horror
+tags:
+  - Ghost Ship
+  - Sea
+  - Storm
+  - Cursed
+  - Gothic
+  - Supernatural
+  - Maritime
+  - Dark Fantasy
+  - Horror
+slug: the-drowned-queen
+prompt:
+  scene: "A colossal, ancient three-masted galleon tears through a pitch-black storm sea — magnificent even in its ruin. Full broadside view, the entire vessel visible from shattered bowsprit to crumbling stern castle. The hull is black-tarred oak warped by centuries of saltwater, barnacle-encrusted below the waterline, riddled with cannonball scars and splintered planking that has never been repaired. The ship is half-transparent: in places the hull dissolves into spectral fog, revealing the skeletal crew working the rigging — ghostly forms in rotted sailor's garb, moving with supernatural, unhurried purpose. The sails are torn and tattered, yet fully billowed — not by wind but by some cursed breath — their canvas the grey of burial shrouds, faintly luminescent with cold green-blue light bleeding through every rent and hole. At the bowsprit, a figurehead of a crowned woman, hands outstretched as if pleading, mouth open in a silent scream. The ship's name — barely legible in corroded gold lettering on the stern: THE DROWNED QUEEN. Ghostly lanterns burn at intervals along the rails with cold blue flame. A massive anchor chain hangs loose from the bow, dragging into the black water below. The ship drives forward against physics and reason, utterly indifferent to the storm."
+  environment: "A catastrophic open-ocean storm at the absolute height of its fury — horizon and sky indistinguishable, swallowed together into a single churning black mass. Cathedral-scale wave mountains, twenty metres high, dark green-black and foam-streaked, crash against and through the ship's hull without slowing it. The sky is a unified ceiling of boiling storm cloud, split continuously by branching white lightning that illuminates everything in single brutal frames of pure white light. Rain falls in horizontal sheets so dense it becomes indistinguishable from mist and spray. In the far background, smaller human vessels are visible at the edges of the frame: listing, lights fading, overwhelmed. The ghost ship leaves no wake. Beneath the surface, a faint spectral glow emanates from below the hull, as if the abyss itself is lit from a cold source far below. Dead fish drift at the surface in the ship's path. The storm is not a backdrop — it is an arena, and the ship is its only master."
+  style: "Dark maritime horror at maximum epic scale — J.M.W. Turner's catastrophic storm paintings fused with the practical horror aesthetic of the Black Pearl and the supernatural grandeur of classic dark fantasy cinema. Photorealistic wet-surface rendering throughout: ocean spray, rain streaks, barnacle texture, rotted wood grain and corroded iron rendered with absolute material fidelity, ghost-translucency layered over physical decay. Wide cinematic composition — ship at three-quarter angle, occupying the full frame, ocean filling every edge to the corners. Three-point supernatural lighting: cold blue-green spectral glow emanating from the ship itself as its primary source, brutal overexposed white lightning from above, absolute void-black in all shadow cavities. Volumetric ocean spray and storm mist layered at multiple depths across the entire scene. Colour grade: near-monochromatic — desaturated deep ocean blues, tarnished blacks, cold grey-greens, spectral blue-white highlights on every ghostly element. 8K photorealistic render, wide anamorphic lens, maximum atmospheric particle density."
+  video: "Lightning strikes once — a single brutal white flash illuminates the entire scene for one frame. One enormous wave swell rises slowly against the hull, breaks into spray, and falls away. The tattered sails billow in a single gust of cursed wind. The figurehead's head turns, barely perceptibly, toward camera. Camera holds completely static throughout."
+---
@@ -0,0 +1,26 @@
+---
+title: "The Empty Throne"
+description: "The throne room of the dead — obsidian and black iron, the river Styx visible through the far archway, Cerberus at rest beside the dais — is not empty because Hades is absent. It is empty because he is standing directly behind whoever is looking at it."
+date: 2026-05-28T13:00:00+02:00
+author: "valknar"
+featured: false
+categories:
+  - Dark
+  - Mythology
+  - Fantasy
+tags:
+  - Hades
+  - Underworld
+  - Greek Mythology
+  - Throne
+  - Atmospheric
+  - Horror
+  - Cerberus
+  - Ancient
+slug: the-empty-throne
+prompt:
+  scene: "A grand, wide establishing shot of the throne room of Hades — the court of the Underworld rendered in its full architectural enormity — seen from the entrance archway looking in, as if the viewer has just arrived and has not yet been permitted to enter. The throne itself dominates: cut from a single piece of volcanic obsidian, its surfaces mirror-polished to perfection, its form severe and angular with no ornamentation and no concession to comfort — a chair designed to be occupied by something that does not tire, does not age, and does not require any of the things thrones are usually built to communicate. It sits elevated on a three-step dais of black marble, bare. To the right of the throne, a tall narrow window cut through the rock opens onto the only visible exterior: the river Styx, its surface moving with the faint luminescence of a million passing souls, its far bank lost in haze. On the far left of the room, curled in sleep on the bare stone floor beside the dais steps, Cerberus rests — three heads, each in a different direction, two sleeping, one not quite sleeping, its central pair of eyes half-open and reflecting the ambient light. The room is otherwise empty. Everything about its emptiness implies that this state is extremely recent."
+  environment: "The hall is monumental and carved from the living rock of the underworld itself — no dressed stone, no masonry, but the raw basalt of the deep earth shaped by will alone into columns, arches, and vaulted ceilings that disappear into dark heights far above. The columns are not straight: they lean slightly inward, as if the mountain is pressing down. From the ceiling, stalactites of black crystal hang at irregular intervals, each one emitting a faint cold phosphorescent glow — the only ambient light in the room. The floor is smooth as glass and slightly warm — the warmth of the deep earth, not fire. Along the walls, at irregular intervals, shallow niches hold soul-candles: flames that burn without wax, cold blue-white, each one representing a soul that has been here long enough to become part of the furniture. In the far corner, an hourglass the height of a man, its sand moving upward instead of down. From beyond the Styx window, very faint, the sound of water and the murmur of a crowd that never quite resolves into individual voices. Charon's boat is just barely visible on the river surface, moving toward a landing that is out of frame."
+  style: "Greek mythological architecture fused with the geological horror of a deep cave system — the civic grandeur of Minoan palace architecture and the formal severity of classical Greek design, both consumed and transformed by the living earth of the underworld into something pre-architectural, primordial. Lighting: the soul-candles as ambient cold fill, the Styx window as the sole directional source — the faint blue-silver luminescence of the river casting long horizontal shadows from the throne across the floor toward camera. Cerberus rendered with the conviction of a real animal of its size — the weight of three lion-scale heads, the musculature of a creature bred from nothing natural, fur matted with the particular dampness of a cave creature, three distinct personalities readable in three distinct resting postures. The obsidian throne's mirror surface reflecting a distorted, cold image of the empty room back on itself. Reference: the architectural world-building of God of War's Helheim, John Martin's vast apocalyptic paintings, the cave compositions of Caspar David Friedrich. 8K resolution, photorealistic render, maximum depth of field across the full room depth, the far Styx window in crisp focus against the near darkness of the entrance."
+  video: "The room is still. The soul-candles burn without movement. The Styx surface shifts faintly through the window, its light shifting across the throne. One of Cerberus's sleeping heads twitches — an ear rotation, the involuntary response of a dreaming animal. Then the not-quite-sleeping head opens fully. All three heads rise simultaneously. All six eyes orient in the same direction: not toward the throne, not toward the river, not toward any visible point in the room. Directly at the camera. Camera holds completely static throughout."
+---
@@ -0,0 +1,26 @@
+---
+title: "The Masquerade's End"
+description: "The invitations were sent, the candles were lit, the musicians played, the masks were worn — and one more guest arrived than was invited, in a costume that required no costume, moving through the ballroom with the unhurried patience of something that has attended every party that ever ended this way."
+date: 2026-05-28T14:00:00+02:00
+author: "valknar"
+featured: false
+categories:
+  - Dark
+  - Gothic
+  - Surrealist
+tags:
+  - Masquerade
+  - Venetian
+  - Edgar Allan Poe
+  - Red Death
+  - Horror
+  - Macabre
+  - Ballroom
+  - Gothic
+slug: the-masquerades-end
+prompt:
+  scene: "A wide, sweeping shot of a grand Venetian palazzo ballroom at the precise moment the Red Death moves through it — captured in the surreal, suspended stillness of every other occupant having simultaneously stopped. The ballroom is magnificent: vaulted ceiling forty feet overhead, enormous chandeliers of Murano glass and a thousand candles each, gilded walls hung with enormous oil paintings in ornate frames, a polished marble floor inlaid with a geometric pattern in black and white. The room is filled with perhaps a hundred masquerade guests in costumes of extraordinary richness and fantasy: plague doctors, harlequins, doges, queens, gods, animals, angels, demons, all wearing Venetian masks in every conceivable form — bauta, moretta, volto, colombina — in gilt, in jewel-set porcelain, in feathered black, in painted ivory. Every one of them is frozen mid-motion: a woman mid-turn, her silk skirts arrested in a full spiral that should not hold; a pair of dancers frozen at the peak of a lift; a man mid-laugh with his wine glass raised; a group of four mid-conversation. None of them is looking at what has just entered their midst. Moving through the frozen crowd, touching nothing and no one, is the Red Death: a tall figure in a robe of deep scarlet that has the texture of something organic, wearing a mask that is not a mask — a face of white bone beneath which the eyes are not eyes. On every frozen figure it has already passed, the porcelain mask has developed a single hairline crack. On the nearest figure — a woman in gold — the crack runs from crown to chin."
+  environment: "The palazzo ballroom exists in full Belle Époque Venetian splendour: the ceiling fresco above the chandeliers depicts the gods of Olympus at a feast, the paint still vivid. Along the walls, floor-to-ceiling mirrors in gilt frames multiply the frozen crowd infinitely in both directions — in every reflection, the perspective shifts, and in some of them the Red Death appears in positions it is not occupying in the actual room, as if time moves differently in the glass. At one end of the room, the orchestra is frozen mid-bar: violinists with bows at mid-stroke, the conductor's arm raised and stopped, a cellist leaning forward over the instrument. The music has not ended — it has simply paused, as if the score has a rest that has lasted longer than any rest should. Long tables along the walls hold the untouched supper: crystal, silver, elaborate centrepieces, candelabras, ice sculptures that are still the forms they were carved into, not yet melted. The tall windows behind the orchestra are shuttered in red silk. Through the cracks in the shutters, just visible: Venice at carnival, torchlit, distant, continuing entirely without awareness of what is happening inside."
+  style: "Edgar Allan Poe's The Masque of the Red Death translated into the visual language of Venetian Golden Age painting and Kubrick's compositional control — the palatial grandeur of Tiepolo's ceiling frescoes and Veronese's feast paintings, the formal ceremonial horror of Kubrick's Eyes Wide Shut ballroom sequence, and the supernatural dread of the best Poe adaptation work, all unified in a photorealistic render at maximum atmospheric intensity. The frozen crowd rendered with the hyperreal stasis of a Francis Bacon figure — human form under the extreme pressure of supernatural intervention, fabric and posture locked in positions that physics alone could not maintain. The Red Death as the compositional void around which everything else organises: the eye moves to it despite the overwhelming richness of everything surrounding it, because it is the only figure that is not wrong. The porcelain mask cracks rendered with the precision of a conservation scientist: fine as a spider's thread, catching the candlelight as a white line against the painted porcelain. Lighting: a thousand candles from above as the warm ambient, cold from the mirror reflections as a slightly bluer secondary, the Red Death emitting a near-imperceptible cold light of its own — barely visible, only registering in the shadows it casts. 8K resolution, wide anamorphic lens, deep focus across the full ballroom depth."
+  video: "The candles burn. No music. The frozen crowd maintains every impossible posture without strain. The Red Death moves — slowly, deliberately — between two groups of frozen revellers. As it passes the nearest figure, the hairline crack on her porcelain mask spreads — silently, like frost on glass — from the chin downward across the cheek. The mask does not fall. The Red Death stops. It turns its head — slowly — and faces the camera directly. It has not moved for the rest of the video. Camera holds completely static throughout."
+---
@@ -0,0 +1,25 @@
+---
+title: "The Plague Doctor's Round"
+description: "He makes his rounds at three in the morning, when the city has finally stopped pretending — lantern in one hand, cane in the other, the beak of his mask packed with dried flowers that no longer help anyone, moving through a city that has surrendered to him completely."
+date: 2026-05-28T12:00:00+02:00
+author: "valknar"
+featured: false
+categories:
+  - Dark
+  - Historical
+tags:
+  - Plague Doctor
+  - Medieval
+  - Fog
+  - Cobblestone
+  - Macabre
+  - Black Death
+  - Night
+  - Atmospheric
+slug: the-plague-doctors-round
+prompt:
+  scene: "A lone plague doctor moves through the absolute centre of a fog-drowned medieval street, captured in a long, cinematic shot that places him small against the vast, crushing architecture of a city that has closed around him. He wears the full canonical plague doctor ensemble with hyper-realistic fidelity: a long waxed leather coat the colour of dried blood, black leather gloves to the elbow, a wide-brimmed hat, and the beak mask — long, curved, ominous, the leather cracked and stained from years of use, the eye-pieces dark amber glass that reflects the lantern light without revealing anything within. In his left hand, a wrought iron lantern with a small, steady candle flame — the only warm light source on the street — casting a moving circle of amber barely two metres in any direction. In his right hand, a long wooden cane with a brass tip, which he uses neither for support nor for pointing: he simply carries it, as he always has. His posture is neither hurried nor hesitant. He moves with the particular gait of someone who has been doing this for so long that purpose and resignation have become indistinguishable."
+  environment: "A medieval European city street at three in the morning — a narrow, close-packed canyon of half-timbered buildings leaning toward each other overhead, their upper storeys almost touching, their facades dark and sealed. Every window is shuttered. Every door is closed. On a dozen of those doors, visible as he passes, a red cross — some freshly painted, some weeks old and fading. The cobblestones are wet from recent rain, catching the lantern light in small, irregular reflections. Fog sits low and heavy, dense enough at street level to swallow his feet entirely, reducing him to a coat and hat and beak floating above a white floor. Further down the street — thirty metres, fifty — the fog thickens until the buildings dissolve into grey nothing. A cat sits on a windowsill, watching him pass, absolutely still. At the far edge of visibility, the silhouette of a church spire against a sky that offers no stars and no moon. Somewhere distant, a bell tolling a single note — not the hour, just a bell that has been ringing all night and has not been stopped because there is no one left to stop it."
+  style: "Dutch Golden Age night-scene painting translated into photorealistic cinema — the lantern-lit darkness of Rembrandt's The Night Watch, the claustrophobic medieval streetscapes of Pieter Bruegel the Elder, the fog-choked atmosphere of a Gustave Doré engraving, all rendered with the narrative weight of a Werner Herzog film. Single-source lantern lighting as the entire visual key: warm amber in a tight radius, the rest of the scene in deep, textured darkness ranging from near-black to the diffuse grey-white of the fog layer. The plague doctor rendered with absolute material fidelity: cracked waxed leather, tarnished brass, the slight condensation on the amber glass eyepieces. Colour grade: near-monochrome, dominated by cold greys and blacks, the lantern's amber flame the only warm chromatic event in the entire frame. The cobblestones rendered wet and individually textured, each one reflecting a miniature lantern. 8K resolution, photorealistic render, anamorphic lens with compressed depth perspective emphasising the tunnel-like quality of the street."
+  video: "He walks. The lantern swings slightly in his hand, sending shadows rocking across the wet cobblestones and the building faces. He stops. He tilts the beak mask slightly upward — the posture of listening. Total silence. He does not move for a long moment. Then he continues walking, the lantern swinging again, the shadows rocking. A window shutter on the first floor closes, very slowly, as he passes. He does not look up. Camera holds completely static throughout."
+---
@@ -0,0 +1,24 @@
+---
+title: "The Ashen Choir"
+description: "A masked opera choir stands frozen mid-hymn in a burning gothic theatre, embers drifting through gilded ruin like slow snow as the final note refuses to end."
+date: 2026-09-13T12:00:00+02:00
+author: "valknar"
+featured: false
+categories:
+  - Dark
+  - Surrealist
+tags:
+  - Opera
+  - Fire
+  - Masks
+  - Choir
+  - Gothic Theatre
+  - Embers
+  - Macabre
+slug: the-ashen-choir
+prompt:
+  scene: "A row of eight robed choir singers stands motionless on the stage of a grand, burning opera house, mouths open mid-note beneath featureless white porcelain masks with delicate gold cracks like veins of gilding. Wide symmetrical shot from the center of the empty stalls, looking directly at the stage. Their robes are charcoal-black velvet trimmed in tarnished gold, hems smoldering at the edges without being consumed. Behind them, the stage curtains burn in slow, silent sheets of orange flame that cast no visible smoke, embers rising instead of falling, drifting upward past the proscenium arch like a reverse snowfall. Sheet music on brass stands in front of each singer curls and blackens at the corners but remains legible. At the center, one singer — taller than the rest — has tilted their masked head back, chin lifted, as if holding an impossibly long final note."
+  environment: "The gilded interior of a 19th-century gothic opera house mid-collapse. Tiered balconies rise on either side, red velvet seats smoldering, gold leaf detailing blistering and curling from the heat. A vast crystal chandelier hangs precariously overhead, half its candles still lit, crystals chiming faintly as the structure shifts. Frescoed ceiling panels depicting weeping muses are scorched at the edges, paint bubbling. Ash and embers drift continuously upward through the auditorium air, catching the footlights' glow. The grand proscenium arch is carved with skeletal cherubs, several of which have cracked and fallen into the orchestra pit below, now empty of musicians."
+  style: "Surrealist gothic theatre horror, painted with the operatic grandeur of a Phantom-of-the-Opera production set ablaze. Rich, saturated palette of deep crimson, black, and molten gold, embers rendered as glowing particulate catching every light source. Reverse-gravity ash and ember physics rendered with total photorealistic conviction despite the impossibility. Hyper-detailed textures: cracked porcelain masks, singed velvet nap, bubbling gold leaf, crystalline chandelier refractions. 8K cinematic render, dramatic underlighting from the footlights, painterly Baroque composition, a stillness that feels suspended mid-collapse rather than static."
+  video: "Embers rise continuously and thickly past the singers in a dense reverse-snowfall, filling the air. The burning curtains behind them ripple and unfurl in constant shifting sheets of flame. The chandelier swings visibly overhead, its crystals chiming and catching the firelight. All eight singers' masked heads tilt further back, shoulders rising and falling visibly as the note builds and holds. Sparks scatter and drift upward continuously from the smoldering seats below. Camera holds static throughout, but everything within the frame moves continuously."
+---
@@ -0,0 +1,24 @@
+---
+title: "The Clockwork Confessor"
+description: "A towering brass automaton priest hears confession in a gaslit cathedral, its porcelain saint's mask cracked, gears turning beneath tarnished metal as candlelight gutters through the nave."
+date: 2026-09-13T10:00:00+02:00
+author: "valknar"
+featured: true
+categories:
+  - Dark
+  - Steampunk
+tags:
+  - Automaton
+  - Clockwork
+  - Cathedral
+  - Confession
+  - Brass
+  - Gothic
+  - Inquisition
+slug: the-clockwork-confessor
+prompt:
+  scene: "A towering brass-and-iron automaton priest kneels within an ornate confessional booth of black oak and wrought iron, half-hidden behind a velvet curtain torn at the hem. Full-figure, three-quarter shot from within the confessional's opposite side, looking through the wooden lattice screen. The automaton's body is a masterwork of exposed clockwork: articulated brass ribs housing spinning escapements, a chest cavity where a slow pendulum swings behind smoked glass, tarnished copper tubing running along both arms venting faint puffs of steam with every mechanical breath. Its hands, folded in a gesture of benediction, are long articulated fingers of blackened steel ending in delicate porcelain fingertips. Its face is a cracked porcelain mask shaped into the serene, downturned features of a saint — one long fissure running from brow to jaw, revealing a single glowing amber optic lens beneath. It holds an ancient leather-bound book, pages fluttering slightly though there is no wind. The mask tilts slowly toward the lattice, listening."
+  environment: "The interior of a vast, decaying Gothic cathedral repurposed as a clockwork sanctuary. Soaring ribbed vaults disappear into darkness overhead, hung with rusted gears the size of cartwheels suspended on chains, turning almost imperceptibly in unison with some unseen mechanism. Rows of empty pews stretch into gloom, dust thick on every surface, candlewax pooled in ancient drifts along the aisle. Stained-glass windows depict saints rendered as machines — halos of gear teeth, wings of articulated brass feathers — filtering fractured amber and blue light across the stone floor. A single overturned prayer kneeler lies near the confessional. Somewhere unseen, a great pendulum clock ticks, its sound echoing through the nave like a heartbeat the building cannot stop."
+  style: "Dark steampunk gothic realism. The visual language of Guillermo del Toro's cathedral interiors fused with Jean-Pierre Jeunet's warm-brass mechanical detailing. Chiaroscuro lighting: deep cathedral shadow pierced by shafts of dusty amber candlelight and cold blue stained-glass spill. Hyper-realistic material rendering — oxidised copper, oil-black iron, cracked antique porcelain with fine craquelure, aged velvet with worn nap. 8K photorealistic render, subtle film grain, anamorphic lens flare where light catches brass edges, painterly gothic composition reminiscent of Baroque religious portraiture."
+  video: "The suspended gears overhead rotate visibly and continuously, their brass teeth catching shifting light. Thick steam billows rhythmically from the automaton's neck vents in visible bursts. The automaton visibly turns its head upward toward the gears, then lowers it back to the book, the crack in its mask glinting as it moves. Its brass fingers turn a page of the open book. Candlelight flickers and dances across every surface, casting moving shadows. Camera holds static throughout, but everything within the frame moves continuously."
+---
@@ -1,69 +1,84 @@
 baseURL = "https://pivoine.art/"
-languageCode = "en-us"
+locale = "en-US"
 title = "Pivoine"
 copyright = "© 2026 Pivoine Editorial"

 enableRobotsTXT = true

 [pagination]
-  pagerSize = 12
+pagerSize = 12

 [sitemap]
-  changefreq = "weekly"
-  priority   = 0.5
-  filename   = "sitemap.xml"
+changefreq = "weekly"
+priority = 0.5
+filename = "sitemap.xml"

 [params]
-  description    = "An editorial magazine for AI-generated art and generative aesthetics."
-  tagline        = "Where the machine dreams."
-  author         = "Pivoine Editorial"
-  ogImage        = "/images/og-default.jpg"
-  logoText       = "PIVOINE"
-  copyrightYear  = "2026"
-  twitterHandle  = "valknar100"
-  umamiSrc       = "https://umami.pivoine.art/script.js"
-  umamiId        = "9190b814-0480-498a-b5fe-1fe1dc162766"
+description = "An editorial magazine for AI-generated art and generative aesthetics."
+tagline = "Where the machine dreams."
+author = "Pivoine Editorial"
+ogImage = "/images/og-default.jpg"
+logoText = "PIVOINE"
+copyrightYear = "2026"
+twitterHandle = "valknar100"
+umamiSrc = "https://umami.pivoine.art/script.js"
+umamiId = "9190b814-0480-498a-b5fe-1fe1dc162766"

 [params.social]
-  instagram = "https://instagram.com/valknarix"
-  x         = "https://x.com/valknar100"
+instagram = "https://instagram.com/valknarix"
+x = "https://x.com/valknar100"

 [taxonomies]
-  category = "categories"
-  tag      = "tags"
+category = "categories"
+tag = "tags"

 [[menus.main]]
-  name   = "Posts"
-  url    = "/posts/"
-  weight = 1
+name = "Posts"
+url = "/posts/"
+weight = 1
 [[menus.main]]
-  name   = "Authors"
-  url    = "/authors/"
-  weight = 2
+name = "Authors"
+url = "/authors/"
+weight = 2
 [[menus.main]]
-  name   = "Categories"
-  url    = "/categories/"
-  weight = 3
+name = "Categories"
+url = "/categories/"
+weight = 3
 [[menus.main]]
-  name   = "About"
-  url    = "/about/"
-  weight = 4
+name = "About"
+url = "/about/"
+weight = 4

 [[menus.footer]]
-  name   = "About"
-  url    = "/about/"
-  weight = 1
+name = "About"
+url = "/about/"
+weight = 1
 [[menus.footer]]
-  name   = "Imprint"
-  url    = "/imprint/"
-  weight = 2
+name = "Imprint"
+url = "/imprint/"
+weight = 2
+[[menus.footer]]
+name = "Dev"
+url = "https://dev.pivoine.art"
+weight = 3
+[[menus.footer]]
+name = "Bar"
+url = "https://bar.pivoine.art"
+weight = 4
+[[menus.footer]]
+name = "Roux"
+url = "https://roux.pivoine.art"
+weight = 5

 [markup.goldmark.renderer]
-  unsafe = true
+unsafe = true

 [markup.highlight]
-  style     = "dracula"
-  noClasses = true
+style = "dracula"
+noClasses = true

 [build]
-  writeStats = true
+writeStats = true
+
+[security.exec]
+allow = ['^(dart-)?sass$', '^go$', '^git$', '^node$', '^npx$', '^tailwindcss$']
@@ -1,10 +1,13 @@
 {{- define "main" -}}
-<section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden noise gutter-x py-32 text-center">
-
+  <section
+    class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden noise gutter-x py-32 text-center"
+  >
    <!-- Background texture -->
    <div class="absolute inset-0 speed-lines opacity-60"></div>
-  <div class="absolute inset-0"
-    style="background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155,0,255,0.06) 0%, transparent 70%)"></div>
+    <div
+      class="absolute inset-0"
+      style="background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155,0,255,0.06) 0%, transparent 70%)"
+    ></div>

    <!-- Decorative hollow "404" behind everything -->
    <div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none" aria-hidden="true">
@@ -13,12 +16,13 @@
        style="font-size: clamp(14rem, 40vw, 32rem);
             color: transparent;
             -webkit-text-stroke: 1px rgba(255,26,140,0.07);
-             letter-spacing: -0.02em;">404</span>
+             letter-spacing: -0.02em;"
+        >404</span
+      >
    </div>

    <!-- Content -->
    <div class="relative z-10 flex flex-col items-center gap-6 max-w-2xl mx-auto">
-
      <!-- Eyebrow badge -->
      <span class="badge badge-gradient" style="animation: mob-link-in 0.5s var(--ease-out-expo) 0ms both">
        Error 404
@@ -30,7 +34,7 @@
        style="font-size: clamp(4rem, 14vw, 10rem);
             animation: mob-link-in 0.6s var(--ease-out-expo) 80ms both"
      >
-      <span class="text-stroke-heat">PAGE</span><br>
+        <span class="text-stroke-heat">PAGE</span><br />
        <span class="text-gradient">NOT FOUND</span>
      </h1>

@@ -46,12 +50,13 @@
      </p>

      <!-- CTA -->
-    <div class="flex flex-wrap gap-4 justify-center"
-      style="animation: mob-link-in 0.5s var(--ease-out-expo) 340ms both">
+      <div
+        class="flex flex-wrap gap-4 justify-center"
+        style="animation: mob-link-in 0.5s var(--ease-out-expo) 340ms both"
+      >
        <a href="/" class="btn">Back to the Drop {{ partial "icon.html" "arrow-right" }}</a>
        <a href="/posts/" class="btn btn-ghost">Browse all posts {{ partial "icon.html" "arrow-right" }}</a>
      </div>
-
    </div>

    <!-- Bottom graffiti tag -->
@@ -59,7 +64,8 @@
      class="graffiti-tag absolute -bottom-6 left-1/2 -translate-x-1/2 select-none pointer-events-none whitespace-nowrap"
      style="-webkit-text-stroke-color: rgba(0,200,255,0.05);"
      aria-hidden="true"
-  >LOST</div>
-
-</section>
+    >
+      LOST
+    </div>
+  </section>
 {{- end -}}
@@ -1,17 +1,16 @@
 <!doctype html>
-<html lang="{{ .Site.LanguageCode }}" class="scroll-smooth">
-<head>
+<html lang="{{ .Site.Language.Locale }}" class="scroll-smooth">
+  <head>
    {{- partial "head.html" . -}}
-</head>
-<body
+  </head>
+  <body
    class="bg-void text-paper font-body min-h-screen flex flex-col antialiased"
    hx-boost="true"
    hx-select="#main-content"
    hx-target="#main-content"
    hx-swap="outerHTML"
    hx-push-url="true"
->
-
+  >
    <!-- HTMX transition progress bar -->
    <div id="progress-bar" aria-hidden="true"></div>

@@ -19,12 +18,14 @@

    {{- block "page-background" . -}}{{- end -}}

+
    <main id="main-content" class="flex-1" hx-history-elt>
      {{- block "main" . }}{{- end }}
    </main>

    {{- partial "footer.html" . -}}

+
    <!-- ── Global lightbox — lives outside #main-content so HTMX never touches it -->
    <div
      x-data="{
@@ -57,30 +58,47 @@
      aria-label="Media lightbox"
    >
      <!-- Top chrome bar -->
-    <div class="absolute top-0 inset-x-0 z-10 flex items-center justify-between px-2 h-14"
-      style="background: linear-gradient(to bottom, rgba(5,5,16,0.85), transparent)">
+      <div
+        class="absolute top-0 inset-x-0 z-10 flex items-center justify-between px-2 h-14"
+        style="background: linear-gradient(to bottom, rgba(5,5,16,0.85), transparent)"
+      >
        <div class="absolute top-0 inset-x-0 h-px gradient-line"></div>
        <div class="w-24"></div>
-      <div class="label text-fog tabular-nums"
-        x-text="items.length ? `${String(idx + 1).padStart(2,'0')} / ${String(items.length).padStart(2,'0')}` : ''"></div>
+        <div
+          class="label text-fog tabular-nums"
+          x-text="items.length ? `${String(idx + 1).padStart(2,'0')} / ${String(items.length).padStart(2,'0')}` : ''"
+        ></div>
        <div class="flex items-center w-24 justify-end gap-1">
-        <button @click="fill = !fill"
+          <button
+            @click="fill = !fill"
            class="w-10 h-10 flex items-center justify-center label transition-colors"
            :class="fill ? 'text-heat hover:text-chalk' : 'text-fog hover:text-heat'"
            :aria-label="fill ? 'Switch to fit mode' : 'Switch to fill mode'"
-          x-text="fill ? 'FIT' : 'FILL'"></button>
-        <button @click="close()"
+            x-text="fill ? 'FIT' : 'FILL'"
+          ></button>
+          <button
+            @click="close()"
            class="w-10 h-10 flex items-center justify-center label text-fog hover:text-chalk transition-colors"
-          aria-label="Close">✕</button>
+            aria-label="Close"
+          >
+            ✕
+          </button>
        </div>
      </div>
      <!-- Prev -->
-    <button @click="prev()" x-show="items.length > 1"
+      <button
+        @click="prev()"
+        x-show="items.length > 1"
        class="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
-      aria-label="Previous">{{- partial "icon.html" "arrow-left" -}}</button>
+        aria-label="Previous"
+      >
+        {{- partial "icon.html" "arrow-left" -}}
+      </button>
      <!-- Media -->
-    <div class="absolute inset-0 flex items-center justify-center transition-[padding] duration-300"
-      :class="fill ? 'p-0' : 'pt-14 pb-14 px-14 md:px-20'">
+      <div
+        class="absolute inset-0 flex items-center justify-center transition-[padding] duration-300"
+        :class="fill ? 'p-0' : 'pt-14 pb-14 px-14 md:px-20'"
+      >
        <video
          x-show="items[idx] && items[idx].video"
          :src="items[idx] && items[idx].video ? items[idx].video : ''"
@@ -88,28 +106,42 @@
          x-effect="if (open && items[idx] && items[idx].video) { $el.load(); $el.play() }"
          :class="fill ? 'w-full h-full object-cover' : 'max-w-full max-h-full object-contain'"
          class="transition-all duration-300"
-        controls loop muted playsinline></video>
+          controls
+          loop
+          muted
+          playsinline
+        ></video>
        <img
          x-show="items[idx] && !items[idx].video"
          :src="items[idx] && !items[idx].video ? items[idx].img : ''"
          alt=""
          :class="fill ? 'w-full h-full object-cover' : 'max-w-full max-h-full object-contain'"
-        class="transition-all duration-300">
+          class="transition-all duration-300"
+        />
      </div>
      <!-- Next -->
-    <button @click="next()" x-show="items.length > 1"
+      <button
+        @click="next()"
+        x-show="items.length > 1"
        class="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
-      aria-label="Next">{{- partial "icon.html" "arrow-right" -}}</button>
+        aria-label="Next"
+      >
+        {{- partial "icon.html" "arrow-right" -}}
+      </button>
      <!-- Dots -->
-    <div x-show="items.length > 1"
+      <div
+        x-show="items.length > 1"
        class="absolute bottom-0 inset-x-0 z-10 flex items-center justify-center h-14 gap-2"
-      style="background: linear-gradient(to top, rgba(5,5,16,0.85), transparent)">
+        style="background: linear-gradient(to top, rgba(5,5,16,0.85), transparent)"
+      >
        <div class="absolute bottom-0 inset-x-0 h-px gradient-line"></div>
        <template x-for="(item, i) in items" :key="i">
-        <button @click="idx = i"
+          <button
+            @click="idx = i"
            class="h-1.5 rounded-full transition-all duration-300"
            :class="i === idx ? 'w-5 bg-heat' : 'w-1.5 bg-fog hover:bg-chalk'"
-          :aria-label="`Go to item ${i + 1}`"></button>
+            :aria-label="`Go to item ${i + 1}`"
+          ></button>
        </template>
      </div>
    </div>
@@ -118,9 +150,9 @@
    <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
    <!-- Alpine.js store initialisation (must run before alpine:init) -->
    <script>
-    document.addEventListener('alpine:init', () => {
-      Alpine.store('nav', { path: window.location.pathname, open: false })
-    })
+      document.addEventListener("alpine:init", () => {
+        Alpine.store("nav", { path: window.location.pathname, open: false });
+      });
    </script>
    <!-- Alpine.js (reactive UI — nav, interactions) -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
@@ -129,7 +161,11 @@
    {{- if eq hugo.Environment "production" -}}
      {{- $js = $js | minify | fingerprint "sha256" -}}
    {{- end -}}
-  <script src="{{ $js.RelPermalink }}"{{ if eq hugo.Environment "production" }} integrity="{{ $js.Data.Integrity }}"{{ end }} defer></script>
+    <script
+      src="{{ $js.RelPermalink }}"
+      {{ if eq hugo.Environment "production" }}integrity="{{ $js.Data.Integrity }}"{{ end }}
+      defer
+    ></script>

    {{- block "scripts" . }}{{- end }}

@@ -137,5 +173,5 @@
      <!-- Umami analytics — cookie-free, self-hosted -->
      <script defer src="{{ .Site.Params.umamiSrc }}" data-website-id="{{ .Site.Params.umamiId }}"></script>
    {{- end -}}
-</body>
+  </body>
 </html>
@@ -1,7 +1,6 @@
 {{- define "main" -}}
-
-<!-- Page header -->
-<header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
+  <!-- Page header -->
+  <header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
    <div class="max-w-4xl">
      {{- with .Data.Singular -}}
        <span class="badge badge-pulse mb-5 inline-block">{{ . | title }}</span>
@@ -13,12 +12,12 @@
        <p class="text-chalk text-lg mt-5 max-w-xl leading-relaxed text-pretty font-body">{{ . }}</p>
      {{- end -}}
    </div>
-</header>
+  </header>

-<div class="gradient-line"></div>
+  <div class="gradient-line"></div>

-<!-- Posts grid -->
-<section class="gutter-x py-16 md:py-24">
+  <!-- Posts grid -->
+  <section class="gutter-x py-16 md:py-24">
    {{- if .Paginator.Pages -}}
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
        {{- range .Paginator.Pages -}}
@@ -29,6 +28,5 @@
    {{- else -}}
      <p class="label text-fog text-center py-24">No posts yet.</p>
    {{- end -}}
-</section>
-
+  </section>
 {{- end -}}
@@ -1,18 +1,16 @@
 {{- define "main" -}}
-
-<!-- Page header -->
-<header class="gutter-x pt-36 pb-16 border-b border-mist">
-  <div class="max-w-3xl">
+  <!-- Page header -->
+  <header class="gutter-x pt-36 pb-16 border-b border-mist">
+    <div class="max-w-2xl">
      <h1 class="font-display text-5xl md:text-7xl text-paper text-balance mb-5">{{ .Title }}</h1>
      {{- with .Description -}}
        <p class="text-chalk text-xl leading-relaxed text-pretty">{{ . }}</p>
      {{- end -}}
    </div>
-</header>
+  </header>

-<!-- Page content -->
-<article class="gutter-x py-16 md:py-24 max-w-3xl prose-editorial">
+  <!-- Page content -->
+  <article class="gutter-x py-16 md:py-24 max-w-3xl prose-editorial">
    {{ .Content }}
-</article>
-
+  </article>
 {{- end -}}
@@ -1,17 +1,16 @@
 {{- define "main" -}}
-
-<!-- Taxonomy header -->
-<header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
+  <!-- Taxonomy header -->
+  <header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
    <div class="max-w-4xl">
      <span class="badge badge-frost text-void mb-5 inline-block">Browse</span>
      <h1 class="font-display text-5xl md:text-7xl text-paper leading-none">{{ .Title }}</h1>
    </div>
-</header>
+  </header>

-<div class="gradient-line"></div>
+  <div class="gradient-line"></div>

-<!-- Terms badge cloud -->
-<section class="gutter-x py-16 md:py-24">
+  <!-- Terms badge cloud -->
+  <section class="gutter-x py-16 md:py-24">
    {{- if .Data.Terms -}}
      <div class="flex flex-wrap gap-4">
        {{- range .Data.Terms.Alphabetical -}}
@@ -19,14 +18,18 @@
            href="{{ .Page.RelPermalink }}"
            class="group card-comic flex items-baseline gap-3 bg-concrete px-5 py-4 hover:border-heat transition-all"
          >
-      <span class="font-display text-2xl text-paper group-hover:text-heat transition-colors leading-none">{{ .Page.Title }}</span>
-      <span class="badge badge-outline text-xs ml-1 group-hover:bg-heat group-hover:text-white group-hover:border-heat transition-all">{{ .Count }}</span>
+            <span class="font-display text-2xl text-paper group-hover:text-heat transition-colors leading-none"
+              >{{ .Page.Title }}</span
+            >
+            <span
+              class="badge badge-outline text-xs ml-1 group-hover:bg-heat group-hover:text-white group-hover:border-heat transition-all"
+              >{{ .Count }}</span
+            >
          </a>
        {{- end -}}
      </div>
    {{- else -}}
      <p class="label text-fog text-center py-24">No entries yet.</p>
    {{- end -}}
-</section>
-
+  </section>
 {{- end -}}
@@ -1,23 +1,25 @@
 {{- define "main" -}}
-
-<!-- Header -->
-<header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
+  <!-- Header -->
+  <header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
    <span class="badge badge-frost text-void mb-5 inline-block">Contributors</span>
    <h1 class="font-display text-5xl md:text-7xl text-paper leading-none">Authors</h1>
-</header>
+  </header>

-<div class="gradient-line"></div>
+  <div class="gradient-line"></div>

-<!-- Authors grid -->
-<section class="gutter-x py-16 md:py-24">
+  <!-- Authors grid -->
+  <section class="gutter-x py-16 md:py-24">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {{- range .Pages -}}
        <a href="{{ .RelPermalink }}" class="group card-comic flex flex-col items-start gap-5 p-6 bg-concrete">
-
          <!-- Avatar — bundle avatar.* first, fall back to .Params.avatar -->
          {{- $avatarRes := .Resources.GetMatch "avatar.*" -}}
          {{- $avatarSrc := "" -}}
-      {{- with $avatarRes }}{{ $avatarSrc = .RelPermalink }}{{ else }}{{ with $.Params.avatar }}{{ $avatarSrc = . }}{{ end }}{{ end -}}
+          {{- with $avatarRes }}
+            {{ $avatarSrc = .RelPermalink }}
+          {{ else }}
+            {{ with $.Params.avatar }}{{ $avatarSrc = . }}{{ end }}
+          {{ end -}}
          {{- if $avatarSrc -}}
            <div class="w-20 h-20 overflow-hidden border border-zinc group-hover:border-heat transition-colors">
              <img
@@ -25,7 +27,7 @@
                alt="{{ .Params.name | default .Title }}"
                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                loading="lazy"
-        >
+              />
            </div>
          {{- else -}}
            <div class="w-20 h-20 bg-zinc border border-zinc flex items-center justify-center">
@@ -33,6 +35,7 @@
            </div>
          {{- end -}}

+
          <!-- Info -->
          <div class="flex-1">
            <h2 class="font-display text-xl text-paper group-hover:text-heat transition-colors mb-2 leading-none">
@@ -43,12 +46,14 @@
            {{- end -}}
          </div>

-      <span class="badge badge-outline group-hover:bg-heat group-hover:text-white group-hover:border-heat transition-all mt-auto">
-        View works {{ partial "icon.html" "arrow-right" }}
+          <span
+            class="badge badge-outline group-hover:bg-heat group-hover:text-white group-hover:border-heat transition-all mt-auto"
+          >
+            View works
+            {{ partial "icon.html" "arrow-right" }}
          </span>
        </a>
      {{- end -}}
    </div>
-</section>
-
+  </section>
 {{- end -}}
@@ -1,16 +1,20 @@
 {{- define "main" -}}
-{{- $slug  := .File.Dir | strings.TrimSuffix "/" | path.Base -}}
-{{- $posts := where .Site.RegularPages "Params.author" $slug -}}
+  {{- $slug  := .File.Dir | strings.TrimSuffix "/" | path.Base -}}
+  {{- $posts := where .Site.RegularPages "Params.author" $slug -}}

-<!-- ── PROFILE HEADER ────────────────────────────────────────── -->
-<header class="gutter-x pt-36 pb-20 border-b border-zinc speed-lines">
+
+  <!-- ── PROFILE HEADER ────────────────────────────────────────── -->
+  <header class="gutter-x pt-36 pb-20 border-b border-zinc speed-lines">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-col md:flex-row gap-10 md:gap-16 items-start">
-
        <!-- Avatar — page bundle avatar.* takes precedence, falls back to .Params.avatar -->
        {{- $avatarRes := .Resources.GetMatch "avatar.*" -}}
        {{- $avatarSrc := "" -}}
-      {{- with $avatarRes }}{{ $avatarSrc = .RelPermalink }}{{ else }}{{ with $.Params.avatar }}{{ $avatarSrc = . }}{{ end }}{{ end -}}
+        {{- with $avatarRes }}
+          {{ $avatarSrc = .RelPermalink }}
+        {{ else }}
+          {{ with $.Params.avatar }}{{ $avatarSrc = . }}{{ end }}
+        {{ end -}}
        {{- if $avatarSrc -}}
          <div class="flex-shrink-0 w-36 h-36 md:w-48 md:h-48 overflow-hidden border-2 border-heat neon-heat">
            <img
@@ -18,14 +22,17 @@
              alt="{{ .Params.name | default .Title }}"
              class="w-full h-full object-cover"
              loading="lazy"
-        >
+            />
          </div>
        {{- else -}}
-      <div class="flex-shrink-0 w-36 h-36 md:w-48 md:h-48 bg-concrete border-2 border-zinc flex items-center justify-center">
+          <div
+            class="flex-shrink-0 w-36 h-36 md:w-48 md:h-48 bg-concrete border-2 border-zinc flex items-center justify-center"
+          >
            <span class="font-display text-5xl text-smoke">{{ substr (.Params.name | default .Title) 0 1 }}</span>
          </div>
        {{- end -}}

+
        <!-- Info -->
        <div class="flex-1 min-w-0">
          <span class="badge badge-gradient mb-5 inline-block">Artist</span>
@@ -36,44 +43,45 @@
            <p class="text-chalk text-lg max-w-2xl leading-relaxed text-pretty mb-8 font-body font-light">{{ . }}</p>
          {{- end -}}

+
          <!-- Social links — values may be full URLs or bare slugs -->
          {{- with .Params.social -}}
            {{- $bases := dict "instagram" "https://instagram.com/" "x" "https://x.com/" "twitter" "https://x.com/" "github" "https://github.com/" "behance" "https://www.behance.net/" "artstation" "https://www.artstation.com/" -}}
            <div class="flex flex-wrap gap-3">
              {{- range $platform, $handle := . -}}
                {{- $href := cond (hasPrefix $handle "http") $handle (printf "%s%s" (index $bases $platform | default "#") $handle) -}}
-          <a
-            href="{{ $href }}"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="badge badge-outline"
-          >{{ $platform | upper }} {{ partial "icon.html" "arrow-external" }}</a>
+                <a href="{{ $href }}" target="_blank" rel="noopener noreferrer" class="badge badge-outline"
+                  >{{ $platform | upper }} {{ partial "icon.html" "arrow-external" }}</a
+                >
              {{- end -}}
            </div>
          {{- end -}}

+
          <!-- Post count -->
          {{- if $posts -}}
-        <p class="label text-fog mt-6">{{ len $posts }} {{ if eq (len $posts) 1 }}editorial{{ else }}editorials{{ end }}</p>
+            <p class="label text-fog mt-6">
+              {{ len $posts }} {{ if eq (len $posts) 1 }}editorial{{ else }}editorials{{ end }}
+            </p>
          {{- end -}}
        </div>
-
      </div>
    </div>
-</header>
+  </header>

-<div class="gradient-line"></div>
+  <div class="gradient-line"></div>

-<!-- ── AUTHOR BIO (Markdown body) ────────────────────────────── -->
-{{- with .Content -}}
-<div class="gutter-x py-12 border-b border-zinc">
+  <!-- ── AUTHOR BIO (Markdown body) ────────────────────────────── -->
+  {{- with .Content -}}
+    <div class="gutter-x py-12 border-b border-zinc">
      <div class="max-w-5xl mx-auto prose-editorial">{{ . }}</div>
-</div>
-{{- end -}}
+    </div>
+  {{- end -}}

-<!-- ── AUTHOR'S POSTS ─────────────────────────────────────────── -->
-{{- if $posts -}}
-<section class="gutter-x py-16 md:py-24">
+
+  <!-- ── AUTHOR'S POSTS ─────────────────────────────────────────── -->
+  {{- if $posts -}}
+    <section class="gutter-x py-16 md:py-24">
      <div class="max-w-5xl mx-auto">
        <div class="flex items-center gap-5 mb-10">
          <h2 class="font-display text-3xl md:text-5xl text-paper leading-none">
@@ -87,11 +95,11 @@
          {{- end -}}
        </div>
      </div>
-</section>
-{{- else -}}
-<div class="gutter-x py-24 text-center">
+    </section>
+  {{- else -}}
+    <div class="gutter-x py-24 text-center">
      <p class="label text-fog">No editorials published yet.</p>
-</div>
-{{- end -}}
+    </div>
+  {{- end -}}

 {{- end -}}
@@ -1,16 +1,17 @@
 {{- define "main" -}}
-
-<!-- Category header -->
-<header class="gutter-x pt-36 pb-16 border-b border-mist">
+  <!-- Category header -->
+  <header class="gutter-x pt-36 pb-16 border-b border-mist">
    <div class="max-w-4xl">
      <span class="label text-ash block mb-4">Category</span>
      <h1 class="font-display text-5xl md:text-7xl text-paper text-balance">{{ .Title }}</h1>
-    <p class="text-ash label mt-5">{{ len .Pages }} {{ if eq (len .Pages) 1 }}editorial{{ else }}editorials{{ end }}</p>
+      <p class="text-ash label mt-5">
+        {{ len .Pages }} {{ if eq (len .Pages) 1 }}editorial{{ else }}editorials{{ end }}
+      </p>
    </div>
-</header>
+  </header>

-<!-- Posts grid -->
-<section class="gutter-x py-16 md:py-24">
+  <!-- Posts grid -->
+  <section class="gutter-x py-16 md:py-24">
    {{- if .Paginator.Pages -}}
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-5 gap-y-12">
        {{- range .Paginator.Pages -}}
@@ -21,6 +22,5 @@
    {{- else -}}
      <p class="text-ash label text-center py-24">No posts in this category yet.</p>
    {{- end -}}
-</section>
-
+  </section>
 {{- end -}}
@@ -1,42 +1,46 @@
 {{- define "main" -}}
-{{- $posts    := where .Site.RegularPages "Section" "posts" -}}
-{{- $featured := where $posts "Params.featured" true -}}
-{{- $hero     := index $featured 0 -}}
-{{- $latest   := where $posts "Permalink" "ne" $hero.Permalink -}}
+  {{- $posts    := where .Site.RegularPages "Section" "posts" -}}
+  {{- $featured := where $posts "Params.featured" true -}}
+  {{- $hero     := index $featured 0 -}}
+  {{- $latest   := where $posts "Permalink" "ne" $hero.Permalink -}}

-<!-- ── HERO ──────────────────────────────────────────────────── -->
-{{- with $hero -}}
-<section class="relative min-h-screen flex items-end overflow-hidden noise">

-  <!-- Background media — bundle banner.png first, fallback to front matter -->
+  <!-- ── HERO ──────────────────────────────────────────────────── -->
+  {{- with $hero -}}
+    <section class="relative min-h-screen flex items-end overflow-hidden noise">
+      <!-- Background media — bundle banner.png → 01.png → front matter -->
      {{- $heroBanner := .Resources.GetMatch "banner.png" -}}
-  {{- if not $heroBanner -}}{{- $heroBanner = .Resources.GetMatch "banner.*" -}}{{- end -}}
+      {{- if not $heroBanner -}}{{- $heroBanner = .Resources.GetMatch "01.png" -}}{{- end -}}
      {{- if $heroBanner -}}
        <div class="absolute inset-0">
          {{- partial "img.html" (dict "res" $heroBanner "widths" (slice 1200 1920 2560) "sizes" "100vw" "class" "w-full h-full object-cover" "alt" "" "loading" "eager") -}}
        </div>
      {{- else -}}
        {{- $heroBannerSrc := "" -}}
-  {{- with .Params.background }}{{ $heroBannerSrc = .src }}{{ else }}{{ with $.Params.banner }}{{ $heroBannerSrc = .src }}{{ end }}{{ end -}}
+        {{- with .Params.background }}
+          {{ $heroBannerSrc = .src }}
+        {{ else }}
+          {{ with $.Params.banner }}{{ $heroBannerSrc = .src }}{{ end }}
+        {{ end -}}
        {{- with $heroBannerSrc -}}
          <div class="absolute inset-0">
-    <img src="{{ . }}" alt="" class="w-full h-full object-cover" loading="eager" decoding="async">
+            <img src="{{ . }}" alt="" class="w-full h-full object-cover" loading="eager" decoding="async" />
          </div>
        {{- end -}}
      {{- end -}}

+
      <!-- Cinematic overlay -->
      <div class="absolute inset-0 overlay-gradient-hero"></div>

      <!-- Hero content -->
      <div class="relative z-10 gutter-x pb-20 md:pb-32 w-full">
        <div class="max-w-5xl">
-
          <!-- Drop label + category badges -->
          <div class="flex flex-wrap items-center gap-3 mb-6">
            <span class="badge badge-pulse">Featured Drop</span>
            {{- with .Params.categories -}}
-        {{- range first 1 . -}}
+              {{- range . -}}
                <a href="/categories/{{ . | urlize }}/" class="badge badge-outline">{{ . }}</a>
              {{- end -}}
            {{- end -}}
@@ -48,32 +52,45 @@
          </h1>

          <!-- Description -->
-      <p class="text-chalk text-base md:text-lg max-w-2xl mb-10 leading-relaxed text-pretty font-body opacity-90 line-clamp-3">
+          <p
+            class="text-chalk text-base md:text-lg max-w-2xl mb-10 leading-relaxed text-pretty font-body opacity-90 line-clamp-3"
+          >
            {{- .Description -}}
          </p>

          <!-- CTA + author -->
          <div class="flex flex-wrap items-center gap-6">
-        <a href="{{ .RelPermalink }}" class="btn btn-outline">View Editorial {{ partial "icon.html" "arrow-right" }}</a>
+            <a href="{{ .RelPermalink }}" class="btn btn-outline"
+              >View Editorial {{ partial "icon.html" "arrow-right" }}</a
+            >
            {{- with .Params.author -}}
              {{- $author := site.GetPage (printf "authors/%s" .) -}}
              {{- with $author -}}
                <div class="flex items-center gap-3">
                  {{- $avRes := .Resources.GetMatch "avatar.*" -}}
                  {{- $avSrc := "" -}}
-            {{- with $avRes }}{{ $avSrc = .RelPermalink }}{{ else }}{{ with $author.Params.avatar }}{{ $avSrc = . }}{{ end }}{{ end -}}
+                  {{- with $avRes }}
+                    {{ $avSrc = .RelPermalink }}
+                  {{ else }}
+                    {{ with $author.Params.avatar }}{{ $avSrc = . }}{{ end }}
+                  {{ end -}}
                  {{- with $avSrc -}}
-            <img src="{{ . }}" alt="{{ $author.Params.name | default $author.Title }}"
-              class="w-8 h-8 object-cover border border-heat/50">
+                    <img
+                      src="{{ . }}"
+                      alt="{{ $author.Params.name | default $author.Title }}"
+                      class="w-8 h-8 object-cover border border-heat/50"
+                    />
                  {{- end -}}
                  <span class="label text-chalk">
-              By <a href="{{ .RelPermalink }}" class="text-heat hover:text-frost transition-colors">{{ .Params.name | default .Title }}</a>
+                    By
+                    <a href="{{ .RelPermalink }}" class="text-heat hover:text-frost transition-colors"
+                      >{{ .Params.name | default .Title }}</a
+                    >
                  </span>
                </div>
              {{- end -}}
            {{- end -}}
          </div>
-
        </div>
      </div>

@@ -81,23 +98,29 @@
      <div class="absolute bottom-8 right-8 z-10 hidden md:flex flex-col items-center gap-2">
        <span class="label text-fog" style="writing-mode: vertical-lr; letter-spacing: 0.25em;">SCROLL</span>
        <div class="w-px h-12 bg-zinc relative overflow-hidden">
-      <div class="absolute top-0 left-0 right-0 h-full"
+          <div
+            class="absolute top-0 left-0 right-0 h-full"
            style="background: linear-gradient(var(--color-heat), var(--color-frost));
-               animation: scroll-line 1.8s ease-in-out infinite;"></div>
+               animation: scroll-line 1.8s ease-in-out infinite;"
+          ></div>
        </div>
      </div>
+    </section>
+  {{- end -}}

-</section>
-{{- end -}}

-<div class="gradient-line" style="opacity:0.2"></div>
-
-<!-- ── LATEST POSTS ──────────────────────────────────────────── -->
-<section class="gutter-x py-16 md:py-24 relative overflow-hidden">
+  <div class="gradient-line" style="opacity:0.2"></div>

+  <!-- ── LATEST POSTS ──────────────────────────────────────────── -->
+  <section class="gutter-x py-16 md:py-24 relative overflow-hidden">
    <!-- Decorative graffiti tag behind heading -->
-  <div class="graffiti-tag absolute -top-6 -right-4 opacity-100 select-none pointer-events-none"
-    style="-webkit-text-stroke-color: rgba(0,200,255,0.07);" aria-hidden="true">DROPS</div>
+    <div
+      class="graffiti-tag absolute -top-6 -right-4 opacity-100 select-none pointer-events-none"
+      style="-webkit-text-stroke-color: rgba(0,200,255,0.07);"
+      aria-hidden="true"
+    >
+      DROPS
+    </div>

    <div class="relative z-10 flex flex-wrap items-end justify-between gap-4 mb-10">
      <h2 class="font-display text-5xl md:text-7xl leading-none">
@@ -107,21 +130,23 @@
    </div>

    <div class="relative z-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
-    {{- range first 8 $latest -}}
+      {{- range first 4 $latest -}}
        {{- partial "post-card.html" . -}}
      {{- end -}}
    </div>

-  {{- if gt (len $latest) 8 -}}
+    {{- if gt (len $latest) 4 -}}
      <div class="relative z-10 mt-14 text-center">
-    <a href="/posts/" class="btn btn-outline">View All {{ len $posts }} Posts {{ partial "icon.html" "arrow-right" }}</a>
+        <a href="/posts/" class="btn btn-outline"
+          >View All {{ len $posts }} Posts {{ partial "icon.html" "arrow-right" }}</a
+        >
      </div>
    {{- end -}}

-</section>
+  </section>

-<!-- ── ABOUT STRIP ───────────────────────────────────────────── -->
-<section class="bg-concrete border-t border-b border-zinc gutter-x py-16 md:py-20 spray-bg relative overflow-hidden">
+  <!-- ── ABOUT STRIP ───────────────────────────────────────────── -->
+  <section class="bg-concrete border-t border-b border-zinc gutter-x py-16 md:py-20 spray-bg relative overflow-hidden">
    <div class="max-w-3xl mx-auto text-center relative z-10">
      <span class="badge badge-frost text-void mb-6 inline-block">About the Magazine</span>
      <p class="font-display text-3xl md:text-5xl text-paper leading-tight text-balance mb-10">
@@ -129,6 +154,5 @@
      </p>
      <a href="/about/" class="btn btn-outline">About the magazine {{ partial "icon.html" "arrow-right" }}</a>
    </div>
-</section>
-
+  </section>
 {{- end -}}
@@ -1,24 +1,39 @@
 {{- /* Inline author byline for post single pages.
  Expects the author page as context (.).
-*/ -}}
+  */
+-}}
 <div class="flex items-center gap-4 py-6 border-t border-b border-zinc my-8 max-w-2xl">
  {{- $avatarRes := .Resources.GetMatch "avatar.*" -}}
  {{- if $avatarRes -}}
    {{- $av := $avatarRes.Resize "96x webp" -}}
    <a href="{{ $.RelPermalink }}" class="flex-shrink-0">
-      <img src="{{ $av.RelPermalink }}" alt="{{ $.Params.name | default $.Title }}" class="w-16 h-16 object-cover border border-zinc hover:border-heat transition-colors" loading="lazy" decoding="async">
+      <img
+        src="{{ $av.RelPermalink }}"
+        alt="{{ $.Params.name | default $.Title }}"
+        class="w-16 h-16 object-cover border border-zinc hover:border-heat transition-colors"
+        loading="lazy"
+        decoding="async"
+      />
    </a>
-  {{- else -}}{{- with .Params.avatar -}}
+  {{- else -}}
+    {{- with .Params.avatar -}}
      <a href="{{ $.RelPermalink }}" class="flex-shrink-0">
-      <img src="{{ . }}" alt="{{ $.Params.name | default $.Title }}" class="w-16 h-16 object-cover border border-zinc hover:border-heat transition-colors" loading="lazy" decoding="async">
+        <img
+          src="{{ . }}"
+          alt="{{ $.Params.name | default $.Title }}"
+          class="w-16 h-16 object-cover border border-zinc hover:border-heat transition-colors"
+          loading="lazy"
+          decoding="async"
+        />
      </a>
-  {{- end -}}{{- end -}}
+    {{- end -}}
+  {{- end -}}
  <div class="min-w-0">
    <a href="{{ .RelPermalink }}" class="text-base font-display text-heat hover:text-frost transition-colors block">
      {{ .Params.name | default .Title }}
    </a>
    {{- with .Params.bio -}}
-    <p class="text-fog text-sm leading-relaxed line-clamp-2 font-body">{{ . }}</p>
+      <p class="text-fog text-md leading-relaxed line-clamp-2 font-body">{{ . }}</p>
    {{- end -}}
  </div>
 </div>
@@ -1,15 +1,15 @@
 <footer class="relative overflow-hidden border-t border-zinc gutter-x py-14 mt-auto bg-ink speed-lines">
-
  <!-- Decorative background text -->
  <div
    class="graffiti-tag absolute -bottom-6 -right-4 select-none pointer-events-none"
    style="-webkit-text-stroke-color: rgba(255,26,140,0.07); opacity: 1;"
    aria-hidden="true"
-  >PIVOINE</div>
+  >
+    PIVOINE
+  </div>

  <div class="gradient-line mb-10 relative z-10"></div>
  <div class="relative z-10 flex flex-col md:flex-row md:items-start justify-between gap-10">
-
    <!-- Brand -->
    <div>
      <a href="/" class="block mb-4 hover:opacity-90 transition-opacity w-fit" aria-label="{{ .Site.Title }} Home">
@@ -23,14 +23,31 @@
      <ul class="flex flex-wrap gap-x-8 gap-y-4">
        {{- range .Site.Menus.footer -}}
          <li>
+            {{- if hasPrefix .URL "http" -}}
+              <a
+                href="{{ .URL }}"
+                target="_blank"
+                rel="noopener"
+                class="label text-fog hover:text-heat transition-colors"
+              >
+                {{- .Name -}}{{ partial "icon.html" "arrow-external" }}
+              </a>
+            {{- else -}}
              <a href="{{ .URL }}" class="label text-fog hover:text-heat transition-colors">{{ .Name }}</a>
+            {{- end -}}
          </li>
        {{- end -}}
        {{- with .Site.Params.social -}}
          {{- range $platform, $url := . -}}
            <li>
-            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="label text-fog hover:text-frost transition-colors">
-              {{- $platform | upper -}} {{ partial "icon.html" "arrow-external" }}
+              <a
+                href="{{ $url }}"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="label text-fog hover:text-frost transition-colors"
+              >
+                {{- $platform | upper -}}
+                {{ partial "icon.html" "arrow-external" }}
              </a>
            </li>
          {{- end -}}
@@ -1,81 +1,133 @@
-<meta charset="utf-8">
-<meta name="htmx-config" content='{"globalViewTransitions":true,"scrollBehavior":"smooth"}'>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="theme-color" content="#FF1A8C">
+<meta charset="utf-8" />
+<meta name="htmx-config" content='{"globalViewTransitions":true,"scrollBehavior":"smooth"}' />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="theme-color" content="#FF1A8C" />

 <title>
  {{- if .IsHome -}}
-    {{- .Site.Title }} — {{ .Site.Params.tagline -}}
+    {{- .Site.Title }} —
+    {{ .Site.Params.tagline -}}
  {{- else -}}
-    {{- .Title }} — {{ .Site.Title -}}
+    {{- .Title }} —
+    {{ .Site.Title -}}
  {{- end -}}
 </title>

-<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
-<meta name="author" content="{{ with .Params.author }}{{ . }}{{ else }}{{ .Site.Params.author }}{{ end }}">
-{{- if .Site.Params.robots }}<meta name="robots" content="{{ .Site.Params.robots }}">{{ end }}
+<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
+<meta name="author" content="{{ with .Params.author }}{{ . }}{{ else }}{{ .Site.Params.author }}{{ end }}" />
+{{- if .Site.Params.robots }}<meta name="robots" content="{{ .Site.Params.robots }}" />{{ end }}
+

 <!-- Open Graph -->
-<meta property="og:site_name"  content="{{ .Site.Title }}">
-<meta property="og:title"      content="{{ if .IsHome }}{{ .Site.Title }} — {{ .Site.Params.tagline }}{{ else }}{{ .Title }}{{ end }}">
-<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
-<meta property="og:url"        content="{{ .Permalink }}">
-<meta property="og:type"       content="{{ if .IsPage }}article{{ else }}website{{ end }}">
-<meta property="og:locale"     content="{{ .Site.LanguageCode | default "en_US" | replaceRE "-" "_" }}">
+<meta property="og:site_name" content="{{ .Site.Title }}" />
+<meta
+  property="og:title"
+  content="{{ if .IsHome }}
+    {{ .Site.Title }} —
+    {{ .Site.Params.tagline }}
+  {{ else }}
+    {{ .Title }}
+  {{ end }}"
+/>
+<meta
+  property="og:description"
+  content="{{ with .Description }}
+    {{ . }}
+  {{ else }}
+    {{ .Site.Params.description }}
+  {{ end }}"
+/>
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
+<meta property="og:locale" content="{{ .Site.Language.Locale | default "en_US" | replaceRE "-" "_" }}" />
 {{- $ogImage := .Site.Params.ogImage -}}
 {{- $ogImageAlt := .Site.Title -}}
 {{- with .Params.banner -}}
  {{- $ogImage = .src -}}
  {{- $ogImageAlt = $.Title -}}
 {{- end -}}
-<meta property="og:image"      content="{{ $ogImage | absURL }}">
-<meta property="og:image:alt"  content="{{ $ogImageAlt }}">
-<meta property="og:image:width"  content="1200">
-<meta property="og:image:height" content="630">
+<meta property="og:image" content="{{ $ogImage | absURL }}" />
+<meta property="og:image:alt" content="{{ $ogImageAlt }}" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />

 {{- if .IsPage }}
-<meta property="article:published_time"  content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
-<meta property="article:modified_time"   content="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}">
-{{- with .Params.author }}<meta property="article:author" content="{{ . }}">{{ end }}
-{{- range .Params.categories }}<meta property="article:section" content="{{ . }}">{{ end }}
-{{- range .Params.tags }}<meta property="article:tag"     content="{{ . }}">{{ end }}
+  <meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}" />
+  <meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}" />
+  {{- with .Params.author }}<meta property="article:author" content="{{ . }}" />{{ end }}
+  {{- range .Params.categories }}<meta property="article:section" content="{{ . }}" />{{ end }}
+  {{- range .Params.tags }}<meta property="article:tag" content="{{ . }}" />{{ end }}
 {{- end }}

+
 <!-- Twitter / X Card -->
-<meta name="twitter:card"        content="summary_large_image">
+<meta name="twitter:card" content="summary_large_image" />
 {{- with .Site.Params.twitterHandle }}
-<meta name="twitter:site"        content="@{{ . }}">
+  <meta name="twitter:site" content="@{{ . }}" />
 {{- end }}
-<meta name="twitter:title"       content="{{ if .IsHome }}{{ .Site.Title }} — {{ .Site.Params.tagline }}{{ else }}{{ .Title }}{{ end }}">
-<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
-<meta name="twitter:image"       content="{{ $ogImage | absURL }}">
-<meta name="twitter:image:alt"   content="{{ $ogImageAlt }}">
+<meta
+  name="twitter:title"
+  content="{{ if .IsHome }}
+    {{ .Site.Title }} —
+    {{ .Site.Params.tagline }}
+  {{ else }}
+    {{ .Title }}
+  {{ end }}"
+/>
+<meta
+  name="twitter:description"
+  content="{{ with .Description }}
+    {{ . }}
+  {{ else }}
+    {{ .Site.Params.description }}
+  {{ end }}"
+/>
+<meta name="twitter:image" content="{{ $ogImage | absURL }}" />
+<meta name="twitter:image:alt" content="{{ $ogImageAlt }}" />

 <!-- Canonical -->
-<link rel="canonical" href="{{ .Permalink }}">
+<link rel="canonical" href="{{ .Permalink }}" />

 <!-- JSON-LD structured data -->
 {{- partial "schema.html" . -}}

-<!-- Fonts — Bebas Neue + Barlow + Share Tech Mono (non-render-blocking) -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap" media="print" onload="this.media='all'">
-<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap"></noscript>

-<!-- CSS via Hugo Pipes + PostCSS + Tailwind v4 -->
-{{- $css := resources.Get "css/main.css" | css.PostCSS -}}
+<!-- Fonts — Bebas Neue + Barlow + Share Tech Mono (non-render-blocking) -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="preload"
+  as="style"
+  href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap"
+/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap"
+  media="print"
+  onload="this.media='all'"
+/>
+<noscript
+  ><link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap"
+/></noscript>
+
+<!-- CSS via Hugo Pipes + Tailwind v4 (native css.TailwindCSS, no PostCSS) -->
+{{- $css := resources.Get "css/main.css" | css.TailwindCSS -}}
 {{- if eq hugo.Environment "production" -}}
  {{- $css = $css | minify | fingerprint "sha256" -}}
 {{- end -}}
-<link rel="stylesheet" href="{{ $css.RelPermalink }}"{{ if eq hugo.Environment "production" }} integrity="{{ $css.Data.Integrity }}"{{ end }}>
+<link
+  rel="stylesheet"
+  href="{{ $css.RelPermalink }}"
+  {{ if eq hugo.Environment "production" }}integrity="{{ $css.Data.Integrity }}"{{ end }}
+/>

 <!-- Favicon & PWA -->
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="icon" href="/favicon.svg" type="image/svg+xml">
-<link rel="icon" href="/favicon.ico" sizes="any">
-<link rel="manifest" href="/site.webmanifest">
-<meta name="msapplication-TileColor" content="#050510">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+<link rel="icon" href="/favicon.ico" sizes="any" />
+<link rel="manifest" href="/site.webmanifest" />
+<meta name="msapplication-TileColor" content="#050510" />
@@ -1,11 +1,55 @@
 {{- /* Inline SVG icon. Usage: {{ partial "icon.html" "arrow-right" }}
-     Renders at 1em × 1em, inherits currentColor, aria-hidden.
-*/ -}}
+Renders at 1em × 1em, inherits currentColor, aria-hidden. */ -}}
 {{- $name := . -}}
 {{- if eq $name "arrow-right" -}}
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:-0.1em"><path d="M2 8h12"/><path d="M9 3l5 5-5 5"/></svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    width="1em"
+    height="1em"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    style="display:inline-block;vertical-align:-0.1em"
+  >
+    <path d="M2 8h12" />
+    <path d="M9 3l5 5-5 5" />
+  </svg>
 {{- else if eq $name "arrow-left" -}}
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:-0.1em"><path d="M14 8H2"/><path d="M7 3L2 8l5 5"/></svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    width="1em"
+    height="1em"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    style="display:inline-block;vertical-align:-0.1em"
+  >
+    <path d="M14 8H2" />
+    <path d="M7 3L2 8l5 5" />
+  </svg>
 {{- else if eq $name "arrow-external" -}}
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:-0.1em"><path d="M4 12L12 4"/><path d="M6 4h6v6"/></svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    width="1em"
+    height="1em"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    style="display:inline-block;vertical-align:-0.1em"
+  >
+    <path d="M4 12L12 4" />
+    <path d="M6 4h6v6" />
+  </svg>
 {{- end -}}
@@ -10,7 +10,8 @@
  class   — CSS classes applied to <img>
  alt     — alt text (default "")
  loading — "lazy" or "eager" (default "lazy")
-*/ -}}
+  */
+-}}
 {{- $res     := .res -}}
 {{- $widths  := .widths  | default (slice 800 1600) -}}
 {{- $sizes   := .sizes   | default "100vw" -}}
@@ -35,4 +36,4 @@
  height="{{ $primary.Height }}"
  loading="{{ $loading }}"
  decoding="async"
->
+/>
@@ -1,8 +1,7 @@
 {{- /*
  Logo image.
-  Usage: {{ partial "logo.html" (dict "class" "h-8 w-auto") }}
-  Params:
-    class — CSS classes on the <img> element (default: "h-9 w-auto")
-*/ -}}
+  Usage: {{ partial "logo.html" (dict "class" "h-8 w-auto")
+}}
+Params: class — CSS classes on the <img /> element (default: "h-9 w-auto") */ -}}
 {{- $class := .class | default "h-9 w-auto" -}}
-<img src="/logo.svg" class="{{ $class }} logo-img" alt="{{ site.Title }}" width="512" height="512">
+<img src="/logo.svg" class="{{ $class }} logo-img" alt="{{ site.Title }}" width="512" height="512" />
@@ -2,14 +2,11 @@
  Renders an image or video from a front matter map.

  Usage:
-    {{ partial "media.html" (dict "media" .Params.banner "class" "w-full h-full object-cover") }}
-
-  Parameters:
-    media  — map with keys: type (image|video), src, alt
-    class  — CSS classes applied to the img/video element
-    lazy   — set to false to disable lazy loading (default true)
-*/ -}}
+  {{ partial "media.html" (dict "media" .Params.banner "class" "w-full h-full object-cover")
+}}

+Parameters: media — map with keys: type (image|video), src, alt class — CSS classes applied to the img/video element
+lazy — set to false to disable lazy loading (default true) */ -}}
 {{- $media := .media -}}
 {{- $class := .class | default "" -}}
 {{- $lazy  := .lazy  | default true -}}
@@ -23,14 +20,14 @@
      loop
      muted
      playsinline
-    {{- with .alt }} aria-label="{{ . }}"{{ end }}
+      {{- with .alt }}aria-label="{{ . }}"{{ end }}
    ></video>
  {{- else -}}
    <img
      class="{{ $class }}"
      src="{{ .src }}"
      alt="{{ .alt | default "" }}"
-    {{- if $lazy }} loading="lazy" decoding="async"{{ end }}
-  >
+      {{- if $lazy }}loading="lazy" decoding="async"{{ end }}
+    />
  {{- end -}}
 {{- end -}}
@@ -10,7 +10,11 @@
    :class="$store.nav.open || scrolled ? 'bg-ink/95 backdrop-blur-md shadow-[0_1px_0_var(--color-zinc)]' : ''"
  >
    <!-- Logotype -->
-    <a href="/" class="flex items-center gap-3 hover:opacity-90 transition-opacity" aria-label="{{ .Site.Params.logoText }} Home">
+    <a
+      href="/"
+      class="flex items-center gap-3 hover:opacity-90 transition-opacity"
+      aria-label="{{ .Site.Params.logoText }} Home"
+    >
      {{- partial "logo.html" (dict "id" "nav" "class" "h-12 w-auto flex-shrink-0") -}}
      <span class="logo-glitch font-display text-2xl md:text-3xl leading-none tracking-wide">
        {{- .Site.Params.logoText -}}
@@ -45,12 +49,18 @@
      aria-controls="mobile-menu"
      aria-label="Toggle navigation"
    >
-      <span class="block h-px w-6 bg-current transition-all duration-300 origin-center"
-        :class="$store.nav.open ? 'rotate-45 translate-y-[7px]' : ''"></span>
-      <span class="block h-px w-4 bg-current transition-all duration-200"
-        :class="$store.nav.open ? 'opacity-0' : 'opacity-100'"></span>
-      <span class="block h-px w-6 bg-current transition-all duration-300 origin-center"
-        :class="$store.nav.open ? '-rotate-45 -translate-y-[7px]' : ''"></span>
+      <span
+        class="block h-px w-6 bg-current transition-all duration-300 origin-center"
+        :class="$store.nav.open ? 'rotate-45 translate-y-[7px]' : ''"
+      ></span>
+      <span
+        class="block h-px w-4 bg-current transition-all duration-200"
+        :class="$store.nav.open ? 'opacity-0' : 'opacity-100'"
+      ></span>
+      <span
+        class="block h-px w-6 bg-current transition-all duration-300 origin-center"
+        :class="$store.nav.open ? '-rotate-45 -translate-y-[7px]' : ''"
+      ></span>
    </button>
  </div>

@@ -73,8 +83,13 @@
      <div class="gradient-line flex-none"></div>

      <!-- Decorative background text -->
-      <div class="graffiti-tag absolute -bottom-4 -right-4 select-none pointer-events-none"
-        style="-webkit-text-stroke-color: rgba(155,0,255,0.07);" aria-hidden="true">MENU</div>
+      <div
+        class="graffiti-tag absolute -bottom-4 -right-4 select-none pointer-events-none"
+        style="-webkit-text-stroke-color: rgba(155,0,255,0.07);"
+        aria-hidden="true"
+      >
+        MENU
+      </div>

      <!-- Main nav links -->
      <nav class="flex-1 flex flex-col justify-center gutter-x py-10" aria-label="Mobile navigation">
@@ -89,35 +104,49 @@
              @click="$store.nav.open = false"
            >
              <!-- Hover sweep -->
-            <span class="absolute inset-y-0 left-0 w-0 group-hover:w-full transition-all duration-300 ease-out"
-              style="background: linear-gradient(90deg, rgba(255,26,140,0.07), transparent);"></span>
+              <span
+                class="absolute inset-y-0 left-0 w-0 group-hover:w-full transition-all duration-300 ease-out"
+                style="background: linear-gradient(90deg, rgba(255,26,140,0.07), transparent);"
+              ></span>
              <!-- Link text -->
-            <span class="relative transition-colors duration-200 text-paper group-hover:text-heat uppercase"
+              <span
+                class="relative transition-colors duration-200 text-paper group-hover:text-heat uppercase"
                :class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-gradient' : ''"
-            >{{ .Name }}</span>
+                >{{ .Name }}</span
+              >
              <!-- Index number -->
-            <span class="absolute right-0 top-1/2 -translate-y-1/2 label text-smoke group-hover:text-heat transition-colors duration-200"
+              <span
+                class="absolute right-0 top-1/2 -translate-y-1/2 label text-smoke group-hover:text-heat transition-colors duration-200"
                style="animation: mob-link-in 0.4s var(--ease-out-expo) {{ add (mul $i 70) 100 }}ms both"
-            >0{{ add $i 1 }}</span>
+                >0{{ add $i 1 }}</span
+              >
            </a>
            {{- $i = add $i 1 -}}
          {{- end -}}
        </div>

-        <div class="gradient-line my-8"
-          style="animation: mob-link-in 0.4s ease {{ mul $i 70 }}ms both"></div>
+        <div class="gradient-line my-8" style="animation: mob-link-in 0.4s ease {{ mul $i 70 }}ms both"></div>

-        <div class="flex flex-wrap gap-x-8 gap-y-3"
-          style="animation: mob-link-in 0.4s ease {{ add (mul $i 70) 40 }}ms both">
+        <div
+          class="flex flex-wrap gap-x-8 gap-y-3"
+          style="animation: mob-link-in 0.4s ease {{ add (mul $i 70) 40 }}ms both"
+        >
          {{- range .Site.Menus.footer -}}
-          <a href="{{ .URL }}" class="label text-fog hover:text-heat transition-colors" @click="$store.nav.open = false">{{ .Name }}</a>
+            <a
+              href="{{ .URL }}"
+              class="label text-fog hover:text-heat transition-colors"
+              @click="$store.nav.open = false"
+              >{{ .Name }}</a
+            >
          {{- end -}}
        </div>
      </nav>

      <!-- Bottom bar -->
-      <div class="flex-none gutter-x pb-8 pt-4 border-t border-zinc"
-        style="animation: mob-link-in 0.4s ease 420ms both">
+      <div
+        class="flex-none gutter-x pb-8 pt-4 border-t border-zinc"
+        style="animation: mob-link-in 0.4s ease 420ms both"
+      >
        <p class="label text-smoke">{{ .Site.Params.tagline }}</p>
      </div>
    </div>
@@ -125,8 +154,14 @@
 </header>

 <style>
-@keyframes mob-link-in {
-  from { opacity: 0; transform: translateY(14px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
+  @keyframes mob-link-in {
+    from {
+      opacity: 0;
+      transform: translateY(14px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 </style>
@@ -1,24 +1,30 @@
 {{- /* Custom pagination component.
-       Call as: {{ partial "pagination.html" . }}
+  Call as: {{ partial "pagination.html" .
+}}
 */ -}}
 {{- $paginator := .Paginator -}}
 {{- if gt $paginator.TotalPages 1 -}}
-<nav class="flex items-center justify-center gap-2 py-16" aria-label="Pagination">
-
+  <nav class="flex items-center justify-center gap-2 py-16" aria-label="Pagination">
    {{- if $paginator.HasPrev -}}
      <a
        href="{{ $paginator.Prev.URL }}"
        class="label border border-mist text-ash px-5 py-3 hover:border-gold hover:text-gold transition-all duration-300"
        aria-label="Previous page"
-  >{{ partial "icon.html" "arrow-left" }} Prev</a>
+        >{{ partial "icon.html" "arrow-left" }} Prev</a
+      >
    {{- end -}}

    {{- range $paginator.Pagers -}}
      <a
        href="{{ .URL }}"
-    class="label border px-4 py-3 transition-all duration-300 {{ if eq . $paginator }}border-gold text-gold{{ else }}border-mist text-ash hover:border-gold hover:text-gold{{ end }}"
-    {{- if eq . $paginator }} aria-current="page"{{ end }}
-  >{{ .PageNumber }}</a>
+        class="label border px-4 py-3 transition-all duration-300 {{ if eq . $paginator }}
+          border-gold text-gold
+        {{ else }}
+          border-mist text-ash hover:border-gold hover:text-gold
+        {{ end }}"
+        {{- if eq . $paginator }}aria-current="page"{{ end }}
+        >{{ .PageNumber }}</a
+      >
    {{- end -}}

    {{- if $paginator.HasNext -}}
@@ -26,8 +32,9 @@
        href="{{ $paginator.Next.URL }}"
        class="label border border-mist text-ash px-5 py-3 hover:border-gold hover:text-gold transition-all duration-300"
        aria-label="Next page"
-  >Next {{ partial "icon.html" "arrow-right" }}</a>
+        >Next {{ partial "icon.html" "arrow-right" }}</a
+      >
    {{- end -}}

-</nav>
+  </nav>
 {{- end -}}
@@ -1,31 +1,35 @@
 {{- /* Large overlay card for featured/secondary slots.
  Expects a post page as context (.).
-*/ -}}
+  */
+-}}
 {{- $post := . -}}
 <article class="group relative overflow-hidden aspect-[3/4] md:aspect-[4/5] card-comic">
  <a href="{{ $post.RelPermalink }}" class="block w-full h-full" aria-label="{{ $post.Title }}">
-
    <!-- Background media — bundle banner.png → 01.png → .Params.banner -->
    {{- $thumb := $post.Resources.GetMatch "banner.png" -}}
    {{- if not $thumb -}}{{- $thumb = $post.Resources.GetMatch "01.png" -}}{{- end -}}
    <div class="card-media w-full h-full absolute inset-0">
      {{- if $thumb -}}
        {{- partial "img.html" (dict "res" $thumb "widths" (slice 800 1200) "sizes" "(max-width: 768px) 100vw, 50vw" "class" "w-full h-full object-cover" "alt" $post.Title) -}}
-      {{- else -}}{{- with $post.Params.banner -}}
+      {{- else -}}
+        {{- with $post.Params.banner -}}
          {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover") -}}
        {{- else -}}
          <div class="w-full h-full bg-concrete flex items-center justify-center halftone">
            <span class="label text-smoke">PIVOINE</span>
          </div>
-      {{- end -}}{{- end -}}
+        {{- end -}}
+      {{- end -}}
    </div>

    <!-- Gradient overlay -->
    <div class="absolute inset-0 overlay-gradient transition-opacity duration-500 group-hover:opacity-90"></div>

    <!-- Diagonal heat accent -->
-    <div class="absolute bottom-16 left-0 w-28 h-[3px] opacity-0 group-hover:opacity-90 transition-opacity duration-300"
-      style="background: linear-gradient(90deg, var(--color-heat), var(--color-pulse)); transform: skewX(-20deg) translateX(-4px);"></div>
+    <div
+      class="absolute bottom-16 left-0 w-28 h-[3px] opacity-0 group-hover:opacity-90 transition-opacity duration-300"
+      style="background: linear-gradient(90deg, var(--color-heat), var(--color-pulse)); transform: skewX(-20deg) translateX(-4px);"
+    ></div>

    <!-- Content -->
    <div class="absolute bottom-0 left-0 right-0 p-5 md:p-6">
@@ -36,7 +40,9 @@
          {{- end -}}
        </div>
      {{- end -}}
-      <h3 class="font-display text-xl md:text-2xl text-paper text-balance leading-none group-hover:text-heat transition-colors mb-3">
+      <h3
+        class="font-display text-xl md:text-2xl text-paper text-balance leading-none group-hover:text-heat transition-colors mb-3"
+      >
        {{- $post.Title -}}
      </h3>
      <div class="flex items-center gap-2">
@@ -52,6 +58,5 @@
        </time>
      </div>
    </div>
-
  </a>
 </article>
@@ -1,36 +1,41 @@
 {{- /* Compact post card for grids.
  Expects a post page as context (.).
-*/ -}}
+  */
+-}}
 {{- $post := . -}}
 <article class="group card-comic flex flex-col bg-concrete">
  <a href="{{ $post.RelPermalink }}" class="block flex-1 flex flex-col">
-
    <!-- Thumbnail — bundle banner.png → 01.png → .Params.banner -->
    {{- $thumb := $post.Resources.GetMatch "banner.png" -}}
    {{- if not $thumb -}}{{- $thumb = $post.Resources.GetMatch "01.png" -}}{{- end -}}
    <div class="card-media aspect-editorial">
      {{- if $thumb -}}
        {{- partial "img.html" (dict "res" $thumb "widths" (slice 600 1000) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" "class" "w-full h-full object-cover" "alt" $post.Title) -}}
-      {{- else -}}{{- with $post.Params.banner -}}
+      {{- else -}}
+        {{- with $post.Params.banner -}}
          {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover") -}}
        {{- else -}}
          <div class="w-full h-full flex items-center justify-center halftone">
            <span class="label text-smoke text-xs">PIVOINE</span>
          </div>
-      {{- end -}}{{- end -}}
+        {{- end -}}
+      {{- end -}}
    </div>

    <!-- Category badge — parallelogram -->
    {{- with $post.Params.categories -}}
      <div class="flex flex-wrap gap-2 px-4 pt-4">
-      {{- range first 1 . -}}
+        {{- range . -}}
          <span class="badge">{{ . }}</span>
        {{- end -}}
      </div>
    {{- end -}}

+
    <!-- Title -->
-    <h3 class="font-display text-base md:text-lg text-paper text-balance leading-none group-hover:text-heat transition-colors px-4 pt-3 pb-2 flex-1">
+    <h3
+      class="font-display text-base md:text-lg text-paper text-balance leading-none group-hover:text-heat transition-colors px-4 pt-3 pb-2 flex-1"
+    >
      {{- $post.Title -}}
    </h3>

@@ -42,10 +47,26 @@
          {{- $avRes := .Resources.GetMatch "avatar.*" -}}
          {{- if $avRes -}}
            {{- $av := $avRes.Resize "64x webp" -}}
-            <img src="{{ $av.RelPermalink }}" alt="{{ $authorPage.Params.name | default $authorPage.Title }}" class="w-5 h-5 object-cover border border-smoke flex-shrink-0" width="{{ $av.Width }}" height="{{ $av.Height }}" loading="lazy" decoding="async">
-          {{- else -}}{{- with .Params.avatar -}}
-            <img src="{{ . }}" alt="{{ $authorPage.Params.name | default $authorPage.Title }}" class="w-5 h-5 object-cover border border-smoke flex-shrink-0" loading="lazy" decoding="async">
-          {{- end -}}{{- end -}}
+            <img
+              src="{{ $av.RelPermalink }}"
+              alt="{{ $authorPage.Params.name | default $authorPage.Title }}"
+              class="w-5 h-5 object-cover border border-smoke flex-shrink-0"
+              width="{{ $av.Width }}"
+              height="{{ $av.Height }}"
+              loading="lazy"
+              decoding="async"
+            />
+          {{- else -}}
+            {{- with .Params.avatar -}}
+              <img
+                src="{{ . }}"
+                alt="{{ $authorPage.Params.name | default $authorPage.Title }}"
+                class="w-5 h-5 object-cover border border-smoke flex-shrink-0"
+                loading="lazy"
+                decoding="async"
+              />
+            {{- end -}}
+          {{- end -}}
          <span class="label text-fog">{{ .Params.name | default .Title }}</span>
          <span class="text-smoke" aria-hidden="true">/</span>
        {{- end -}}
@@ -54,6 +75,5 @@
        {{- $post.Date.Format "Jan 2006" -}}
      </time>
    </div>
-
  </a>
 </article>
@@ -20,10 +20,10 @@
 }
 </script>
 {{- else if and .IsPage (eq .Section "posts") -}}
-{{- $authorPage := "" -}}
-{{- with .Params.author -}}
+  {{- $authorPage := "" -}}
+  {{- with .Params.author -}}
    {{- $authorPage = site.GetPage (printf "authors/%s" .) -}}
-{{- end -}}
+  {{- end -}}
 <script type="application/ld+json">
 {
  "@context": "https://schema.org",
@@ -1,35 +1,39 @@
 {{- define "page-background" -}}
-{{- with .Params.background -}}
-<div class="fixed inset-0 -z-10 overflow-hidden" aria-hidden="true">
+  {{- with .Params.background -}}
+    <div class="fixed inset-0 -z-10 overflow-hidden" aria-hidden="true">
      {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover opacity-[0.15] blur-md scale-110" "lazy" false) -}}
      <div class="absolute inset-0" style="background: rgba(5,5,16,0.7)"></div>
-</div>
-{{- end -}}
+    </div>
+  {{- end -}}
 {{- end -}}

 {{- define "main" -}}

-<!-- ── ARTICLE HEADER ────────────────────────────────────────── -->
-<header class="gutter-x pt-36 pb-12 max-w-5xl mx-auto relative overflow-hidden">
-
+  <!-- ── ARTICLE HEADER ────────────────────────────────────────── -->
+  <header class="gutter-x pt-36 pb-12 relative overflow-hidden">
+    <div class="max-w-5xl mx-auto">
      <!-- Faded decorative category text -->
      {{- with index .Params.categories 0 -}}
-  <div class="graffiti-tag absolute -top-2 -right-4 select-none pointer-events-none"
-    style="-webkit-text-stroke-color: rgba(155,0,255,0.08);" aria-hidden="true">{{ . }}</div>
+        <div
+          class="graffiti-tag absolute -top-2 -right-4 select-none pointer-events-none"
+          style="-webkit-text-stroke-color: rgba(155,0,255,0.08);"
+          aria-hidden="true"
+        >
+          {{ . }}
+        </div>
      {{- end -}}

+
      <!-- Categories -->
      {{- with .Params.categories -}}
        <div class="flex flex-wrap gap-2 mb-6">
          {{- range . -}}
-    <a
-      href="/categories/{{ . | urlize }}/"
-      class="badge badge-outline"
-    >{{ . }}</a>
+            <a href="/categories/{{ . | urlize }}/" class="badge badge-outline">{{ . }}</a>
          {{- end -}}
        </div>
      {{- end -}}

+
      <!-- Title -->
      <h1 class="font-display text-5xl md:text-7xl lg:text-8xl text-paper text-balance mb-8 leading-none">
        {{- .Title -}}
@@ -42,6 +46,7 @@
        </p>
      {{- end -}}

+
      <!-- Author byline -->
      {{- with .Params.author -}}
        {{- $authorPage := site.GetPage (printf "authors/%s" .) -}}
@@ -50,51 +55,66 @@
        {{- end -}}
      {{- end -}}

-  <!-- Date + reading info -->
-  <div class="flex flex-wrap items-center gap-6">
+
+      <!-- Date -->
      <time class="label text-fog" datetime="{{ .Date.Format "2006-01-02" }}">
        {{- .Date.Format "January 2, 2006" -}}
      </time>
-    {{- $imgCount  := len (.Resources.Match "[0-9]*.png") -}}
-    {{- $itemCount := $imgCount -}}
-    {{- if and (eq $imgCount 0) .Params.items -}}{{- $itemCount = len .Params.items -}}{{- end -}}
-    {{- if gt $itemCount 0 -}}
-    <span class="label text-fog">{{ $itemCount }} {{ if eq $itemCount 1 }}Work{{ else }}Works{{ end }}</span>
+    </div>
+  </header>
+
+  <!-- ── GRADIENT DIVIDER ──────────────────────────────────────── -->
+  <div class="gradient-line mb-0"></div>
+
+  <!-- ── BANNER MEDIA — video if available, lightbox on click ──── -->
+  {{- $bannerImg := .Resources.GetMatch "banner.png" -}}
+  {{- if not $bannerImg -}}{{- $bannerImg = .Resources.GetMatch "01.png" -}}{{- end -}}
+  {{- if $bannerImg -}}
+    {{- $stem       := $bannerImg.Name | strings.TrimSuffix ".png" -}}
+    {{- $bannerVid  := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
+    {{- $webp       := $bannerImg.Resize "1200x webp" -}}
+    {{- $lbItems    := slice (dict "img" $webp.RelPermalink "video" "") -}}
+    {{- if $bannerVid -}}
+      {{- $lbItems = $lbItems | append (dict "img" $webp.RelPermalink "video" $bannerVid.RelPermalink) -}}
+    {{- end -}}
+    <div
+      class="w-full overflow-hidden mb-16 md:mb-24 cursor-zoom-in"
+      style="height: clamp(320px, 60vh, 75vh)"
+      x-data="{ items: {{ $lbItems | jsonify }} }"
+      @click="$dispatch('lightbox:open', { items, idx: 0 })"
+    >
+      {{- if $bannerVid -}}
+        <video
+          class="w-full h-full object-cover object-center pointer-events-none"
+          src="{{ $bannerVid.RelPermalink }}"
+          poster="{{ $bannerImg.RelPermalink }}"
+          autoplay
+          loop
+          muted
+          playsinline
+        ></video>
+      {{- else -}}
+        {{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full h-full object-cover object-center pointer-events-none" "alt" .Title "loading" "eager") -}}
      {{- end -}}
    </div>
+  {{- end -}}

-</header>

-<!-- ── GRADIENT DIVIDER ──────────────────────────────────────── -->
-<div class="gradient-line mb-0"></div>
-
-<!-- ── BANNER MEDIA — bundle banner.png → 01.png → .Params.banner ── -->
-{{- $bannerImg := .Resources.GetMatch "banner.png" -}}
-{{- if not $bannerImg -}}{{- $bannerImg = .Resources.GetMatch "01.png" -}}{{- end -}}
-{{- if $bannerImg -}}
-<div class="w-full overflow-hidden mb-16 md:mb-24" style="height: clamp(320px, 60vh, 75vh)">
-  {{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full h-full object-cover object-center" "alt" .Title "loading" "eager") -}}
-</div>
-{{- else -}}{{- with .Params.banner -}}
-<div class="w-full overflow-hidden mb-16 md:mb-24" style="height: clamp(320px, 60vh, 75vh)">
-  {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover object-center" "lazy" false) -}}
-</div>
-{{- end -}}{{- end -}}
-
-<!-- ── PROSE BODY ────────────────────────────────────────────── -->
-{{- with .Content -}}
-<article class="gutter-x mb-20 md:mb-28">
+  <!-- ── PROSE BODY ────────────────────────────────────────────── -->
+  {{- with .Content -}}
+    <article class="gutter-x mb-20 md:mb-28">
      <div class="max-w-5xl mx-auto">
        <div class="max-w-3xl prose-editorial">
          {{ . }}
        </div>
      </div>
-</article>
-{{- end -}}
+    </article>
+  {{- end -}}

-{{- /* ── GENERATION NOTES (disabled) ─────────────────────────────
+
+  <!-- ── GENERATION NOTES (disabled — remove comment tags to enable)
 {{- with .Params.prompt -}}
-<section class="gutter-x mb-20 md:mb-28">
+    <section class="gutter-x mb-20 md:mb-28">
      <div class="max-w-5xl mx-auto">
        <div class="flex items-center gap-5 mb-8">
          <span class="badge badge-outline">Generation Notes</span>
@@ -121,101 +141,29 @@
          {{- end -}}
        </div>
      </div>
-</section>
-{{- end -}}
-*/ -}}
-
-<!-- ── GALLERY ───────────────────────────────────────────────── -->
-{{- $bundleImages := .Resources.Match "[0-9]*.png" -}}
-{{- $legacyItems  := slice -}}
-{{- with .Params.items -}}{{- $legacyItems = . -}}{{- end -}}
-{{- if or $bundleImages $legacyItems -}}
-<section class="gutter-x pb-24 md:pb-32" aria-label="Gallery">
-  <div class="max-w-5xl mx-auto">
-
-  {{- if $bundleImages -}}
-  {{- /* Pre-compute lightbox items so Alpine gets a static JSON array */ -}}
-  {{- $lbItems := slice -}}
-  {{- range $bundleImages -}}
-    {{- $stem  := .Name | strings.TrimSuffix ".png" -}}
-    {{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
-    {{- $webp  := .Resize "1200x webp" -}}
-    {{- $entry := dict "img" $webp.RelPermalink "video" "" -}}
-    {{- if $video -}}{{- $entry = dict "img" $webp.RelPermalink "video" $video.RelPermalink -}}{{- end -}}
-    {{- $lbItems = $lbItems | append $entry -}}
+    </section>
  {{- end -}}
+-->

-  <div x-data="{ items: {{ $lbItems | jsonify }} }">
-
-    <div class="flex items-center gap-5 mb-10">
-      <span class="badge badge-gradient">Gallery</span>
-      <span class="label text-fog">{{ len $bundleImages }} {{ if eq (len $bundleImages) 1 }}work{{ else }}works{{ end }}</span>
-      <div class="flex-1 gradient-line ml-2"></div>
-    </div>
-
-    <div class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
-      {{- range $i, $img := $bundleImages -}}
-      {{- $stem  := $img.Name | strings.TrimSuffix ".png" -}}
-      {{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
-      <figure class="break-inside-avoid group card-comic cursor-zoom-in"
-        @click="$dispatch('lightbox:open', { items, idx: {{ $i }} })">
-        <div class="card-media min-h-48">
-          {{- if $video -}}
-          <video class="w-full pointer-events-none" src="{{ $video.RelPermalink }}" poster="{{ $img.RelPermalink }}" autoplay loop muted playsinline></video>
-          {{- else -}}
-          {{- partial "img.html" (dict "res" $img "widths" (slice 800 1200) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" "class" "w-full pointer-events-none") -}}
-          {{- end -}}
-        </div>
-      </figure>
-      {{- end -}}
-    </div>
-
-  </div>
-
-  {{- else -}}
-  <!-- Legacy front-matter items -->
-  <div class="flex items-center gap-5 mb-10">
-    <span class="badge badge-gradient">Gallery</span>
-    <span class="label text-fog">{{ len $legacyItems }} {{ if eq (len $legacyItems) 1 }}work{{ else }}works{{ end }}</span>
-    <div class="flex-1 gradient-line ml-2"></div>
-  </div>
-  <div x-data="{ selected: null }" class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
-    {{- range $i, $item := $legacyItems -}}
-    <figure class="break-inside-avoid group cursor-pointer card-comic" @click="selected = selected === {{ $i }} ? null : {{ $i }}">
-      <div class="card-media">
-        {{- partial "media.html" (dict "media" $item "class" "w-full") -}}
-      </div>
-      {{- with $item.description -}}
-      <figcaption class="px-4 py-3 text-fog text-sm leading-relaxed font-body transition-colors group-hover:text-chalk">{{ . }}</figcaption>
-      {{- end -}}
-    </figure>
-    {{- end -}}
-  </div>
-  {{- end -}}
-
-  </div>
-</section>
-{{- end -}}
-
-<!-- ── TAGS ─────────────────────────────────────────────────── -->
-{{- with .Params.tags -}}
-<footer class="gutter-x border-t border-zinc pt-10 pb-20">
-  <div class="max-w-5xl mx-auto flex flex-wrap gap-3 items-center">
+  <!-- ── TAGS ─────────────────────────────────────────────────── -->
+  {{- with .Params.tags -}}
+    <footer class="gutter-x border-t border-zinc pt-10 pb-20">
+      <div class="max-w-5xl mx-auto flex no-wrap gap-3 items-start">
        <span class="label text-fog">Tagged:</span>
+        <span class="flex flex-wrap gap-3">
          {{- range . -}}
-    <a
-      href="/tags/{{ . | urlize }}/"
-      class="badge badge-outline"
-    ># {{ . }}</a>
+            <a href="/tags/{{ . | urlize }}/" class="badge badge-outline"># {{ . }}</a>
          {{- end -}}
+        </span>
      </div>
-</footer>
-{{- end -}}
+    </footer>
+  {{- end -}}

-<!-- ── RELATED POSTS ─────────────────────────────────────────── -->
-{{- $related := .Site.RegularPages.Related . | first 3 -}}
-{{- with $related -}}
-<section class="bg-concrete border-t border-zinc gutter-x py-16 md:py-24 spray-bg">
+
+  <!-- ── RELATED POSTS ─────────────────────────────────────────── -->
+  {{- $related := .Site.RegularPages.Related . | first 3 -}}
+  {{- with $related -}}
+    <section class="bg-concrete border-t border-zinc gutter-x py-16 md:py-24 spray-bg">
      <div class="max-w-5xl mx-auto">
        <div class="flex items-center gap-5 mb-10">
          <h2 class="font-display text-3xl md:text-4xl text-paper leading-none">
@@ -229,7 +177,7 @@
          {{- end -}}
        </div>
      </div>
-</section>
-{{- end -}}
+    </section>
+  {{- end -}}

 {{- end -}}
@@ -1,16 +1,17 @@
 {{- define "main" -}}
-
-<!-- Tag header -->
-<header class="gutter-x pt-36 pb-16 border-b border-mist">
+  <!-- Tag header -->
+  <header class="gutter-x pt-36 pb-16 border-b border-mist">
    <div class="max-w-4xl">
      <span class="label text-ash block mb-4">Tag</span>
      <h1 class="font-display text-5xl md:text-7xl text-paper text-balance"># {{ .Title }}</h1>
-    <p class="text-ash label mt-5">{{ len .Pages }} {{ if eq (len .Pages) 1 }}editorial{{ else }}editorials{{ end }}</p>
+      <p class="text-ash label mt-5">
+        {{ len .Pages }} {{ if eq (len .Pages) 1 }}editorial{{ else }}editorials{{ end }}
+      </p>
    </div>
-</header>
+  </header>

-<!-- Posts grid -->
-<section class="gutter-x py-16 md:py-24">
+  <!-- Posts grid -->
+  <section class="gutter-x py-16 md:py-24">
    {{- if .Paginator.Pages -}}
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-5 gap-y-12">
        {{- range .Paginator.Pages -}}
@@ -21,6 +22,5 @@
    {{- else -}}
      <p class="text-ash label text-center py-24">No posts with this tag yet.</p>
    {{- end -}}
-</section>
-
+  </section>
 {{- end -}}
@@ -10,6 +10,11 @@ server {
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml application/json application/rss+xml image/svg+xml;

+    open_file_cache          max=1000 inactive=30s;
+    open_file_cache_valid    60s;
+    open_file_cache_min_uses 2;
+    open_file_cache_errors   on;
+
    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
@@ -4,13 +4,15 @@
  "private": true,
  "scripts": {
    "dev": "hugo server --buildDrafts --disableFastRender",
-    "build": "NODE_ENV=production hugo --minify"
+    "build": "NODE_ENV=production hugo --minify",
+    "format": "prettier --write \"layouts/**/*.html\" \"assets/**/*.css\" \"assets/**/*.js\" \"content/**/*.md\" \"*.toml\"",
+    "format:check": "prettier --check \"layouts/**/*.html\" \"assets/**/*.css\" \"assets/**/*.js\" \"content/**/*.md\" \"*.toml\""
  },
  "devDependencies": {
-    "tailwindcss": "^4.0.0",
-    "@tailwindcss/postcss": "^4.0.0",
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.5.0",
-    "postcss-cli": "^11.0.0"
+    "@tailwindcss/cli": "^4.0.0",
+    "prettier": "^3.8.3",
+    "prettier-plugin-go-template": "^0.0.15",
+    "prettier-plugin-toml": "^2.0.6",
+    "tailwindcss": "^4.0.0"
  }
 }
@@ -0,0 +1,3 @@
+preferSymlinkedExecutables: true
+allowBuilds:
+  '@parcel/watcher': true
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-    autoprefixer: {},
-  },
-};
@@ -0,0 +1,233 @@
+#!/bin/sh
+# Generate a post's banner video (01.mp4) and preview image (01.png) via
+# the Replicate black-forest-labs/flux-3 text-to-video model, using the
+# prompt.{scene,environment,style,video} fields already present in the
+# post's frontmatter.
+#
+# Usage:
+#   sh scripts/create-video.sh <path-to-post-dir-or-index.md> [--force] [--dry-run]
+#
+# Requires: REPLICATE_API_TOKEN exported in the environment.
+#
+# Video settings (matching every existing post's square/silent convention,
+# just at higher resolution): 1:1 aspect ratio, 1080p, 5s, no audio.
+
+set -e
+
+print_usage() {
+  echo "Usage: sh scripts/create-video.sh <post-dir-or-index.md> [options]"
+  echo ""
+  echo "Generates a post's banner video (01.mp4) via the Replicate flux-3"
+  echo "text-to-video model, using that post's prompt.{scene,environment,style,video}"
+  echo "frontmatter fields, then extracts the first frame as 01.png."
+  echo ""
+  echo "Arguments:"
+  echo "  <post-dir-or-index.md>   Path to content/posts/<slug>/ or its index.md"
+  echo ""
+  echo "Options:"
+  echo "  -f, --force     Overwrite existing 01.mp4 / 01.png"
+  echo "  --dry-run       Print the constructed prompt and request JSON, make no API call"
+  echo "  -h, --help      Show this help"
+  echo ""
+  echo "Requires REPLICATE_API_TOKEN to be exported in the environment."
+}
+
+FORCE=0
+DRY_RUN=0
+POST_ARG=""
+
+for arg in "$@"; do
+  case "$arg" in
+    -f|--force) FORCE=1 ;;
+    --dry-run) DRY_RUN=1 ;;
+    -h|--help) print_usage; exit 0 ;;
+    -*)
+      echo "Unknown option: $arg" >&2
+      exit 1
+      ;;
+    *) POST_ARG="$arg" ;;
+  esac
+done
+
+if [ -z "$POST_ARG" ]; then
+  print_usage >&2
+  exit 1
+fi
+
+if [ -d "$POST_ARG" ]; then
+  BUNDLE_DIR="${POST_ARG%/}"
+  INDEX_MD="$BUNDLE_DIR/index.md"
+else
+  INDEX_MD="$POST_ARG"
+  BUNDLE_DIR=$(dirname "$POST_ARG")
+fi
+
+if [ ! -f "$INDEX_MD" ]; then
+  echo "Error: $INDEX_MD not found" >&2
+  exit 1
+fi
+
+if [ -z "$REPLICATE_API_TOKEN" ]; then
+  echo "Error: REPLICATE_API_TOKEN is not set in your environment." >&2
+  echo "Export it before running this script, e.g.:" >&2
+  echo "  export REPLICATE_API_TOKEN=r8_..." >&2
+  exit 1
+fi
+
+DEST_MP4="$BUNDLE_DIR/01.mp4"
+DEST_PNG="$BUNDLE_DIR/01.png"
+
+if [ "$FORCE" -ne 1 ]; then
+  if [ -e "$DEST_MP4" ]; then
+    echo "Error: $DEST_MP4 already exists (use --force to overwrite)" >&2
+    exit 1
+  fi
+  if [ -e "$DEST_PNG" ]; then
+    echo "Error: $DEST_PNG already exists (use --force to overwrite)" >&2
+    exit 1
+  fi
+fi
+
+PROMPT_JSON=$(yq --front-matter=extract -o=json '.prompt' "$INDEX_MD")
+
+if [ "$PROMPT_JSON" = "null" ] || [ -z "$PROMPT_JSON" ]; then
+  echo "Error: $INDEX_MD has no prompt.* fields in its frontmatter" >&2
+  exit 1
+fi
+
+SCENE=$(printf '%s' "$PROMPT_JSON" | jq -r '.scene // empty')
+ENVIRONMENT=$(printf '%s' "$PROMPT_JSON" | jq -r '.environment // empty')
+STYLE=$(printf '%s' "$PROMPT_JSON" | jq -r '.style // empty')
+VIDEO=$(printf '%s' "$PROMPT_JSON" | jq -r '.video // empty')
+
+if [ -z "$SCENE" ]; then
+  echo "Error: prompt.scene is missing/empty in $INDEX_MD" >&2
+  exit 1
+fi
+if [ -z "$ENVIRONMENT" ]; then
+  echo "Error: prompt.environment is missing/empty in $INDEX_MD" >&2
+  exit 1
+fi
+if [ -z "$STYLE" ]; then
+  echo "Error: prompt.style is missing/empty in $INDEX_MD" >&2
+  exit 1
+fi
+if [ -z "$VIDEO" ]; then
+  echo "Error: prompt.video is missing/empty in $INDEX_MD" >&2
+  exit 1
+fi
+
+SLUG=$(yq --front-matter=extract '.slug' "$INDEX_MD")
+echo "▶ ${SLUG:-$(basename "$BUNDLE_DIR")}: building prompt from frontmatter"
+
+PROMPT="${SCENE} ${ENVIRONMENT} ${STYLE} ${VIDEO}"
+
+INPUT_JSON=$(jq -n \
+  --arg prompt "$PROMPT" \
+  --arg duration "5" \
+  --arg resolution "1080p" \
+  --arg aspect_ratio "1:1" \
+  '{
+    input: {
+      prompt: $prompt,
+      images: [],
+      duration: $duration,
+      resolution: $resolution,
+      aspect_ratio: $aspect_ratio,
+      generate_audio: false
+    }
+  }')
+
+if [ "$DRY_RUN" -eq 1 ]; then
+  echo "--- Constructed prompt ---"
+  echo "$PROMPT"
+  echo "--- Request body ---"
+  echo "$INPUT_JSON" | jq .
+  echo "(dry run — no API call made)"
+  exit 0
+fi
+
+echo "▶ Submitting generation request to Replicate (flux-3)..."
+CREATE_RESPONSE=$(curl -sS \
+  -X POST \
+  -H "Authorization: Bearer $REPLICATE_API_TOKEN" \
+  -H "Content-Type: application/json" \
+  -H "Prefer: wait=60" \
+  -d "$INPUT_JSON" \
+  https://api.replicate.com/v1/models/black-forest-labs/flux-3/predictions \
+  -w '\n%{http_code}')
+
+HTTP_CODE=$(printf '%s' "$CREATE_RESPONSE" | tail -n1)
+BODY=$(printf '%s' "$CREATE_RESPONSE" | sed '$d')
+
+case "$HTTP_CODE" in
+  2??) : ;;
+  *)
+    echo "Error: Replicate API returned HTTP $HTTP_CODE" >&2
+    echo "$BODY" | jq -r '.detail // .error // .' >&2
+    exit 1
+    ;;
+esac
+
+STATUS=$(printf '%s' "$BODY" | jq -r '.status')
+GET_URL=$(printf '%s' "$BODY" | jq -r '.urls.get')
+PREDICTION_ID=$(printf '%s' "$BODY" | jq -r '.id')
+POLL_BODY="$BODY"
+
+if [ -z "$GET_URL" ] || [ "$GET_URL" = "null" ]; then
+  echo "Error: unexpected response from Replicate (no urls.get):" >&2
+  echo "$BODY" >&2
+  exit 1
+fi
+
+POLL_INTERVAL=5
+MAX_WAIT=600
+ELAPSED=0
+
+while :; do
+  case "$STATUS" in
+    succeeded) break ;;
+    failed|canceled)
+      ERR=$(printf '%s' "$POLL_BODY" | jq -r '.error // "unknown error"')
+      echo "Error: prediction $STATUS: $ERR" >&2
+      exit 1
+      ;;
+  esac
+
+  if [ "$ELAPSED" -ge "$MAX_WAIT" ]; then
+    echo "Error: timed out after ${MAX_WAIT}s waiting on prediction $PREDICTION_ID" >&2
+    echo "Check status manually: curl -H \"Authorization: Bearer \$REPLICATE_API_TOKEN\" $GET_URL" >&2
+    exit 1
+  fi
+
+  sleep "$POLL_INTERVAL"
+  ELAPSED=$((ELAPSED + POLL_INTERVAL))
+
+  POLL_BODY=$(curl -sS -H "Authorization: Bearer $REPLICATE_API_TOKEN" "$GET_URL")
+  STATUS=$(printf '%s' "$POLL_BODY" | jq -r '.status')
+  echo "  … ${ELAPSED}s elapsed, status: $STATUS"
+done
+
+OUTPUT_URL=$(printf '%s' "$POLL_BODY" | jq -r '.output')
+if [ -z "$OUTPUT_URL" ] || [ "$OUTPUT_URL" = "null" ]; then
+  echo "Error: prediction succeeded but no output URL was returned" >&2
+  echo "$POLL_BODY" >&2
+  exit 1
+fi
+
+TMP_DIR=$(mktemp -d "${TMPDIR:-/tmp}/create-video.XXXXXX")
+trap 'rm -rf "$TMP_DIR"' EXIT
+
+TMP_MP4="$TMP_DIR/01.mp4"
+TMP_PNG="$TMP_DIR/01.png"
+
+echo "▶ Downloading generated video..."
+curl -fSL -o "$TMP_MP4" "$OUTPUT_URL"
+
+echo "▶ Extracting first frame as preview PNG..."
+ffmpeg -y -loglevel error -i "$TMP_MP4" -vframes 1 "$TMP_PNG" < /dev/null
+
+mv "$TMP_MP4" "$DEST_MP4"
+mv "$TMP_PNG" "$DEST_PNG"
+
+echo "✓ Wrote $DEST_MP4 and $DEST_PNG"
Author	SHA1	Message	Date
valknar	42e3ea6719	fix: remove obsolete posts	2026-09-13 21:08:41 +02:00
valknar	d3c4a06c82	fix(style): single post tags listing	2026-09-13 18:41:08 +02:00
valknarandClaude Sonnet 5	63f29884db	chore: consolidate the-reliquary-engine under 2026-09-13 Rename the bundle directory to match its frontmatter date, alongside the other four new posts. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012E2mmywuZyXmPBgSDtNdTL	2026-09-13 17:58:10 +02:00
valknarandClaude Sonnet 5	ad6b6b2834	fix: replace deprecated languageCode/.Site.LanguageCode with locale Hugo v0.158.0 deprecated the languageCode config key and .Site.LanguageCode in favor of locale and .Site.Language.Locale. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012E2mmywuZyXmPBgSDtNdTL	2026-09-13 17:57:30 +02:00
valknarandClaude Sonnet 5	bbfba94454	feat: add the-reliquary-engine post (gothic sci-fi) An android saint fused with machine drifts through a Gothic cathedral rebuilt into an orbital station, generated via create-video.sh. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012E2mmywuZyXmPBgSDtNdTL	2026-09-13 17:55:18 +02:00
valknarandClaude Sonnet 5	f2b2e2b79d	chore: consolidate new posts under a single 2026-09-13 date Rename the-last-lighthouse, the-ashen-choir, and the-serpents-bargain's bundle directories to match their frontmatter dates, which were moved onto 2026-09-13 alongside the-clockwork-confessor. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012E2mmywuZyXmPBgSDtNdTL	2026-09-13 17:52:09 +02:00
valknarandClaude Sonnet 5	71828c2379	fix: build CSS with Hugo's native TailwindCSS instead of PostCSS hugo server/build was failing with "binary postcss is not a Node.js script" — pnpm's default node_modules/.bin shims are shell wrappers, not plain Node scripts, which Hugo's exec-security check rejects. Switches head.html from css.PostCSS to css.TailwindCSS, drops the now-unused PostCSS toolchain, and adds pnpm-workspace.yaml's preferSymlinkedExecutables so pnpm emits real symlinks Hugo can exec (same fix already in use on roux). Also updates the Dockerfile's build stage to hugomods/hugo:debian-node, which bundles the matching Hugo Extended + Node versions, keeping ffmpeg for the video-compression step. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012E2mmywuZyXmPBgSDtNdTL	2026-09-13 17:50:28 +02:00
valknarandClaude Sonnet 5	e426798c42	feat: add create-video.sh and four new AI-generated posts Adds scripts/create-video.sh, which reads a post's prompt.{scene, environment,style,video} frontmatter and generates its banner video via Replicate's black-forest-labs/flux-3, extracting the first frame as the preview PNG. Adds four new posts (the-clockwork-confessor, the-last-lighthouse, the-ashen-choir, the-serpents-bargain) generated through this pipeline. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012E2mmywuZyXmPBgSDtNdTL	2026-09-13 17:50:15 +02:00
valknarandClaude Sonnet 4.6	a379b0d00f	perf(nginx): add open_file_cache to reduce overlay2 filesystem overhead Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-17 10:45:40 +02:00
valknar	1aceeeae36	chore: add dev link	2026-06-10 17:21:36 +02:00
valknarandClaude Sonnet 4.6	d129c545dd	fix: drop noreferrer from footer menu external links to preserve Umami referral tracking Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-10 12:26:17 +02:00
valknar	420c6466ca	fix: tailwind hover patch	2026-06-10 11:00:51 +02:00
valknar	cf469081f8	chore: add roux link	2026-06-07 13:21:25 +02:00
valknar	8e6d8c52a2	chore: add bar link	2026-06-07 12:24:04 +02:00
valknar	194157c94c	feat: new posts	2026-05-31 17:51:46 +02:00
valknar	3d644c6da0	chore: remove roux link	2026-05-20 08:38:17 +02:00
valknarandClaude Sonnet 4.6	bfe97b9595	feat: add Roux external link to footer nav Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-18 20:13:14 +02:00
valknar	c8f9c10773	fix: remove post	2026-05-11 18:45:35 +02:00
valknarandClaude Sonnet 4.6	987c715c00	fix: align post header left edge with tags block Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-11 18:29:47 +02:00
valknarandClaude Sonnet 4.6	bc09fa2ad4	content: add exact timestamps to all posts for deterministic ordering Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-11 18:21:01 +02:00
valknar	84bc1e8d82	fix: better video quality	2026-05-11 16:31:16 +02:00
valknarandClaude Sonnet 4.6	847a7bc6d1	feat: limit homepage gallery to 4 posts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-11 16:24:21 +02:00
valknarandClaude Sonnet 4.6	52c2b11fa9	content: add The Drowned Queen post with image and video prompts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-11 15:36:16 +02:00
valknarandClaude Sonnet 4.6	55ad9c2dde	feat: banner plays video, opens lightbox with image+video; remove gallery and works counter Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 18:40:49 +02:00
valknar	1edb3fc140	fix: image and video optimizations	2026-05-10 18:35:58 +02:00
valknar	dade82664e	fix: author card bio text size	2026-05-09 18:51:33 +02:00
valknar	d4dcd61e88	fix: single page header width	2026-05-09 11:25:27 +02:00
valknarandClaude Sonnet 4.6	67bbeba586	content: rewrite Valknar author bio to match current body of work Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-08 18:28:29 +02:00
valknarandClaude Sonnet 4.6	e66da58826	feat: show all category badges on hero and post cards Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-08 18:09:30 +02:00
valknar	1bbdd33c0c	feat: new post	2026-05-08 18:06:09 +02:00
valknar	ea2610d4a8	feat: new post	2026-05-08 17:43:25 +02:00
valknarandClaude Sonnet 4.6	436223913e	feat: add Prettier with go-template and toml plugins, format all files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-08 13:18:05 +02:00
valknar	b78bc26322	feat: new post	2026-05-08 13:11:28 +02:00
valknar	f2ce416ed8	feat: new post	2026-05-08 11:50:16 +02:00
valknar	6677085e3f	fix(post): the pale pour	2026-05-07 21:15:55 +02:00
valknar	45926540e6	fix(post): the pale pour	2026-05-07 20:36:24 +02:00