site/index.html

<!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/commit/ec0bb56210abe087f4731777ffba8d1fa6bab3df/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>