JL Kruger
5422131782
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1029 lines
71 KiB
HTML
1029 lines
71 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Polemos — Annotated</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg: #0c0a0f;
|
||
--surface: #16131c;
|
||
--surface-2: #1e1a26;
|
||
--surface-warm: #1a1510;
|
||
--primary: #c9a84c;
|
||
--primary-dim: #8a7434;
|
||
--secondary: #a08c6a;
|
||
--accent: #c45e3a;
|
||
--accent-soft: rgba(196, 94, 58, 0.15);
|
||
--text: #d4cfc4;
|
||
--text-muted: #8a8278;
|
||
--text-dim: #5c564e;
|
||
--gold: #c9a84c;
|
||
--gold-dim: rgba(201, 168, 76, 0.2);
|
||
--gold-border: rgba(201, 168, 76, 0.25);
|
||
--border: #2a2520;
|
||
--border-light: #3a332c;
|
||
--decoder-bg: #151210;
|
||
--mn-bg: #171210;
|
||
--lb-overlay: rgba(4, 3, 5, 0.92);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: 'Alegreya Sans', sans-serif;
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* ── NAV BAR ── */
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 900;
|
||
background: var(--bg);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 0 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
height: 48px;
|
||
}
|
||
|
||
.nav-title {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: var(--gold);
|
||
margin-right: 32px;
|
||
letter-spacing: 0.05em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.nav-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-muted);
|
||
font-family: 'Alegreya Sans', sans-serif;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
padding: 12px 16px;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -1px;
|
||
transition: color 150ms ease, border-color 150ms ease;
|
||
}
|
||
|
||
.nav-btn:hover { color: var(--text); }
|
||
.nav-btn.active {
|
||
color: var(--text);
|
||
border-bottom-color: var(--gold);
|
||
}
|
||
|
||
/* ── LAYOUT ── */
|
||
.container {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
padding: 40px 24px 80px;
|
||
}
|
||
|
||
.tab-content { display: none; }
|
||
.tab-content.active { display: block; }
|
||
|
||
/* ── STORY TEXT (Tab 1) ── */
|
||
.story-meta {
|
||
margin-bottom: 36px;
|
||
padding-bottom: 24px;
|
||
border-bottom: 1px solid var(--border);
|
||
text-align: center;
|
||
}
|
||
|
||
.story-meta h1 {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: var(--gold);
|
||
margin-bottom: 8px;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.story-meta .meta-line {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
line-height: 1.5;
|
||
font-style: italic;
|
||
}
|
||
|
||
.story-note {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 15px;
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
margin-bottom: 32px;
|
||
padding: 14px 20px;
|
||
border-left: 2px solid var(--gold-border);
|
||
background: var(--gold-dim);
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
|
||
.story-body p {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 18px;
|
||
line-height: 1.8;
|
||
color: var(--text);
|
||
margin-bottom: 18px;
|
||
text-align: left;
|
||
}
|
||
|
||
.story-body .section-break {
|
||
text-align: center;
|
||
color: var(--primary-dim);
|
||
margin: 36px 0;
|
||
font-size: 16px;
|
||
letter-spacing: 6px;
|
||
font-family: 'Cormorant Garamond', serif;
|
||
}
|
||
|
||
/* ── DECODER ── */
|
||
.decoder {
|
||
display: inline;
|
||
position: relative;
|
||
}
|
||
|
||
.decoder-trigger {
|
||
background: none;
|
||
border: none;
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
color: var(--secondary);
|
||
cursor: pointer;
|
||
border-bottom: 1px dashed var(--secondary);
|
||
padding: 0;
|
||
transition: color 150ms ease;
|
||
}
|
||
|
||
.decoder-trigger::after {
|
||
content: ' ▾';
|
||
font-size: 9px;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.decoder-trigger:hover { color: var(--gold); border-bottom-color: var(--gold); }
|
||
.decoder-trigger.open { color: var(--gold); border-bottom-color: var(--gold); }
|
||
.decoder-trigger.open::after { content: ' ▴'; color: var(--gold); }
|
||
|
||
.decoder-panel {
|
||
display: none;
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
left: 0;
|
||
z-index: 500;
|
||
width: 340px;
|
||
background: var(--decoder-bg);
|
||
border: 1px solid var(--border-light);
|
||
border-top: 2px solid var(--primary-dim);
|
||
border-radius: 2px;
|
||
padding: 16px 18px;
|
||
font-family: 'Alegreya Sans', sans-serif;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
color: var(--text);
|
||
}
|
||
|
||
.decoder-panel.open { display: block; }
|
||
.decoder-panel.flip-left { left: auto; right: 0; }
|
||
|
||
.decode-label {
|
||
display: block;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--primary-dim);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.decode-term {
|
||
display: block;
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: var(--gold);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.decode-link {
|
||
display: block;
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
color: var(--secondary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.decode-link:hover { text-decoration: underline; color: var(--gold); }
|
||
|
||
/* ── MARGIN NOTE ── */
|
||
.marginnote {
|
||
display: inline;
|
||
position: relative;
|
||
}
|
||
|
||
.marginnote-trigger {
|
||
background: none;
|
||
border: none;
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
color: var(--text);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
}
|
||
|
||
.marginnote-trigger .mn-icon {
|
||
font-size: 11px;
|
||
color: var(--accent);
|
||
vertical-align: super;
|
||
margin-left: 1px;
|
||
}
|
||
|
||
.marginnote-trigger:hover .mn-icon { color: var(--gold); }
|
||
.marginnote-trigger.open .mn-icon { color: var(--gold); }
|
||
|
||
.marginnote-panel {
|
||
display: none;
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
left: 0;
|
||
z-index: 500;
|
||
width: 340px;
|
||
background: var(--mn-bg);
|
||
border: 1px solid var(--border-light);
|
||
border-left: 2px solid var(--accent);
|
||
border-radius: 2px;
|
||
padding: 16px 18px;
|
||
font-family: 'Alegreya Sans', sans-serif;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
color: var(--text);
|
||
}
|
||
|
||
.marginnote-panel.open { display: block; }
|
||
.marginnote-panel.flip-left { left: auto; right: 0; }
|
||
|
||
.mn-label {
|
||
display: block;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--accent);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* ── LIGHTBOX TRIGGER ── */
|
||
.lb-trigger {
|
||
background: none;
|
||
border: none;
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
color: var(--gold);
|
||
cursor: pointer;
|
||
border-bottom: 1px solid var(--gold-border);
|
||
padding: 0;
|
||
transition: opacity 150ms ease;
|
||
}
|
||
|
||
.lb-trigger:hover { opacity: 0.75; }
|
||
|
||
/* ── LIGHTBOX OVERLAY ── */
|
||
.lightbox-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 1000;
|
||
background: var(--lb-overlay);
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
}
|
||
|
||
.lightbox-overlay.open { display: flex; }
|
||
|
||
.lightbox-box {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-light);
|
||
border-top: 3px solid var(--primary-dim);
|
||
border-radius: 2px;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
max-height: 88vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.lightbox-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 18px 24px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.lightbox-title {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.lightbox-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-muted);
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
padding: 4px 8px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.lightbox-close:hover { background: var(--surface-2); color: var(--text); }
|
||
|
||
.lightbox-body {
|
||
padding: 24px;
|
||
font-family: 'Alegreya Sans', sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
color: var(--text);
|
||
}
|
||
|
||
.lightbox-body h3 {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--gold);
|
||
margin: 24px 0 8px;
|
||
}
|
||
|
||
.lightbox-body h3:first-child { margin-top: 0; }
|
||
|
||
.lightbox-body p { margin-bottom: 12px; }
|
||
|
||
.lightbox-body a {
|
||
color: var(--secondary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.lightbox-body a:hover { text-decoration: underline; color: var(--gold); }
|
||
|
||
/* ── TABS 2, 3, 4 ── */
|
||
.tab-header {
|
||
margin-bottom: 32px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
text-align: center;
|
||
}
|
||
|
||
.tab-header h2 {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--gold);
|
||
margin-bottom: 8px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.tab-header p {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 15px;
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── ACCORDION ── */
|
||
.accordion-item {
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.accordion-trigger {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: none;
|
||
border: none;
|
||
padding: 18px 0;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
}
|
||
|
||
.accordion-trigger-text {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: var(--text);
|
||
flex: 1;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.accordion-arrow {
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
transition: transform 150ms ease;
|
||
}
|
||
|
||
.accordion-trigger.open .accordion-arrow { transform: rotate(180deg); color: var(--gold); }
|
||
.accordion-trigger:hover .accordion-trigger-text { color: var(--gold); }
|
||
|
||
.accordion-panel {
|
||
display: none;
|
||
padding: 0 0 22px;
|
||
font-family: 'Alegreya Sans', sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.75;
|
||
color: var(--text);
|
||
}
|
||
|
||
.accordion-panel.open { display: block; }
|
||
|
||
.accordion-panel p { margin-bottom: 12px; }
|
||
|
||
.accordion-panel a {
|
||
color: var(--secondary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.accordion-panel a:hover { text-decoration: underline; color: var(--gold); }
|
||
|
||
/* ── FURTHER READING (Tab 4) ── */
|
||
.reading-section { margin-bottom: 36px; }
|
||
|
||
.reading-section h3 {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
margin-bottom: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
.reading-link {
|
||
display: block;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
text-decoration: none;
|
||
transition: background 100ms ease;
|
||
}
|
||
|
||
.reading-link:last-child { border-bottom: none; }
|
||
|
||
.reading-link-title {
|
||
font-family: 'Alegreya Sans', sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--secondary);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.reading-link-desc {
|
||
font-family: 'Alegreya Sans', sans-serif;
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.reading-link:hover .reading-link-title { color: var(--gold); }
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media (max-width: 600px) {
|
||
.nav { padding: 0 12px; overflow-x: auto; }
|
||
.nav-title { font-size: 14px; margin-right: 16px; }
|
||
.nav-btn { font-size: 12px; padding: 12px 10px; white-space: nowrap; }
|
||
.container { padding: 24px 16px 60px; }
|
||
.story-body p { font-size: 17px; }
|
||
.story-meta h1 { font-size: 28px; }
|
||
.decoder-panel, .marginnote-panel { width: 280px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══ NAVIGATION ══ -->
|
||
<nav class="nav">
|
||
<span class="nav-title">Polemos</span>
|
||
<button class="nav-btn active" onclick="switchTab('tab-story', this)">The Story</button>
|
||
<button class="nav-btn" onclick="switchTab('tab-world', this)">The World</button>
|
||
<button class="nav-btn" onclick="switchTab('tab-craft', this)">The Craft</button>
|
||
<button class="nav-btn" onclick="switchTab('tab-reading', this)">Further Reading</button>
|
||
</nav>
|
||
|
||
<!-- ══════════════════════════════════════ -->
|
||
<!-- ══ TAB 1: THE STORY ══ -->
|
||
<!-- ══════════════════════════════════════ -->
|
||
<div class="container">
|
||
<div class="tab-content active" id="tab-story">
|
||
|
||
<div class="story-meta">
|
||
<h1>Polemos</h1>
|
||
<div class="meta-line">Written in 2010 · Part of <em>Of Pens and Swords and other stories</em></div>
|
||
</div>
|
||
|
||
<div class="story-note">
|
||
Written as a Christmas gift for Andy Barnard. The title is the Greek word for war — but the war this story stages is fought without a single weapon drawn.
|
||
</div>
|
||
|
||
<div class="story-body">
|
||
|
||
<p><span class="marginnote" id="mn-establishing"><button class="marginnote-trigger" onclick="togglePanel('mn-establishing', this)">A table stood in the middle of what appeared to be an endless floor.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>The story opens with a cinematic establishing shot: a single lit object surrounded by infinite darkness. This is deliberate spatial compression — the entire narrative will play out at this table, but the consequences will fill the world. By starting with the table before the players, the author signals that the game is more important than the men who play it.</span></span> It was small and square, with a single chair on either side. Both the chairs and the table were made of mahogany and painted with a white paint that seemed to shine from within with an odd light that appeared to change colour when viewed from different angles. Though the light was not bright it contained a certain magnificence that made the table strangely magnetic.</p>
|
||
|
||
<p>The floor, if you could call it that, was black, the sort of black that seems to have an endless depth to it. Were it not for the fact that its surface had a polished sheen that reflected the table and chairs, the floor could easily deceive a man into thinking that he was somehow standing over an <button class="lb-trigger" onclick="openLightbox('lb-void')">infinite abyss</button>. With the exception of the table there was only darkness, pressing in from all sides and extending beyond even the floor.</p>
|
||
|
||
<p>Two men approached the table from either side.</p>
|
||
|
||
<p><span class="marginnote" id="mn-clothing"><button class="marginnote-trigger" onclick="togglePanel('mn-clothing', this)">The first carried a lantern which gave off the same kind of light as the table, but brighter.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>What follows is two extended character portraits built entirely from clothing and physical detail — no backstory, no names, no interior thought. The man in white gets casual warmth: bare feet, a sling bag, a Panama hat. The man in black gets cold formality: polished shoes, cufflinks, a red rose. The author is doing characterisation through costume design, the way a film director would. Every garment is doing theological work.</span></span> His hair was as white as an Antarctic wasteland on a summer morning and fell past his shoulders in an untamed, or rather untameable, fashion. Though he was old, he stood tall and walked, barefoot, with a sense of purpose at precisely the pace he intended. In fact, the only things that betrayed his age were his hair and the deep lines etched into his face. His eyes, which were a piercing blue akin to the waters of a Pacific island lagoon, defied the age of his face with a life that no man, indeed no child, could ever know. He wore a loose, white, short-sleeved shirt, white knee-length shorts and a black leather belt with a simple silver buckle. Over his shoulder he carried a brown sling bag and on his head sat a beautiful <span class="decoder" id="dec-panama"><button class="decoder-trigger" onclick="togglePanel('dec-panama', this)">Panama hat</button><span class="decoder-panel"><span class="decode-label">Decoded</span><span class="decode-term">Panama hat</span>A traditional brimmed hat woven from toquilla straw, originating in Ecuador despite the name. Associated with leisure, warmth, and unhurried confidence. Against the man in black's bowler hat — a symbol of English formality and urban power — the Panama frames this figure as someone at ease in his own authority, with no need to perform it.<span class="decode-link"><a href="https://en.wikipedia.org/wiki/Panama_hat" target="_blank">→ Panama hat — Wikipedia</a></span></span></span>. Although the light from the lantern masked it, the man in white's clothes shone with the same light as the table and the lantern.</p>
|
||
|
||
<p>The second man came from the shadows, only becoming visible in the light of the table, and later, the lantern. He wore a full-length black suit with a red shirt and black tie. His leather shoes were polished to a shine, his sterling silver cufflinks gleamed and where one would usually find a corsage there sat a single, red rose. His face, neither young nor old, was handsome and proud with chiseled features and a perfectly trimmed, black goatee. His black hair, was slicked back under a black felt <span class="decoder" id="dec-bowler"><button class="decoder-trigger" onclick="togglePanel('dec-bowler', this)">bowler hat</button><span class="decoder-panel"><span class="decode-label">Decoded</span><span class="decode-term">Bowler hat</span>A hard felt hat with a rounded crown, invented in 1849 for British gamekeepers and later adopted by City of London businessmen. It connotes control, propriety, and institutional power. Worn "tipped slightly forward and to the left" — a studied rakishness that signals vanity. Where the Panama is earned ease, the bowler is performed authority.<span class="decode-link"><a href="https://en.wikipedia.org/wiki/Bowler_hat" target="_blank">→ Bowler hat — Wikipedia</a></span></span></span> which he wore tipped slightly forward and to the left. His eyes were keen and dark, augmenting the cocky air with which this man carried himself. The only thing that he carried was a black umbrella with a silver point at one end and a handle shaped like the head of a snake, at the other.</p>
|
||
|
||
<p><span class="marginnote" id="mn-gaze"><button class="marginnote-trigger" onclick="togglePanel('mn-gaze', this)">Upon reaching the table, the two men stood at opposite ends looking at each other, not saying a word, each man sizing the other up.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>The man in black cannot hold the man in white's gaze. This is the first and most economical power indicator in the story — before a single move is made, the hierarchy is established through eye contact alone. The man in black compensates by studying clothes and face instead, an avoidance the reader is invited to notice. The story will end with the man in white looking at the man in black and winking. The gaze frames everything.</span></span> The man in black found that he could not hold the steady piercing gaze of the man opposite him. He repeatedly looked away and examined the man in white's clothes and face, avoiding those blue eyes as much as he could.</p>
|
||
|
||
<p>After a moment of solemnly contemplating the man in black, the man in white motioned to him to take a seat. As the man in black sat down, the man in white raised the lantern over the center of the table and let go, leaving it suspended in mid-air, about three feet above the table.</p>
|
||
|
||
<p>After this, the man in white took his bag off his shoulder, placed it on the floor beside his chair and sat down opposite the man in black. The man in black took off his hat and placed it at the corner nearest him on his left while the man in white sat back continued to consider him thoughtfully, with one arm folded, one hand stroking his chin and his head tilted ever so slightly to the right. The man in black also leaned back, looking out into the blackness all around him. He began to grow impatient and started drumming his fingers on the table. After a while the man in black looked at the man in white with a look that said plainly,</p>
|
||
|
||
<p>"Well? Can we begin already?"</p>
|
||
|
||
<p>The man in white reached down, rummaged in his bag for a short while, and came up with two paintbrushes and a small jar of <span class="decoder" id="dec-paint"><button class="decoder-trigger" onclick="togglePanel('dec-paint', this)">paint</button><span class="decoder-panel"><span class="decode-label">World-internal term</span><span class="decode-term">The Paint</span>The story's central creative medium — simultaneously thin and thick, still and moving, colourless and every colour. Its behaviour is governed entirely by the painter's will. It cannot be predicted or controlled by the man in black; it responds only to intent. The paint is divine creative potential: formless until given purpose, infinite in possibility, and dangerous if poured out carelessly. Later, a specific colour — red — will become the mechanism of the story's resolution.</span></span> in one hand. He placed the brushes on the table. One was thin and sharp, the kind that is used to paint the details on miniatures. The other was much wider and the bristles were cut straight across, perpendicular to the shaft.</p>
|
||
|
||
<p><span class="marginnote" id="mn-paint-nature"><button class="marginnote-trigger" onclick="togglePanel('mn-paint-nature', this)">While the brushes were ordinary in every way, the paint was not.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>The author spends more time describing the paint than either character. This is proportional to its importance: the paint is not a prop but the story's cosmological engine. Notice the deliberate paradoxes — "thin as water, yet looked... thick as mud" — the prose itself behaves like the paint, holding contradictions simultaneously. The passage also slips in a quiet warning: "if tipped, it could rush out and drench everything." The paint is not safe.</span></span> It was as thin as water, yet looked, for all intents and purposes, as thick as mud. Its movement was peculiar as well. It swirled randomly inside the jar, moving to its own, constantly changing rhythm and if tipped, it could rush out and drench everything, dribble out like custard or not move at all. The most remarkable aspect of this paint though, was its colour, impossible to describe because the paint, whilst in the jar, had the potential to be any colour and any shade that the painter wanted it to be.</p>
|
||
|
||
<p>The man in white opened the jar and placed it on the table. It shone with the light of the lantern and the table and the man in white, but it didn't blend in. The man in white picked up the thinner of the two brushes and began to paint.</p>
|
||
|
||
<p class="section-break">⟡ ⟡ ⟡</p>
|
||
|
||
<p><span class="marginnote" id="mn-genesis"><button class="marginnote-trigger" onclick="togglePanel('mn-genesis', this)">The man in white started by painting a thin square border in the centre of the table, in bright, glistening gold.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>The creation sequence that follows mirrors Genesis with deliberate precision: first light (the stars), then the separation of celestial bodies (sun and moon), then water, then land rising from the deep, then vegetation, then creatures, then the breath of life. The author maps a seven-day theological structure onto a single painting session. The chessboard is Eden — ordered, bounded, and placed at the centre of everything.</span></span> His hand was steadier than many painters wish their hands could be and his movements were quick and confident. As soon as the paintbrush touched the table, tiny flecks of light burst out of the lantern and rushed out into the darkness until they came to their intended positions and stopped. By the time the third side of the square had been painted, the darkness had become a sky dotted with countless stars which were reflected by the seemingly endless floor.</p>
|
||
|
||
<p>As the man in white began the fourth side, a large orb of bright, golden light, like the paint of the square, and a smaller orb of silvery, blue light proceeded from opposite ends of the lantern, going out in opposite directions toward the horizon. As the square was finished, the orbs came to rest for a moment at the floor's edge, before beginning to move vertically, the silver orb rising and the golden orb falling as if connected by an invisible thread to the table. Eventually, the orbs slowed to the point that they appeared to be deceptively still. The silver orb hovered, miles away, directly above the table, and the golden orb lay far below them beneath the floor.</p>
|
||
|
||
<p>The man in black never once seemed surprised or astonished at the events taking place around him, in fact he never seemed to notice. He simply sat and watched the man in white with his arms folded, looking increasingly bored and unimpressed.</p>
|
||
|
||
<p>The man in white switched brushes and began to fill in the square. This time, the paint was the colour and texture of varnished oak. As soon as he had finished the first coat, he began a second, raising the painted area a fraction above the surface table. He continued this process until there was a varnished oak platform in the center of the table.</p>
|
||
|
||
<p>While he was painting, a great number of things began to happen, all to the rhythm of his brush strokes. First, <button class="lb-trigger" onclick="openLightbox('lb-creation')">water gushed out from under the tables and chairs</button>, spreading out in every direction, turning the floor to water as it went, until the two men were seated at a table in the middle of a vast ocean. The man in black was disgusted when his pristine shoes, and naturally his socks as well, were properly soaked in the sudden deluge. The man in white smiled, laughing to himself without looking up, while his bare feet played in the cool water.</p>
|
||
|
||
<p>After this, land sprung up from the depths, rising to hills mountains in places, settling to plateaus and valleys in others, creating an exciting, albeit barren, landscape. The man in black was glad to have somewhere solid to put his feet, but found to his horror, that his waterlogged shoes turned the ground to mud, further ruining his once beautiful footwear. Finally, thick, rich, green grass exploded from under the table and spread out over the land. As the sun rose over the eastern horizon (which was to the man in white's right), trees and flowers, and plants of all kinds, shot up from the ground and formed forests, plains, gardens and meadows.</p>
|
||
|
||
<p>Once the platform was completed, the man in white set to work painting eight rows of eight alternating black and white squares while the man in black, now thoroughly bored, lit a cigarette and continued to watch the man in white. The black squares were the same black as the floor had been and the white squares were the same white that the table was.</p>
|
||
|
||
<p>As he painted, creatures of every sort: birds, insects, mammals, reptiles, fish and others, all came into existence as if formed out of clouds of dust. As soon as the last square was painted, a mighty wind rushed out from the table, sending the man in black's favourite hat flying off into the distance.</p>
|
||
|
||
<p><span class="marginnote" id="mn-breath"><button class="marginnote-trigger" onclick="togglePanel('mn-breath', this)">When it ceased, everything, from the blade of grass to the elephant, came suddenly and joyously to life.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>The Hebrew word <em>ruach</em> means both "wind" and "spirit" — the same word appears in Genesis when God breathes life into creation. The "mighty wind" that brings everything "suddenly and joyously to life" is a direct echo. Note too that the wind costs the man in black his hat — the breath of life is an inconvenience to him, literally blowing away his composure. The man in white creates; the man in black endures.</span></span> And in the centre of the table, where once there was nothing, stood a magnificent oak chessboard.</p>
|
||
|
||
<p>The man in white sat back, looked around at his work, breathed the fresh air in deep, and smiled. He was very pleased. The man in black was the polar opposite. His hat was gone, his socks were still sopping wet, his hat had been blown to the middle of who-knows-where <span class="marginnote" id="mn-gorilla"><button class="marginnote-trigger" onclick="togglePanel('mn-gorilla', this)">(actually, it had landed perfectly on the head of a rather lucky, and very surprised gorilla)<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>A parenthetical joke in the middle of a cosmic creation narrative. This is a deliberate tonal break — the author steps outside the solemnity to remind the reader that the voice telling this story is warm, playful, and human. It also quietly asserts that the created world is already full of independent life: the gorilla is surprised, which means it has its own experience. The world is not a backdrop; it's populated with beings who don't know they're pieces in a game.</span></span> and on top of all this he was sick and tired of waiting around for this old coot opposite him to finish.</p>
|
||
|
||
<p class="section-break">⟡ ⟡ ⟡</p>
|
||
|
||
<p>After a while, the man in white reached down and picked up his bag and pulled out thirty two solid gold chess pieces, placing them one by one on the table before him. He put the bag down again and picked up the thin brush and one of the two kings that were on the table. He dipped the brush in the paint and <span class="decoder" id="dec-touch"><button class="decoder-trigger" onclick="togglePanel('dec-touch', this)">touched the tip of the king's crown with it</button><span class="decoder-panel"><span class="decode-label">World-internal term</span><span class="decode-term">The Mark on the King</span>This seemingly small gesture is the most consequential action in the story. The paint applied to the white king's crown is the mechanism that will later produce the "trickle of red" that reclaims every piece. The man in white is not just painting a chess piece — he is embedding a failsafe into the game before it begins. Every move that follows, including the apparent loss of the white king, is downstream of this single touch.</span></span>.</p>
|
||
|
||
<p>The king turned from gold to white instantly. He placed the king on its appropriate square (which was the black square, closest to the middle, on his side of the chessboard) and picked up the other king. Again he touched the tip of the king's crown with the paintbrush, but this time it turned black.</p>
|
||
|
||
<p>After placing it on its square, the man in white closed the jar of paint and put it, and the paintbrushes, back into his bag. He then proceeded to divide up the remaining pieces between himself and the man in black. The two of them then placed the pieces on the board.</p>
|
||
|
||
<p>As soon as a piece was placed, it changed from gold to either black or white, depending on which side it was on. During this, villages, towns and cities sprang up, were populated and developed each time a piece was placed. At long last the game was set to begin.</p>
|
||
|
||
<p class="section-break">⟡ ⟡ ⟡</p>
|
||
|
||
<p>The man in white moved first. He moved the <span class="decoder" id="dec-pawn"><button class="decoder-trigger" onclick="togglePanel('dec-pawn', this)">pawn in front of his queen two squares forward</button><span class="decoder-panel"><span class="decode-label">Decoded</span><span class="decode-term">Queen's Pawn Opening (1. d4)</span>One of the oldest and most classical chess openings, moving the d-pawn two squares. It's a controlling, strategic opening — less immediately aggressive than 1. e4 (the King's Pawn), more concerned with long-term positional advantage. The choice of opening characterises the man in white: he plays for structure, not flash.<span class="decode-link"><a href="https://en.wikipedia.org/wiki/Queen%27s_Pawn_Game" target="_blank">→ Queen's Pawn Game — Wikipedia</a></span></span></span>, halfway across the board. As the pawn moved, an army assembled on a hill about half a mile behind the man in white. The man in black mimicked this move, placing his pawn on the square diagonally opposite the white pawn. This move too, brought an army, which assembled on the hill behind the man in black, facing the army across the plain in which the two men sat, playing chess.</p>
|
||
|
||
<p>The man in white took the black pawn. As he did so, the two armies charged down into the plain, with a roar clashed suddenly and violently all around the two men, who took no notice of this and continued playing. When the battle was over, the army that was behind the man in white stood victorious, dancing over the corpses of their fallen adversaries. Not one man in the opposing army had survived.</p>
|
||
|
||
<p><span class="marginnote" id="mn-allegiance"><button class="marginnote-trigger" onclick="togglePanel('mn-allegiance', this)">The man in black smiled. He knew what was coming.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>This is the structural hinge of the entire story. The author is about to reveal the central rule — pieces change allegiance when they cross the midline — and he introduces it through the man in black's smile. The villain understands the rules better than the reader does, which means his confidence is earned, not bluster. The author makes the reader feel the trap closing because we learn the rule at the same moment we learn that it has already been weaponised.</span></span> As soon as the pawn had been set down past the halfway line of the board, it changed from white to black. As it did so, the army set off to pillage, plunder and utterly destroy the city of their enemies.</p>
|
||
|
||
<p>The man in white was not surprised or affronted – he knew that this was the nature of this particular game of chess. <span class="decoder" id="dec-rule"><button class="decoder-trigger" onclick="togglePanel('dec-rule', this)">Each piece, once it crossed over to the other side of the board would change its allegiance and turn from white to black and vice versa.</button><span class="decoder-panel"><span class="decode-label">World-internal term</span><span class="decode-term">The Allegiance Rule</span>The story's invented chess variant. In standard chess, captured pieces are removed. Here, every piece that crosses the halfway line defects to the opponent. This rule transforms chess from a game of elimination into a game of conversion — which maps directly onto the theological argument: souls are not destroyed but corrupted, and every act of aggression risks empowering the adversary. The man in white cannot attack without the possibility of losing what he sends.</span></span></p>
|
||
|
||
<p>The game continued. Each move bringing a larger force, producing a more violent, more devastating battle and continuing an increasingly terrible <button class="lb-trigger" onclick="openLightbox('lb-polemos')">war</button>. The man in white played aggressively, taking pieces wherever and whenever he could, until he had effectively removed over half of the man in black's pieces. <span class="marginnote" id="mn-strategy"><button class="marginnote-trigger" onclick="togglePanel('mn-strategy', this)">The man in black had a different strategy: he kept his forces back, never allowing them to cross over to the other side, thus luring the man in white's forces over to his side.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>The chess strategy is also a theological argument. The adversary's method is not direct confrontation but enticement — he doesn't send his pieces out to be corrupted; he draws the opponent's pieces toward him so they corrupt themselves. This maps onto a specific tradition of Christian thought about the nature of evil: it doesn't create, it seduces. The man in black never builds; he only redirects what the man in white has already made.</span></span></p>
|
||
|
||
<p>Simply put, every time the man in white took one of the man in black's pieces, he replaced it with his own. The man in black grew ever more confident and when he obtained an <span class="decoder" id="dec-queen"><button class="decoder-trigger" onclick="togglePanel('dec-queen', this)">extra queen</button><span class="decoder-panel"><span class="decode-label">Decoded</span><span class="decode-term">Pawn promotion</span>In standard chess, a pawn that reaches the opposite end of the board can be promoted to any piece — most commonly a queen. Here the mechanic interacts with the allegiance rule: a pawn the man in white sent forward was converted, then promoted on the man in black's side. The man in white's aggression literally manufactures his opponent's most powerful piece.<span class="decode-link"><a href="https://en.wikipedia.org/wiki/Promotion_(chess)" target="_blank">→ Pawn promotion — Wikipedia</a></span></span></span> at the expense of a pawn, he even chuckled smugly to himself. Eventually, though he had removed three quarters of the man in black's pieces, the man in white was left with only his king.</p>
|
||
|
||
<p class="section-break">⟡ ⟡ ⟡</p>
|
||
|
||
<p><span class="marginnote" id="mn-empire"><button class="marginnote-trigger" onclick="togglePanel('mn-empire', this)">The man in black moved confidently. He had been orchestrating this from the start.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>The prose accelerates here — sentences shorten, moves become clipped, and the author intercuts chess notation with geopolitical consequences in a staccato rhythm. "An empire was born." "The empire expanded." "The known world was conquered." Three sentences that span centuries. The compression forces the reader to feel the inevitability of the closing trap without lingering on details. It's a narrative checkmate before the literal one.</span></span> One of his queens prevented the man in white's king from moving left. He moved his rook one square away from the queen, blocking any passage to the right.</p>
|
||
|
||
<p>An empire was born.</p>
|
||
|
||
<p>The man in white could only move his king forward.</p>
|
||
|
||
<p>The man in black moved his bishop.</p>
|
||
|
||
<p>Check.</p>
|
||
|
||
<p>The empire expanded.</p>
|
||
|
||
<p>Forward again.</p>
|
||
|
||
<p>The other bishop was moved.</p>
|
||
|
||
<p>Check.</p>
|
||
|
||
<p><button class="lb-trigger" onclick="openLightbox('lb-theodicy')">The known world was conquered.</button></p>
|
||
|
||
<p>The man in black let out a cold, malicious laugh. The man in white's king stood on the edge of the halfway line. It could not be moved back. The man in white knew what his next move had to be. He sat and stared at the solitary white piece for some time before he slowly moved it forward across the halfway line.</p>
|
||
|
||
<p><span class="marginnote" id="mn-king-turns"><button class="marginnote-trigger" onclick="togglePanel('mn-king-turns', this)">The king turned black.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>Four words that carry the entire theological weight of the story. The author has spent pages establishing the allegiance rule so that this moment lands with its full implications: the Creator-figure has entered the domain of corruption and submitted to its rules. In Christian theology, this is the Incarnation — God entering the fallen world, taking on its condition. The sentence is four words long because anything more would dilute it.</span></span></p>
|
||
|
||
<p>The man in black began to rise off his seat in victory, but stopped when the man in white raised his hand. The man in white had not taken his eyes off the king since he had moved it and it was clear that he was waiting for something. Reluctantly the man in black sat down again and looked at the once white king.</p>
|
||
|
||
<p>All of a sudden a <span class="decoder" id="dec-red"><button class="decoder-trigger" onclick="togglePanel('dec-red', this)">trickle of red paint</button><span class="decoder-panel"><span class="decode-label">World-internal term</span><span class="decode-term">The Red Paint</span>The paint applied to the king's crown at the beginning of the game — before any move was made — now activates. Its colour is red, and it flows down from the crown to reclaim every piece on the board. The allegory is explicit: this is blood from a crown, flowing down to redeem what was lost. The entire game, including the apparent defeat, was the condition necessary for this mechanism to activate. The man in white had to lose his king across the line for the red paint to reach all the converted pieces.</span></span> started to run down from the point where the man in white had touched it with the paintbrush earlier. It trickled down onto the board itself, splitting into smaller streams as it went. Each stream found its way to a chess piece and circled up to the top of piece. <button class="lb-trigger" onclick="openLightbox('lb-redemption')">As soon as a stream reached the top, the piece changed colour and allegiance once again, to white</button>, and the stream retracted back to its source. As the stream travelled back up the once white king to its point of origin, the king too, was transformed back to white. When this had finished, the only black piece left on the board was the man in black's king, which was now outflanked on all sides by the newly white pieces.</p>
|
||
|
||
<p><span class="marginnote" id="mn-thesis"><button class="marginnote-trigger" onclick="togglePanel('mn-thesis', this)">The man in white smiled. The man in black had forgotten what made the pieces change allegiance.<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>This is the thesis statement of the entire story, delivered as an observation about chess rules. The man in black assumed the board had the power — that territory determines allegiance. But "it was not a property of the board but the presence of a king that held sway over the pieces." Allegiance is personal, not positional. The entire story has been building to this single inversion: the man in black's strategy was based on a misunderstanding of the game's deepest rule.</span></span> It was not a property of the board but the presence of a king that held sway over the pieces.</p>
|
||
|
||
<p>The man in white looked up at the man in black and winked.</p>
|
||
|
||
<p><span class="marginnote" id="mn-checkmate"><button class="marginnote-trigger" onclick="togglePanel('mn-checkmate', this)">"Checkmate."<span class="mn-icon">✎</span></button><span class="marginnote-panel"><span class="mn-label">Craft Note</span>The only spoken word in the entire story. Every other exchange has been communicated through looks, gestures, and the body language of the game. The author withholds dialogue for roughly 3,000 words and then gives the man in white a single word — and it is the word that ends all games. The restraint is structural: when you only get one word, it had better be the right one.</span></span></p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════ -->
|
||
<!-- ══ TAB 2: THE WORLD ══ -->
|
||
<!-- ══════════════════════════════════════ -->
|
||
<div class="tab-content" id="tab-world">
|
||
|
||
<div class="tab-header">
|
||
<h2>The World</h2>
|
||
<p>What the author has constructed — the rules of the game, the logic of the invented system, and what it costs.</p>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">Who are the two players, and how does the story identify them without naming them?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>The two figures are never named, but the story identifies them through an accumulation of symbolic detail. The man in white creates: he paints the board, makes the world, brings life into existence, and carries light with him. He is old, unhurried, barefoot, and at ease. He arrives with a lantern — the only source of light in the void. The man in black arrives from darkness and brings nothing except an umbrella with a snake-headed handle. He is handsome, vain, formally dressed, and impatient. He cannot hold the man in white's gaze.</p>
|
||
<p>The allegorical mapping is to God and Satan, but the story earns the identification through behaviour rather than assertion. The man in white creates and the man in black corrupts — you know who they are because of what they do, not because of labels.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">How does the chess-as-creation system work?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>The system has three layers. First, the act of painting the board generates the physical world — stars, sun, moon, water, land, vegetation, creatures, and the breath of life all emerge in sequence as the man in white paints. Second, placing chess pieces on the board generates civilisation — villages, towns, and cities spring up as each piece is set down. Third, moving the pieces generates conflict — each move assembles armies, each capture produces a battle, and the ongoing game sustains an ongoing war.</p>
|
||
<p>The system's key constraint is the allegiance rule: any piece that crosses the board's halfway line converts to the opponent's colour. This means aggression is inherently self-defeating — every victory carries the seed of its own reversal. The man in white cannot take without giving; the man in black cannot receive without first being taken from.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">What is the paint, and what are its rules?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>The paint is the story's first principle — the substance from which everything is made. Its properties are defined by paradox: thin as water but thick as mud, formless but capable of any form, colourless but potentially any colour. It moves to its own rhythm and responds only to the painter's will. These contradictions are not whimsy; they're a description of omnipotent creative potential — something that contains all possibilities and is constrained only by the intention of the one who wields it.</p>
|
||
<p>The paint has one property that only becomes visible at the end: it can be applied in advance, lying dormant until activated. The mark on the white king's crown — applied before the game begins — activates only when the king crosses the halfway line. The paint is patient. It does not need the game to be over to win it; it only needs the right conditions to be met.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">What does allegiance actually mean in this world — and who controls it?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>This is the question the entire story turns on. The man in black believes allegiance is territorial — that pieces belong to whichever side of the board they're standing on. His entire strategy is built on this assumption: lure the opponent's pieces across the line, and they become yours.</p>
|
||
<p>The man in white knows differently. Allegiance is not a property of position but of proximity to a king. When the white king crosses the line and the red paint activates, every piece on the board reverts to white — not because the board changed, but because the king is now present among them. The story's thesis is that belonging is personal, not positional. The man in black's error is not tactical but ontological: he misunderstands the nature of the game he's playing.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">What does the man in black actually want — and does the story think wanting it is legitimate?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>The man in black wants to win — but his version of winning is accumulation. He collects converted pieces, builds an empire, conquers the known world. His satisfaction is proportional to how much he controls. He doesn't create anything; every piece he gains was made by someone else. His strategy is parasitic by design.</p>
|
||
<p>The story does not treat his desire for power as absurd — it treats it as a genuine threat. The empire is real, the conquest is real, and the man in white's apparent defeat is not theatrical. But the story does treat the man in black's understanding of power as fundamentally flawed. He mistakes control for sovereignty. He thinks he's winning because he has more pieces, but the game was never about having the most pieces. It was about what holds them together.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════ -->
|
||
<!-- ══ TAB 3: THE CRAFT ══ -->
|
||
<!-- ══════════════════════════════════════ -->
|
||
<div class="tab-content" id="tab-craft">
|
||
|
||
<div class="tab-header">
|
||
<h2>The Craft</h2>
|
||
<p>Genre lineage, structural choices, and what the story is doing while the reader watches the chess game.</p>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">What tradition is this story working within?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p><em>Polemos</em> sits within the Christian allegorical tradition — specifically the lineage that runs from John Bunyan's <em>The Pilgrim's Progress</em> through C.S. Lewis's <em>The Screwtape Letters</em> and the Narnia novels. In each case, theological ideas are dramatised through invented situations: a journey, a correspondence, a game. The allegory is not hidden; it's the point. The reader is meant to decode it.</p>
|
||
<p>More specifically, the story belongs to the "cosmic chess" subgenre — narratives where a game between two players determines the fate of the world. This motif appears in Norse mythology (the gods playing <em>tafl</em>), medieval morality plays, Stefan Zweig's <em>The Royal Game</em>, and Ingmar Bergman's <em>The Seventh Seal</em>. The innovation here is the allegiance rule, which transforms the chess metaphor from a simple contest into a commentary on the nature of conversion and redemption.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">Why chess — and why this particular variant of chess?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>Standard chess is a game of elimination — you win by removing the opponent's ability to move. That model doesn't serve this story's theology, which is not about destruction but about allegiance. So the author invents a variant where pieces convert rather than die. This single rule change transforms the metaphor completely: every attack is a risk of defection, every victory contains the seed of its own reversal, and the only way to win is not to have the most pieces but to understand what holds them.</p>
|
||
<p>Chess also provides something structurally essential: it's a game between two players where the outcome appears to be determined by tactical superiority, but is actually determined by understanding the rules. The man in black is tactically brilliant — his trap is genuinely well-constructed. He loses because he's playing by rules he doesn't fully understand. The gap between tactical intelligence and true understanding is the story's real subject.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">How does the story use silence and withholding?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>The most striking structural choice is the near-total absence of dialogue. The story runs approximately 3,000 words before a single word is spoken, and that word — "Checkmate" — is the last word in the story. Every other exchange is communicated through looks, gestures, body language, and the physical grammar of chess moves. The man in black's impatience is shown through drumming fingers. The man in white's authority is shown through a steady gaze. Agreement to play is communicated through a motion to sit.</p>
|
||
<p>This is not decorative restraint. It serves the allegory: these are cosmic beings for whom speech is an act of finality. When the man in white finally speaks, it is to declare the end of the game. The word is performative — it doesn't describe the checkmate, it enacts it. Withholding dialogue for the entire story makes that single word feel like an event rather than a statement.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">What is the story actually arguing about power and sacrifice?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>The story argues that the man in black's model of power — accumulation through seduction, empire through conversion — is structurally incapable of winning, because it misidentifies the source of allegiance. The man in black thinks allegiance is a function of territory: stand on my side, and you're mine. The man in white knows allegiance is a function of presence: be near the king, and you're restored.</p>
|
||
<p>This means the man in white's apparent defeat — losing every piece, being forced across the line — is actually the necessary condition for victory. The king must enter the corrupted territory for the red paint to reach the converted pieces. Sacrifice is not a cost; it's the mechanism. The story's deepest argument is that there exists a kind of power that can only be exercised by submitting to the conditions it intends to overcome. This is the Christian theology of the cross, rendered as a chess problem.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)">
|
||
<span class="accordion-trigger-text">What does the story refuse to resolve — and is the refusal deliberate?</span>
|
||
<span class="accordion-arrow">▾</span>
|
||
</button>
|
||
<div class="accordion-panel">
|
||
<p>The story does not address what happens to the world after checkmate. Empires were built, cities were destroyed, armies were slaughtered — the consequences of the game are real and devastating. The reversal of the chess pieces does not undo the war. The story ends on the wink and the word, not on the reconstruction of what was lost.</p>
|
||
<p>This is a meaningful omission. The allegory maps onto a theology where redemption has been accomplished but its full effects are not yet visible — the "already but not yet" tension of Christian eschatology. Whether the refusal to show the aftermath is a strength (leaving the reader to sit with the cost) or a limitation (avoiding the hardest question) depends on what you think the story owes the people who lived and died inside the game. The story knows this question exists — the gorilla with the hat is proof that the created world has its own experience — but it chooses not to answer it.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════ -->
|
||
<!-- ══ TAB 4: FURTHER READING ══ -->
|
||
<!-- ══════════════════════════════════════ -->
|
||
<div class="tab-content" id="tab-reading">
|
||
|
||
<div class="tab-header">
|
||
<h2>Further Reading</h2>
|
||
<p>The traditions, texts, and ideas this story is in conversation with.</p>
|
||
</div>
|
||
|
||
<div class="reading-section">
|
||
<h3>The Cosmic Chess Tradition</h3>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/The_Seventh_Seal" target="_blank">
|
||
<span class="reading-link-title">The Seventh Seal (1957) — Ingmar Bergman</span>
|
||
<span class="reading-link-desc">A knight plays chess with Death. The foundational cosmic chess narrative in Western cinema.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/The_Royal_Game" target="_blank">
|
||
<span class="reading-link-title">The Royal Game (1942) — Stefan Zweig</span>
|
||
<span class="reading-link-desc">Chess as psychological warfare. Zweig's novella explores how a game of pure logic becomes a theatre for obsession.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Chess_in_literature" target="_blank">
|
||
<span class="reading-link-title">Chess in Literature — Overview</span>
|
||
<span class="reading-link-desc">A survey of how chess has functioned as metaphor across literary history.</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="reading-section">
|
||
<h3>Christian Allegory</h3>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/The_Screwtape_Letters" target="_blank">
|
||
<span class="reading-link-title">The Screwtape Letters (1942) — C.S. Lewis</span>
|
||
<span class="reading-link-desc">Theological argument dramatised as correspondence between demons. The closest tonal ancestor to this story's method.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/The_Pilgrim%27s_Progress" target="_blank">
|
||
<span class="reading-link-title">The Pilgrim's Progress (1678) — John Bunyan</span>
|
||
<span class="reading-link-desc">The foundational Christian allegory in English. Every allegorical fiction in this tradition descends from it.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Christus_Victor" target="_blank">
|
||
<span class="reading-link-title">Christus Victor — Atonement Theory</span>
|
||
<span class="reading-link-desc">The theological model closest to the story's climax: Christ defeats evil not by force but by entering its domain and overcoming it from within.</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="reading-section">
|
||
<h3>The Problem of Evil</h3>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Theodicy" target="_blank">
|
||
<span class="reading-link-title">Theodicy — The Problem of Evil</span>
|
||
<span class="reading-link-desc">Why does a good God allow suffering? The question the story dramatises through chess — and the question it leaves unresolved.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Ransom_theory_of_atonement" target="_blank">
|
||
<span class="reading-link-title">Ransom Theory of Atonement</span>
|
||
<span class="reading-link-desc">An early Christian model where God deceives Satan into a trap — echoed in the story's paint-on-the-crown mechanic.</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="reading-section">
|
||
<h3>If You Liked This</h3>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/The_Great_Divorce" target="_blank">
|
||
<span class="reading-link-title">The Great Divorce (1945) — C.S. Lewis</span>
|
||
<span class="reading-link-desc">Another allegorical exploration of choice, allegiance, and what it means to cross a line you can't come back from.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/The_Last_Battle" target="_blank">
|
||
<span class="reading-link-title">The Last Battle (1956) — C.S. Lewis</span>
|
||
<span class="reading-link-desc">Lewis's own endgame — what happens when the board is cleared and the final move is made.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Finite_and_Infinite_Games" target="_blank">
|
||
<span class="reading-link-title">Finite and Infinite Games (1986) — James P. Carse</span>
|
||
<span class="reading-link-desc">A philosophical work on two kinds of play. The man in black plays a finite game; the man in white plays an infinite one.</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div><!-- end .container -->
|
||
|
||
|
||
<!-- ══════════════════════════════════════ -->
|
||
<!-- ══ LIGHTBOXES ══ -->
|
||
<!-- ══════════════════════════════════════ -->
|
||
|
||
<div class="lightbox-overlay" id="lb-void" onclick="closeLightboxOnOverlay(event, 'lb-void')">
|
||
<div class="lightbox-box">
|
||
<div class="lightbox-header">
|
||
<span class="lightbox-title">The Void Before Creation</span>
|
||
<button class="lightbox-close" onclick="closeLightbox('lb-void')">✕</button>
|
||
</div>
|
||
<div class="lightbox-body">
|
||
<h3>Tohu va-vohu</h3>
|
||
<p>The opening of <em>Polemos</em> describes a void — "the sort of black that seems to have an endless depth to it" — with a single luminous object at its centre. This mirrors the opening of Genesis, where the earth is <em>tohu va-vohu</em> (formless and void) and darkness covers the deep, until God speaks light into existence.</p>
|
||
<p>The story's void is not empty in the conventional sense. It has a floor — polished, reflective, capable of supporting furniture. It's a void that anticipates being filled, a darkness that already contains the infrastructure for creation. The man in black arrives from this darkness, which means he predates the creation but not the table. The table — and its light — were there first.</p>
|
||
<h3>Why it matters for the story</h3>
|
||
<p>The void establishes the story's metaphysics before a single move is made. Creation is not an act performed on nothing; it's an act performed on darkness that is already structured by the presence of the table. The game has a venue before it has players. This implies that the contest between the two men is not the first thing — the space for the contest is. The rules precede the players.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lightbox-overlay" id="lb-creation" onclick="closeLightboxOnOverlay(event, 'lb-creation')">
|
||
<div class="lightbox-box">
|
||
<div class="lightbox-header">
|
||
<span class="lightbox-title">Creation Narratives</span>
|
||
<button class="lightbox-close" onclick="closeLightbox('lb-creation')">✕</button>
|
||
</div>
|
||
<div class="lightbox-body">
|
||
<h3>The Genesis parallel</h3>
|
||
<p>The creation sequence in <em>Polemos</em> follows the order of Genesis 1 with remarkable precision: light and darkness separated, celestial bodies placed, waters gathered, dry land raised, vegetation, creatures formed from dust, and finally a mighty wind (the Hebrew <em>ruach</em>, meaning both wind and spirit) that brings everything to life. Even the man in white's satisfaction — "He was very pleased" — echoes the repeated refrain of Genesis: "And God saw that it was good."</p>
|
||
<h3>Creation ex nihilo versus creation from paint</h3>
|
||
<p>Classical theology holds that God creates from nothing — <em>ex nihilo</em>. The story offers a subtle variant: the man in white creates from <em>paint</em>, a pre-existing substance he carries in his bag. The paint is formless but not nothing; it's pure potential awaiting intention. This positions the author closer to the Platonic tradition (where a craftsman shapes pre-existing material) than the strict <em>ex nihilo</em> position — though the paint's origin is never explained, leaving the question open.</p>
|
||
<h3>The chessboard as Eden</h3>
|
||
<p>The board is painted at the centre of the created world, ordered and bounded while everything around it is wild. It's the place where the rules of the game are visible and the stakes are clear. In this reading, the chessboard is the Garden — the structured space within which choices have consequences and allegiance can be tested.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lightbox-overlay" id="lb-polemos" onclick="closeLightboxOnOverlay(event, 'lb-polemos')">
|
||
<div class="lightbox-box">
|
||
<div class="lightbox-header">
|
||
<span class="lightbox-title">Polemos — War as First Principle</span>
|
||
<button class="lightbox-close" onclick="closeLightbox('lb-polemos')">✕</button>
|
||
</div>
|
||
<div class="lightbox-body">
|
||
<h3>The Greek concept</h3>
|
||
<p>The title comes from the ancient Greek word <em>πόλεμος</em> (polemos), meaning war or conflict. The pre-Socratic philosopher Heraclitus declared that "war is the father of all things" — that conflict is not a disruption of the natural order but its fundamental engine. From <em>polemos</em> we get "polemic" (an aggressive argument) and its root runs through Western philosophy's understanding of dialectics: thesis, antithesis, synthesis.</p>
|
||
<h3>War in the story</h3>
|
||
<p>The story takes Heraclitus's claim seriously but inverts it. War <em>is</em> the mechanism through which the world develops — each chess move produces a battle, and the escalation is real and devastating. But the story argues that war is not the deepest principle at work. Beneath the conflict is a game, beneath the game is a rule about allegiance, and beneath the rule is a truth about what kind of presence changes people. War is the visible surface; the real engine is something closer to love — specifically, a love willing to sacrifice itself to be present among the corrupted.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lightbox-overlay" id="lb-theodicy" onclick="closeLightboxOnOverlay(event, 'lb-theodicy')">
|
||
<div class="lightbox-box">
|
||
<div class="lightbox-header">
|
||
<span class="lightbox-title">The Problem of Evil</span>
|
||
<button class="lightbox-close" onclick="closeLightbox('lb-theodicy')">✕</button>
|
||
</div>
|
||
<div class="lightbox-body">
|
||
<h3>Why does the man in white allow it?</h3>
|
||
<p>"The known world was conquered." By this point in the story, the man in black's empire has consumed everything the man in white built. Cities are destroyed, armies are dead, the world is under the dominion of a figure whose only interest is control. The man in white — who painted every star, raised every hill, breathed life into every creature — sits across the table and watches it happen.</p>
|
||
<p>This is theodicy: the philosophical problem of why an omnipotent, benevolent God permits evil and suffering. The story's answer is not that suffering doesn't matter, or that it serves a hidden purpose the sufferers should be grateful for. The answer is strategic and costly: the man in white must lose everything — including his own king — in order to activate the mechanism that reclaims the world. The suffering is real, and the price of redemption is paid by the one who created the world, not by the world itself.</p>
|
||
<h3>What the story doesn't say</h3>
|
||
<p>The story does not address the experience of the people who lived inside the conquered empire. The chess pieces change colour; the dead soldiers do not return. The allegory works at the cosmic level — it offers a structural answer to the problem of evil — but it does not pretend to comfort the individual sufferer. Whether this is intellectual honesty or a limitation of the form is left to the reader.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lightbox-overlay" id="lb-redemption" onclick="closeLightboxOnOverlay(event, 'lb-redemption')">
|
||
<div class="lightbox-box">
|
||
<div class="lightbox-header">
|
||
<span class="lightbox-title">Redemption Through Blood</span>
|
||
<button class="lightbox-close" onclick="closeLightbox('lb-redemption')">✕</button>
|
||
</div>
|
||
<div class="lightbox-body">
|
||
<h3>The Christus Victor model</h3>
|
||
<p>The climax of <em>Polemos</em> enacts a specific model of Christian atonement: <em>Christus Victor</em>. In this model, the crucifixion is not primarily a payment for sin (as in substitutionary atonement) but a strategic entry into enemy territory. Christ submits to death — the domain of evil — and by being present within it, overcomes it from the inside. The man in white's king crosses the line, turns black, and then the red paint activates, reclaiming everything.</p>
|
||
<h3>The ransom and the trap</h3>
|
||
<p>There's also an echo of the older ransom theory: the idea that God offered Christ as a ransom to Satan, who accepted — not realising that in taking the king, he had admitted the one force capable of undoing his empire. The man in black's fatal error is accepting the white king onto his side of the board. He thinks he's won another piece; he's actually admitted the mechanism of his own defeat.</p>
|
||
<h3>Blood from a crown</h3>
|
||
<p>The red paint flows from the point on the king's crown where the man in white touched it before the game began. The imagery is explicit: blood flowing down from a crowned head, reaching every corrupted being, restoring them. The paint was applied before the first move — the redemption was planned before the fall. This is the theological concept of foreknowledge enacted as a game mechanic.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// ── Tab switching ──
|
||
function switchTab(tabId, btn) {
|
||
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
|
||
document.getElementById(tabId).classList.add('active');
|
||
btn.classList.add('active');
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
|
||
// ── Panel toggle (decoders + margin notes) ──
|
||
function togglePanel(id, btn) {
|
||
const wrapper = document.getElementById(id);
|
||
const panel = wrapper.querySelector('.decoder-panel, .marginnote-panel');
|
||
const isOpen = panel.classList.contains('open');
|
||
|
||
document.querySelectorAll('.decoder-panel.open, .marginnote-panel.open')
|
||
.forEach(p => p.classList.remove('open'));
|
||
document.querySelectorAll('.decoder-trigger.open, .marginnote-trigger.open')
|
||
.forEach(b => b.classList.remove('open'));
|
||
|
||
if (!isOpen) {
|
||
panel.classList.add('open');
|
||
btn.classList.add('open');
|
||
|
||
const rect = panel.getBoundingClientRect();
|
||
if (rect.right > window.innerWidth - 16) {
|
||
panel.classList.add('flip-left');
|
||
} else {
|
||
panel.classList.remove('flip-left');
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── Close panels on outside click ──
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.decoder') && !e.target.closest('.marginnote')) {
|
||
document.querySelectorAll('.decoder-panel.open, .marginnote-panel.open')
|
||
.forEach(p => p.classList.remove('open'));
|
||
document.querySelectorAll('.decoder-trigger.open, .marginnote-trigger.open')
|
||
.forEach(b => b.classList.remove('open'));
|
||
}
|
||
});
|
||
|
||
// ── Lightbox ──
|
||
function openLightbox(id) {
|
||
document.getElementById(id).classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeLightbox(id) {
|
||
document.getElementById(id).classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
function closeLightboxOnOverlay(e, id) {
|
||
if (e.target === document.getElementById(id)) closeLightbox(id);
|
||
}
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
document.querySelectorAll('.lightbox-overlay.open').forEach(el => {
|
||
el.classList.remove('open');
|
||
});
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
|
||
// ── Accordion ──
|
||
function toggleAccordion(btn) {
|
||
const panel = btn.nextElementSibling;
|
||
const isOpen = btn.classList.contains('open');
|
||
document.querySelectorAll('.accordion-trigger.open').forEach(b => {
|
||
b.classList.remove('open');
|
||
b.nextElementSibling.classList.remove('open');
|
||
});
|
||
if (!isOpen) {
|
||
btn.classList.add('open');
|
||
panel.classList.add('open');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|