diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f708a60
--- /dev/null
+++ b/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Two Poles of One Sphere</title>
+<meta name="description" content="The Śrī Yantra, circle inversion and the Riemann sphere: a narrated video and two explorers.">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=JetBrains+Mono:wght@400;500&display=swap">
+<style>
+/* Layout: one centred column; video first, then two explorer cards. Single dark look, matching the explorers. */
+:root{--bg:#0b0a12;--panel:#15131f;--line:#2a2638;--fg:#e9e4f2;--muted:#9a93ad;--up:#f0b44c;--down:#e2559a;--bindu:#ff3b4e;
+--display:"Cormorant Garamond",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;color-scheme:dark}
+html,body{margin:0}
+body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;line-height:1.6;
+ padding:calc(32px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(48px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
+main{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
+.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
+h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,6vw,52px);line-height:1.05;margin:.2em 0 0;text-wrap:balance}
+h1 i{color:var(--down)}
+.lede{color:var(--muted);max-width:62ch;margin:0}
+video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:6px;display:block}
+.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
+a.card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--fg);text-decoration:none}
+a.card:hover,a.card:focus-visible{border-color:var(--down);outline:none}
+a.card h2{font-family:var(--display);font-weight:500;font-size:24px;margin:0}
+a.card p{margin:0;color:var(--muted);font-size:12.5px}
+.go{font-size:11px;letter-spacing:.06em;color:var(--up)}
+.notes{border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:12.5px;max-width:66ch}
+.notes p{margin:0 0 10px}
+.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
+</style>
+</head>
+<body>
+<main>
+  <header>
+    <div class="eyebrow">maths · projective geometry</div>
+    <h1>Two poles <i>of one sphere</i></h1>
+  </header>
+  <p class="lede">The Śrī Yantra turned inside out by circle inversion, then wrapped onto a ball by stereographic projection. On the sphere the inversion is just a flip, and the bindu and infinity are the two poles.</p>
+  <video id="v" controls playsinline preload="metadata" src="https://teahub.xyz/maths/videos/raw/branch/main/yantra-two-poles.mp4"></video>
+  <div class="cards">
+    <a class="card" href="sphere/">
+      <h2>On the sphere</h2>
+      <p>Spin the yantra and its inversion on the Riemann sphere. Slide the lift, compare stereographic with great circles, and switch the sphere off to watch only the plane.</p>
+      <span class="go">open explorer →</span>
+    </a>
+    <a class="card" href="inversion/">
+      <h2>On the plane</h2>
+      <p>The yantra inverted in its own outer circle, z ↦ z / |z|². Pan and zoom out to follow the arcs toward infinity.</p>
+      <span class="go">open explorer →</span>
+    </a>
+  </div>
+  <section class="notes">
+    <p><span class="dot" style="background:var(--up)"></span>four upward triangles · <span class="dot" style="background:var(--down)"></span>five downward · <span class="dot" style="background:var(--bindu)"></span>the bindu</p>
+    <p>Triangle coordinates follow a numerical solution of the yantra's concurrency conditions (after Kulaichev and Huet), drawn as 27 lines with 29 triple points.</p>
+  </section>
+</main>
+</body>
+</html>