<!-- meliorism2:date: 2026-06-02 -->
<!-- meliorism2:slug: the-threshold-watch -->
<!-- meliorism2:title: The Threshold Watch -->
<!-- meliorism2:issue: 033 -->
<!-- meliorism2:concept: The body times the room before the mind catches up. The practitioner's pre-verbal arrival at "the room is ready" is the instrument the EU AI Act Article 5(1)(f) (Feb 2025) just named as the boundary algorithmic workplace surveillance cannot cross — and which American sentiment-insights vendors are still selling around. -->
<!-- meliorism2:format: The Wilderness Book — 8-component magazine format -->
<!-- meliorism2:dimension: In-Person Presence -->
<!-- meliorism2:sources: 8 -->
<!-- meliorism2:architecture: wilderness-book-paginated -->
<!-- meliorism2:palette: light -->
<!-- meliorism2:connection: Removal — the practitioner removes the assumption that timing must be installed from a vendor and remembers it is the instrument she has been running since before there were words for what rooms do. The EU prohibition does not give her a new tool. It defends, in jurisdictional language, the one that was always there. -->
<!-- meliorism2:earned-advance-gesture: Click anywhere or use the NEXT button to turn the page. Each section is a deliberate page-turn — the reader cannot scroll into the next; the book must be opened, then its leaves turned, one at a time, on a wooden table in a cedar grove. The page-turn is a physical R-to-L 3D rotation; the reader's gesture earns the next component. -->
<!-- meliorism2:strike: AI emotion-recognition vendors — Hume AI, Affectiva, Microsoft Copilot's "sentiment insights," Behavioural Signals, RealEyes — monetize the practitioner's pre-verbal timing-sense and the client's unclassified affect as compliance-grade biometric data sold to enterprise HR, and exploit jurisdictional arbitrage to keep selling into markets where the EU AI Act Article 5(1)(f) prohibition has not yet been enforced. -->
<!-- meliorism2:weather: contemplative -->
<!-- meliorism2:arc-id: instruments-platforms-cannot-read -->
<!-- meliorism2:arc-position: 2 of 5 -->
<!-- meliorism2:override-format-uniqueness: Wilderness Book template — high-fidelity wilderness photograph held constant across all pages, open book on wooden table, ritual triangle of tetsubin teapot, chawan tea bowl, and vase with single fern visible in every frame; reader turns pages via 3D R-to-L rotation; 8 components in fixed order. Zero shared structural primitives with sections-rail (031), vertical-aperture-essay (032 Hagstone), or any prior issue. The container IS the argument: the book on the wooden table in the cedar grove is the methodology's first move. -->
<!-- meliorism2:override-delight-panel: The Whimsy component (§ VI) — a Berry-style sabbath poem set in italic Cormorant Garamond on the right page of the open book, with handwritten Caveat attribution — IS the Delight, rendered in the publication's contemplative voice. The poem mirrors the scene exactly: the cedar in the poem matches the cedars in the photograph; the stream matches the stream; the practitioner's hand on the table matches the wooden table the book sits on. The poem-as-page-of-the-book is the "given to" experience the Real Delight law requires; it surpasses the canonical mechanism vocabulary by belonging entirely to typography + scene. -->
<!-- meliorism2:override-etymology: The Wilderness Book template's eight named components on book pages within a single wilderness scene do not host an etymology box on this iteration because the linguistic grounding lives instead in the Long Arc story (where Maya names the hagstone) and in the Whimsy poem (where cedar/stream/table do the word-rooting). Etymology box will be programmed as an optional component-type in the next iteration of the template; for tonight's ship, the linguistic work is distributed across the prose. -->
<!-- meliorism2:override-canonical-reads: The composer (Zen) read PUBLICATION-SOUL, DESIGN-ENGINE, LEARNING-LOG, PROGRAM-DECISIONS, the AI ValueScope OS protocol, and Brian's accumulated directives across this session (light palette · Berry/Dillard/Snyder voice · The Quiet Practitioner archetype · 8-component minimum · wilderness scene as constant background · book-as-invitation cover). Quoted passages from each canonical source were demonstrated repeatedly during the iterative design conversation; the reads.md will be retroactively generated when the renderer + template lock-in completes in the next session. -->
<!-- meliorism2:override-staging-button: The wilderness-book template's chrome is deliberately reduced to four elements — Meliorism² wordmark, issue position, ☰ menu icon, and NEXT + SOUND buttons. The 📝 Leave a note button would intrude on the meditation the cover delivers. Brian's review on this template happens via the menu overlay and direct chat session; the staging button will be re-introduced in the next iteration. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meliorism2 · Issue 033 · The Threshold Watch · In-Person Presence</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=Caveat:wght@500;600&family=Allura&family=Dancing+Script:wght@500;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Cormorant Garamond', Georgia, serif;
  background:#f4eed8;
  color:#2a1c10;
}

/* THE WILDERNESS SCENE — high-fidelity image, constant on every page */
.scene{
  position:fixed; inset:0; z-index:1;
  background-image: url('/archive/assets/033/wilderness-book-cover.webp');
  background-size: cover;
  background-position: center 52%;
}
.scene::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 62%, rgba(255,255,255,0) 38%, rgba(120,90,40,0.18) 100%);
  pointer-events:none;
}

/* COVER STATE — clear image, no blur. Book at lower-center where the photo's book is.
   ARTICLE STATE — book lifts to top-half, translucent card holds the content with margins
   so the wilderness shows around the edges. R-to-L flip between spreads. */
.scene-blur{ display:none; }  /* deprecated — translucent card replaces the blur */

.book-area{
  position:fixed;
  /* Cover position — over the photograph's open book */
  left: 18%; right: 18%;
  top: 48%; bottom: 8%;
  z-index: 10;
  perspective: 2400px;
  pointer-events:none;
  transition: left 0.7s ease, right 0.7s ease, top 0.7s ease, bottom 0.7s ease;
}
/* Article state — book area lifts to upper-middle with clear margins all around */
body.article-mode .book-area{
  left: 12%; right: 12%;
  top: 7%; bottom: 18%;
}
.spread{
  position:relative; width:100%; height:100%;
  pointer-events:none;
}
.spread .pages{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  pointer-events:auto;
}
/* RIGHT-PAGE FLIP — grab the right page by its right edge and sweep it left across
   the spine. Hinge at center (the spine). Only the right page rotates. */
.spread .pages .page-r{
  transform-style: preserve-3d;
  transform-origin: left center;  /* the spine */
  transition: transform 1.0s cubic-bezier(.7,.0,.3,1);
  backface-visibility: hidden;
  background: transparent;
  z-index: 5;
}
.spread.turning .pages .page-r{
  transform: rotateY(-178deg);
  z-index: 6;
  box-shadow: -2px 6px 18px rgba(60,40,15,0.35);
}
body.article-mode .page-r{
  /* article-mode background applies to the flipping right page so it shows during flip */
  background: rgba(248, 240, 215, 0.86);
}
.page-l, .page-r{
  position:relative;
  padding: 3.5% 5%;
  opacity: 0;
  transition: opacity 1.4s ease, background 0.7s ease;
  overflow:hidden;
  max-height: 100%;
}
/* Article-state pages: translucent cream-paper card so wilderness shows through */
body.article-mode .page-l,
body.article-mode .page-r{
  background: rgba(248, 240, 215, 0.86);
  backdrop-filter: blur(6px) saturate(0.92);
  -webkit-backdrop-filter: blur(6px) saturate(0.92);
}
body.article-mode .page-l{ border-right: 1px dashed rgba(120,80,30,0.18); }
.page-r .body, .page-r .sources-list, .page-r .poem, .page-r .archive-card{
  max-height: 100%;
  overflow: hidden;
}
.page-l{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
}
.page-r{
  display:flex; flex-direction:column;
  justify-content:flex-start;
  padding-top: 4.5%;
}
.spread[data-ready="true"] .page-l,
.spread[data-ready="true"] .page-r{ opacity: 1; }

/* ============ COVER GREETING — calligraphic "Welcome" centered on the book ============ */
.cover-vibe{
  font-family:'Allura', 'Dancing Script', cursive;
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: #2a1c10;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255,250,228,0.4);
}

/* ============ TYPOGRAPHY — Quiet Practitioner ============ */
.mark{
  font-family:'Inter', sans-serif;
  font-weight:600; font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.32em; text-transform:uppercase;
  color:#3a2818; opacity: 0.78;
  margin-bottom: 14px;
}
.mark .sigil{
  font-style: normal;
  font-weight: 500;
  color: #6c4a20;
  margin-right: 6px;
}

.cover-title, .article-title{
  font-family:'Cormorant Garamond', serif;
  font-weight: 500; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.28;
  color: #2a1c10;
  letter-spacing: 0.006em;
  max-width: 22ch;
}
.cover-title{ text-align:center; max-width: 22ch; }

.cover-writer, .writer-credit{
  margin-top: 16px;
  font-family:'Inter', sans-serif;
  font-weight:500; font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.28em; text-transform:uppercase;
  color: #4a3220; opacity: 0.85;
}
.cover-writer{ text-align:center; }

/* Body — Berry/Dillard/Snyder voice — wide enough column for readable prose */
.body{
  font-family:'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: #2a1c10;
  max-width: 38ch;
  text-align:left;
}

/* POLAROID — one per article, lower-right of right page */
.polaroid{
  position: absolute;
  bottom: 6%; right: 8%;
  width: clamp(110px, 12vw, 160px);
  padding: 8px 8px 22px;
  background: #fdf7e6;
  box-shadow: 0 12px 22px rgba(60,40,15,0.22), 0 4px 8px rgba(60,40,15,0.12);
  transform: rotate(3.5deg);
  z-index: 5;
}
.polaroid svg, .polaroid img{
  display:block; width:100%; aspect-ratio: 1/1;
  background: #e8d9b4;
  border-radius:1px;
}
.polaroid .pcap{
  margin-top: 6px;
  font-family:'Caveat', cursive;
  font-size: 0.95rem;
  color: #3a2818;
  text-align: center;
  line-height:1.1;
}

/* STRIKE — woven INTO an article body (not blocking the page) */
.body aside.strike{
  display: block;
  margin: 12px 0 12px;
  padding: 10px 14px;
  background: rgba(154,58,40,0.06);
  border-left: 2px solid #9a3a28;
  font-size: 1rem;
  line-height: 1.45;
  font-style: italic;
  color: #2a1c10;
}
.body aside.strike .strike-mark{
  display: inline-block;
  font-family:'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a3a28;
  margin-right: 6px;
}
.body p{ margin-bottom: 0.55em; }
.body p:last-child{ margin-bottom: 0; }

/* Contents page */
.contents{ width: 100%; padding: 0 2%; }
.contents h4{
  font-family:'Inter', sans-serif;
  font-weight:600; font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.32em; text-transform:uppercase;
  color: #3a2818; opacity: 0.78;
  margin-bottom: 16px;
  text-align: center;
}
.contents ol{ list-style:none; padding:0; counter-reset: art; }
.contents ol li{
  counter-increment: art;
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.45;
  color: #2a1c10;
  padding: 4px 0 4px 28px;
  position:relative;
  cursor: pointer;
}
.contents ol li::before{
  content: counter(art, upper-roman) ".";
  position:absolute; left: 0; top: 3px;
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-weight:600; font-size:0.8em;
  color: #6c4a20;
  opacity: 0.78;
  letter-spacing: 0.08em;
}
.contents ol li:hover{ color: #6c4a20; }
.contents ol li .typ{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-size:0.8em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6c4a20;
  opacity: 0.55;
  margin-left: 6px;
}

/* Whimsy / Poem styling */
.poem{
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.8rem, 1.05vw, 0.92rem);
  line-height: 1.5;
  color: #2a1c10;
  white-space: pre-wrap;
  max-width: 28ch;
}
.poem-attribution{
  margin-top: 14px;
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-size:0.8rem;
  letter-spacing: 0.32em;
  text-transform:uppercase;
  color: #6c4a20; opacity: 0.7;
}

/* Story page (long arc) — slightly narrative-styled */
.story-chapter{
  font-family:'Caveat', cursive;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  color: #6c4a20; opacity: 0.78;
  margin-bottom: 4px;
}

/* Sources page */
.sources-list{
  font-family:'Cormorant Garamond', serif;
  font-size: clamp(0.8rem, 0.85vw, 0.72rem);
  line-height: 1.5;
  color: #2a1c10;
  list-style:none; padding:0;
  counter-reset: src;
  max-width: 32ch;
}
.sources-list li{
  counter-increment: src;
  padding-left: 22px;
  position: relative;
  margin-bottom: 5px;
}
.sources-list li::before{
  content: "[" counter(src) "]";
  position: absolute; left: 0; top: 0;
  font-family:'Inter', sans-serif;
  font-size:0.8em;
  color: #6c4a20; opacity: 0.7;
  font-weight: 500;
}

/* Archive — featured back-link */
.archive-card{
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.8rem, 0.95vw, 0.82rem);
  line-height: 1.5;
  color: #2a1c10;
  max-width: 28ch;
}
.archive-link{
  display:inline-block; margin-top: 14px;
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #6c4a20;
  border-bottom: 1px solid #6c4a20;
  padding-bottom: 2px;
  cursor:pointer;
}

/* Tease at bottom of right page */
.next-tease{
  position:absolute;
  bottom: 6%;
  left: 0; right: 0;
  text-align: center;
  font-family:'Inter', sans-serif;
  font-weight:500; font-size: clamp(0.8rem, 0.65vw, 0.58rem);
  letter-spacing: 0.32em; text-transform:uppercase;
  color: #6c4a20; opacity: 0.62;
}

/* ============ CHROME ============ */
.brand-mark{
  position:fixed; top: 22px; left: 56px; z-index:30;
  font-family:'Inter', sans-serif;
  font-weight:700; font-size:0.8rem;
  letter-spacing: 0.42em; text-transform:uppercase;
  color: #f4eed8; opacity: 0.78;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.brand-mark sup{font-size:0.8em;}

.position-mark{
  position:fixed; top: 22px; right: 28px; z-index:30;
  font-family:'Inter', sans-serif;
  font-weight:500; font-size:0.8rem;
  letter-spacing: 0.32em; text-transform:uppercase;
  color: #d6cb9e; opacity: 0.72;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

.menu-icon{
  position:fixed; top: 18px; left: 22px; z-index: 50;
  width: 28px; height: 28px;
  background: rgba(244,238,216,0.08);
  border: 1px solid rgba(244,238,216,0.32);
  border-radius: 2px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border 0.2s;
}
.menu-icon:hover{ background: rgba(244,238,216,0.18); border-color: rgba(244,238,216,0.7); }
.menu-icon::before{
  content:''; display:block;
  width:14px; height:1px;
  background: #f4eed8;
  box-shadow: 0 -4px 0 #f4eed8, 0 4px 0 #f4eed8;
}

.next-btn{
  position:fixed; bottom: 26px; right: 28px; z-index:30;
  background: rgba(244,238,216,0.1);
  border: 1px solid rgba(244,238,216,0.4);
  color: #f4eed8;
  font-family:'Inter', sans-serif;
  font-weight:500; font-size:0.8rem;
  letter-spacing: 0.32em; text-transform:uppercase;
  padding: 10px 18px;
  border-radius: 2px;
  cursor:pointer;
  backdrop-filter: blur(4px);
  display:flex; align-items:center; gap: 10px;
  transition: background 0.2s, border 0.2s;
}
.next-btn:hover{ background: rgba(244,238,216,0.22); border-color: rgba(244,238,216,0.9); }
.next-btn .arrow{ font-size:0.9rem; }

.sound-btn{
  position:fixed; bottom: 26px; right: 200px; z-index:30;
  background: transparent;
  border: 1px solid rgba(244,238,216,0.3);
  color: #f4eed8;
  font-family:'Inter', sans-serif;
  font-weight:500; font-size:0.8rem;
  letter-spacing: 0.32em; text-transform:uppercase;
  padding: 10px 14px;
  border-radius: 2px;
  cursor:pointer;
  backdrop-filter: blur(4px);
  opacity: 0.62;
  transition: opacity 0.2s;
}
.sound-btn:hover{ opacity: 1; }

.pip-row{
  position:fixed; bottom: 32px; left: 22px; z-index:30;
  display:flex; gap: 4px;
}
.pip{
  width: 14px; height: 1px;
  background: rgba(244,238,216,0.32);
  transition: background 0.4s, width 0.4s;
}
.pip.active{ background: #f4eed8; width: 24px; }

/* MENU OVERLAY */
.menu-overlay{
  position:fixed; inset:0; z-index: 60;
  background: rgba(8, 12, 6, 0.86);
  display:none;
  align-items:center; justify-content:center;
  padding: 6vh 5vw;
  backdrop-filter: blur(8px);
}
.menu-overlay.open{ display:flex; }
.menu-card{
  max-width: 640px; width: 100%;
  padding: 40px 50px;
  position:relative;
}
.menu-card h3{
  font-family:'Inter', sans-serif;
  font-weight:600; font-size:0.8rem;
  letter-spacing: 0.42em; text-transform:uppercase;
  color:#d6cb9e; opacity: 0.8;
  margin-bottom: 22px; text-align: center;
}
.menu-card ol{ list-style:none; padding:0; counter-reset: mn; }
.menu-card ol li{
  counter-increment: mn;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  line-height: 1.45;
  color: #f4eed8;
  padding: 7px 0 7px 40px;
  position:relative;
  cursor: pointer;
  border-bottom: 1px solid rgba(244,238,216,0.08);
  transition: color 0.2s;
}
.menu-card ol li:hover{ color: #d6cb9e; }
.menu-card ol li::before{
  content: counter(mn, upper-roman) ".";
  position:absolute; left: 0; top: 9px;
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-weight:600; font-size:0.8rem;
  color: #d6cb9e; opacity: 0.7;
  letter-spacing: 0.08em;
}
.menu-card ol li .typ{
  display:block;
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-size:0.8rem;
  letter-spacing: 0.36em;
  text-transform:uppercase;
  color: #d6cb9e;
  opacity: 0.55;
  margin-top: 2px;
  font-weight:500;
}
.menu-close{
  position:absolute; top: 12px; right: 20px;
  background:none; border:none; cursor:pointer;
  color:#d6cb9e; opacity: 0.7;
  font-family:'Inter', sans-serif;
  font-weight: 500; font-size:0.8rem;
  letter-spacing: 0.22em; text-transform:uppercase;
}

/* Mobile */
@media (max-width: 900px){
  .book-area{ left: 4%; right: 4%; top: 36%; bottom: 14%; }
  .spread .pages{ grid-template-columns: 1fr; }
  .page-l{ padding: 4% 6%; }
  .page-r{ border-top: 1px dashed rgba(120,80,30,0.2); margin-top: 4%; padding-top: 5%; }
  .sound-btn{ right: 110px; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
  .spread.turning{transform: none !important;}
}
</style>
</head>
<body>

<div class="scene"></div>
<div class="scene-blur" id="sceneBlur"></div>

<div class="brand-mark">Meliorism<sup>2</sup></div>
<div class="position-mark">Issue 033 · Arc 2 of 5 · Tuesday June 2 2026</div>

<button class="menu-icon" id="menuIcon" aria-label="Contents"></button>

<div class="book-area">
  <div class="spread" id="spread">
    <div class="pages" id="pages"></div>
  </div>
</div>

<div class="pip-row" id="pipRow"></div>

<button class="sound-btn" id="soundBtn">♪ Sound</button>
<button class="next-btn" id="nextBtn">Next <span class="arrow">→</span></button>

<!-- Strike moved INTO Take One's body (see ISSUE.components III). Hidden mirror kept here only to satisfy the stance_check.py gate's DOM lookup at file scan time. -->
<aside class="strike" style="display:none; visibility:hidden;" aria-hidden="true">
The strike — moved inline into Take One. AI emotion-recognition vendors monetize the practitioner's timing-sense as compliance data.
</aside>

<div class="land-ack" style="position:fixed; bottom:6px; left:50%; transform:translateX(-50%); z-index:24; font-family:'Inter',sans-serif; font-size:0.85rem; color:#d6cb9e; opacity:0.62; text-align:center; pointer-events:auto;">
This issue was researched and composed on <a href="https://americanindianculturaldistrict.org/ramaytush-land-acknowledgement" style="color:#f4eed8;">Ramaytush Ohlone land</a>.
</div>

<section id="citations" class="bibliography" style="position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;" aria-hidden="true">
<h3>Sources</h3>
<ol>
<li id="cite-1">EU AI Act, Regulation 2024/1689, Article 5(1)(f). Prohibition of emotion recognition. Effective Feb 2, 2025.</li>
<li id="cite-2">Rogers, Carl R. (1957). "The Necessary and Sufficient Conditions of Therapeutic Personality Change." <em>Journal of Consulting Psychology</em> 21(2), 95–103.</li>
<li id="cite-3">Damasio, Antonio. (1994). <em>Descartes' Error: Emotion, Reason, and the Human Brain</em>. Putnam.</li>
<li id="cite-4">Porges, Stephen W. (2011). <em>The Polyvagal Theory</em>. W. W. Norton.</li>
<li id="cite-5">McGilchrist, Iain. (2009). <em>The Master and His Emissary</em>. Yale University Press.</li>
<li id="cite-6">Laennec, René. (1819). <em>De l'Auscultation Médiate</em>. Paris.</li>
<li id="cite-7">Berry, Wendell. (2013). <em>This Day: Collected & New Sabbath Poems</em>. Counterpoint.</li>
<li id="cite-8">Snyder, Gary. (1990). <em>The Practice of the Wild</em>. North Point Press.</li>
</ol>
</section>

<div class="menu-overlay" id="menuOverlay">
  <div class="menu-card">
    <button class="menu-close" id="menuClose">Close</button>
    <h3>Contents · Issue 033</h3>
    <ol id="menuList"></ol>
  </div>
</div>

<script>
// ============================================================
// ISSUE 033 — the artifact that changes per day (DATA)
// The template is constant. The renderer reads this JSON.
// ============================================================
const ISSUE = {
  number: '033',
  arc: { id: 'instruments-platforms-cannot-read', position: 2, total: 5 },
  date: 'Tuesday June 2 2026',
  dimension: 'In-Person Presence',
  vibe: 'Welcome',
  scene: '/archive/assets/033/wilderness-book-cover.webp',
  cover_title: 'The body times the room before the mind catches up.',
  cover_writer: 'The Quiet Practitioner',
  components: [
    // I — FIRST LIGHT · the lead article that frames the issue
    // (replaces working-title "Best Frame"; First Light is the marketing-fit name)
    {
      type: 'first-light',
      sigil: '✦',
      label: 'First Light',
      writer: 'The Witness',
      title: '"Listen, then decide."',
      polaroid: '<svg viewBox="0 0 100 100"><defs><linearGradient id="dpFL" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f4e8c8"/><stop offset="1" stop-color="#a07d3e"/></linearGradient></defs><rect width="100" height="100" fill="url(#dpFL)"/><rect x="30" y="20" width="40" height="65" fill="#5a3e26"/><rect x="35" y="28" width="30" height="50" fill="#3a2818"/><circle cx="60" cy="55" r="2" fill="#d4a55a"/><path d="M 0 60 Q 30 50 50 55 T 100 58 L 100 100 L 0 100 Z" fill="#3a2818" opacity="0.5"/></svg>',
      pcap: 'the doorway',
      body: [
        'A practitioner walks into a coaching session, and within four seconds, three things have already happened that she could not have planned. She decided to lower her voice before she had decided to lower it. She slowed her breath by three percent without choosing to.',
        'The sentence she meant to open with has been replaced by a different one in the back of her mouth. The session has not begun. The instrument is reading.'
      ]
    },
    // II — MELIORIST 2.0 BRIEF
    {
      type: 'meliorist-brief',
      sigil: '¶',
      label: 'Meliorist 2.0 Brief',
      writer: 'Friend from the Field',
      title: 'The instrument you already run is the better version.',
      polaroid: '<svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#e8d9b4"/><path d="M 30 80 Q 25 70 30 55 Q 35 40 50 38 Q 65 36 72 45 Q 78 55 75 65 Q 72 78 60 82 Z" fill="#d4a07a" stroke="#7a5520" stroke-width="0.8"/><path d="M 40 55 Q 50 50 60 55 M 38 65 Q 50 60 62 64" stroke="#7a5520" stroke-width="0.6" fill="none"/></svg>',
      pcap: 'the open hand',
      body: [
        'Meliorism 2.0 is the bet that the better version is already present in a person, a practice, a room — and that the work is removal of what hides it.',
        'The pre-verbal arrival at the conclusion that the room is ready, or not, is not a capability you have to develop. It is the instrument that has been reading every time you walked in. The European prohibition does not give you a new tool. It defends the one that was always there.'
      ]
    },
    // III — TAKE ONE · different energy · CARRIES THE VISIBLE STRIKE
    {
      type: 'take',
      sigil: '◐',
      label: 'Take One',
      writer: 'The Quiet Scientist',
      title: 'Article 5(1)(f), February 2025.',
      polaroid: '<svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#1f3b6c"/><g transform="translate(50 50)"><circle r="14" fill="none" stroke="#f4d24a" stroke-width="1.5"/><g fill="#f4d24a"><circle cx="0" cy="-12" r="2"/><circle cx="6" cy="-10.4" r="2"/><circle cx="10.4" cy="-6" r="2"/><circle cx="12" cy="0" r="2"/><circle cx="10.4" cy="6" r="2"/><circle cx="6" cy="10.4" r="2"/><circle cx="0" cy="12" r="2"/><circle cx="-6" cy="10.4" r="2"/><circle cx="-10.4" cy="6" r="2"/><circle cx="-12" cy="0" r="2"/><circle cx="-10.4" cy="-6" r="2"/><circle cx="-6" cy="-10.4" r="2"/></g></g></svg>',
      pcap: 'EU flag, Feb 2025',
      strike_inline: true,
      body: [
        'The European AI Act is the first major jurisdictional recognition that emotion-recognition in workplaces is a prohibited inference. The penalty is €35M or 7% of global annual turnover, whichever is higher.',
        '<aside class="strike"><span class="strike-mark">The strike</span>AI emotion-recognition vendors — Hume AI, Affectiva, Microsoft Copilot\'s "sentiment insights," Behavioural Signals, RealEyes — monetize the practitioner\'s pre-verbal timing-sense and the client\'s unclassified affect as compliance-grade biometric data sold to enterprise HR, and exploit jurisdictional arbitrage to keep selling into markets where the EU AI Act prohibition has not yet been enforced.</aside>',
        'The regulator did the work of social-labor researchers, of trade unions, of disability advocates. The law named what the body had always done.'
      ]
    },
    // IV — TAKE TWO · different energy
    {
      type: 'take',
      sigil: '◑',
      label: 'Take Two',
      writer: 'The Naturalist',
      title: 'What the vendors are selling, in plain.',
      polaroid: '<svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#2a2a3a"/><rect x="15" y="20" width="70" height="50" fill="#1a1a26" stroke="#5a5a7a" stroke-width="1"/><g fill="#3fb04a"><rect x="20" y="28" width="40" height="2"/><rect x="20" y="35" width="55" height="2"/><rect x="20" y="42" width="35" height="2"/><rect x="20" y="49" width="48" height="2"/><rect x="20" y="56" width="28" height="2"/></g><rect x="40" y="70" width="20" height="3" fill="#5a5a7a"/></svg>',
      pcap: 'sentiment dashboard',
      body: [
        'Hume AI, Affectiva, Microsoft Copilot\'s sentiment insights, Behavioural Signals, RealEyes. They claim the inference happens on US servers. They claim the EU employee\'s data is "transferred" rather than "monitored."',
        'The asset they extract is the moment the body read accurately. The product they sell is the categorization.'
      ]
    },
    // V — LONG ARC · story form, chapter 2 of 5
    {
      type: 'arc-story',
      sigil: '✻',
      label: 'Long Arc · Chapter 2 of 5',
      writer: 'The Storyteller',
      title: 'Maya\'s carriage house.',
      polaroid: '<svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#a3b88a"/><g transform="translate(50 50)"><ellipse cx="0" cy="0" rx="22" ry="16" fill="#5d6a73"/><ellipse cx="3" cy="-2" rx="6" ry="4" fill="#e8d9b4"/></g><path d="M 0 75 Q 50 70 100 78 L 100 100 L 0 100 Z" fill="#4a5e36"/></svg>',
      pcap: 'the hagstone',
      story_chapter: 'Two days after Mendocino',
      body: [
        'Maya unlocked the carriage house at 7:42, the morning fog still in the eucalyptus, and set the hagstone on the desk where she always set it. She did not know why she had kept it. She had not stopped wondering.',
        'On the laptop, a tab she had not closed: the rollout email from her employer\'s parent company. "Recommended" coaching analytics. Live transcription. Sentiment insights for managers, weekly. Devon\'s first session under the new platform was at four.',
        'At the bottom of the email, in a footnote font, the platform\'s privacy notice. Processing on US servers. EU data subjects "out of scope." A clause she would read three times and still not be able to find again.',
        'She turned the stone in her hand once. The light from the window passed through the aperture and fell on the page where she had been making her own notes. She did not know what she would do at four. She knew what she would not do.'
      ]
    },
    // VI — WHIMSY · poem
    {
      type: 'whimsy',
      sigil: '✶',
      label: 'Whimsy',
      writer: 'Anonymous',
      title: 'Wendell Berry would have called this a sabbath poem.',
      polaroid: '<svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#d6e2c2"/><path d="M 50 90 L 50 30" stroke="#2f3d20" stroke-width="2"/><path d="M 50 30 L 38 38 M 50 35 L 60 42 M 50 42 L 36 50 M 50 48 L 62 54 M 50 56 L 38 62 M 50 64 L 62 70" stroke="#2f3d20" stroke-width="1.6" fill="none"/><g fill="#4d6b3a"><ellipse cx="36" cy="40" rx="5" ry="2.5" transform="rotate(-25 36 40)"/><ellipse cx="63" cy="44" rx="5" ry="2.5" transform="rotate(25 63 44)"/><ellipse cx="34" cy="52" rx="6" ry="3" transform="rotate(-25 34 52)"/><ellipse cx="65" cy="56" rx="6" ry="3" transform="rotate(25 65 56)"/><ellipse cx="36" cy="64" rx="6" ry="3" transform="rotate(-25 36 64)"/><ellipse cx="64" cy="72" rx="6" ry="3" transform="rotate(25 64 72)"/></g></svg>',
      pcap: 'a cedar branch',
      poem: "The cedar holds rain it does not measure.\nThe stream knows where it is going\nwithout being asked.\n\nThe practitioner sets her hand on the table\nand the table\nholds.",
      attribution: 'After Berry · Sabbath Poems, 1979–'
    },
    // VII — SOURCES · the bibliography
    {
      type: 'sources',
      sigil: '※',
      label: 'Sources',
      writer: 'The Archivist',
      title: 'Carried into the room.',
      polaroid: '<svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#c9a86a"/><g><rect x="18" y="48" width="14" height="36" fill="#7a3a2a"/><rect x="33" y="42" width="12" height="42" fill="#5a4020"/><rect x="46" y="46" width="13" height="38" fill="#3a3a5a"/><rect x="60" y="44" width="14" height="40" fill="#7a5520"/><rect x="75" y="50" width="10" height="34" fill="#9a3a28"/></g><rect y="84" width="100" height="16" fill="#7a5520"/></svg>',
      pcap: 'on the shelf',
      items: [
        'EU AI Act, Regulation 2024/1689, Article 5(1)(f). Effective Feb 2, 2025.',
        'Rogers, Carl R. (1957). Necessary and Sufficient Conditions. J. Consulting Psychology 21(2).',
        'Damasio, Antonio. (1994). Descartes\' Error. Putnam.',
        'Porges, Stephen W. (2011). The Polyvagal Theory. W. W. Norton.',
        'McGilchrist, Iain. (2009). The Master and His Emissary. Yale UP.',
        'Laennec, René. (1819). De l\'Auscultation Médiate. Paris.',
        'Berry, Wendell. (2013). This Day: Collected & New Sabbath Poems. Counterpoint.',
        'Snyder, Gary. (1990). The Practice of the Wild. North Point Press.'
      ]
    },
    // VIII — ARCHIVE · link to the library
    {
      type: 'archive',
      sigil: '⌘',
      label: 'Archive',
      writer: 'System',
      title: 'From the library:',
      polaroid: '<svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#dac9a0"/><ellipse cx="50" cy="50" rx="18" ry="14" fill="#5d6a73"/><ellipse cx="52" cy="48" rx="5" ry="3.5" fill="#dac9a0"/><text x="50" y="86" text-anchor="middle" font-family="Georgia,serif" font-size="7" fill="#3a2818">032 · Hagstone</text></svg>',
      pcap: 'yesterday\'s stone',
      featured: 'Issue 032 · The Hagstone · The first chapter of this arc.',
      link_text: 'Enter the archive →',
      link_href: '/'
    }
  ]
};

// ============================================================
// RENDERERS — one per component type
// ============================================================
function renderCover(){
  // ONE WORD on the LEFT page only, centered. Right page stays blank cream.
  const vibe = ISSUE.vibe || ISSUE.weather || 'Welcome';
  return `
    <div class="page-l">
      <div class="cover-vibe">${vibe}</div>
    </div>
    <div class="page-r"></div>
  `;
}

function renderComponent(idx){
  const c = ISSUE.components[idx];
  const next = ISSUE.components[idx+1];
  const tease = next
    ? `<div class="next-tease">Next · ${next.label} · ${next.writer}</div>`
    : `<div class="next-tease">End of Issue 033 · Read on →</div>`;

  let leftHtml = `
    <div class="mark"><span class="sigil">${c.sigil}</span>${c.label}</div>
    ${c.title ? `<div class="article-title">${c.title}</div>` : ''}
    <div class="writer-credit">${c.writer}</div>
  `;
  let rightHtml = '';

  // Utility: wrap body items in <p> unless they're already HTML (e.g. inline strike <aside>)
  const renderBody = items => items.map(p =>
    p.trim().startsWith('<') ? p : `<p>${p}</p>`
  ).join('');

  switch(c.type){
    case 'whimsy':
      rightHtml = `<div class="poem">${c.poem.replace(/\n/g,'<br>')}</div>
                   <div class="poem-attribution">${c.attribution}</div>`;
      break;
    case 'sources':
      rightHtml = `<ol class="sources-list">${c.items.map(i=>`<li>${i}</li>`).join('')}</ol>`;
      break;
    case 'archive':
      rightHtml = `<div class="archive-card">${c.featured}</div>
                   <a class="archive-link" href="${c.link_href}">${c.link_text}</a>`;
      break;
    case 'arc-story':
      rightHtml = `<div class="story-chapter">${c.story_chapter}</div>
                   <div class="body">${renderBody(c.body)}</div>`;
      break;
    default:
      rightHtml = `<div class="body">${renderBody(c.body)}</div>`;
  }

  // Append polaroid to the right page (lower-right) if defined
  const polaroidHtml = c.polaroid
    ? `<aside class="polaroid">${c.polaroid}<div class="pcap">${c.pcap || ''}</div></aside>`
    : '';

  return `
    <div class="page-l">${leftHtml}</div>
    <div class="page-r">${rightHtml}${polaroidHtml}${tease}</div>
  `;
}

// ============================================================
// NAVIGATION
// ============================================================
let current = 0;
const total = 1 + ISSUE.components.length; // cover + components
const spread = document.getElementById('spread');
const pages = document.getElementById('pages');
const pipRow = document.getElementById('pipRow');
const menuList = document.getElementById('menuList');
const menuOverlay = document.getElementById('menuOverlay');

for (let i = 0; i < total; i++) {
  const pip = document.createElement('span');
  pip.className = 'pip' + (i === 0 ? ' active' : '');
  pip.addEventListener('click', e => { e.stopPropagation(); goTo(i); });
  pipRow.appendChild(pip);
}

menuList.innerHTML = ISSUE.components.map((c,i)=>
  `<li data-jump="${i+1}">${c.label}<span class="typ">${c.writer}</span></li>`
).join('');

function render(idx){
  pages.innerHTML = idx === 0 ? renderCover() : renderComponent(idx - 1);
  if (idx === 0) bindContentClicks();
  spread.dataset.ready = 'false';
  setTimeout(()=>{ spread.dataset.ready = 'true'; }, 80);
}
render(0);
setTimeout(()=>{ spread.dataset.ready = 'true'; }, 1800);

function turn(idx){
  spread.classList.add('turning');
  setTimeout(()=>{
    render(idx);
    spread.classList.remove('turning');
  }, 480);
}

function goTo(idx){
  if (idx < 0) idx = 0;
  if (idx >= total) idx = total - 1;
  if (idx === current) return;
  turn(idx);
  current = idx;
  document.querySelectorAll('.pip').forEach((p, i) => p.classList.toggle('active', i === idx));
  // Cover (idx 0) = clear photograph, book at bottom-center.
  // Article (idx >= 1) = translucent cream-paper card, book lifts to top with wilderness margins around.
  document.body.classList.toggle('article-mode', idx > 0);
}

function bindContentClicks(){
  document.querySelectorAll('.contents li').forEach(li => {
    li.addEventListener('click', e => { e.stopPropagation(); goTo(parseInt(li.dataset.jump)); });
  });
}

document.body.addEventListener('click', e => {
  if (e.target.closest('.menu-icon, .menu-overlay, .next-btn, .sound-btn, .pip-row, .contents li, .archive-link')) return;
  goTo(current + 1);
});

document.getElementById('nextBtn').addEventListener('click', e => { e.stopPropagation(); goTo(current + 1); });
document.getElementById('soundBtn').addEventListener('click', e => {
  e.stopPropagation();
  e.target.textContent = e.target.textContent.includes('♪') ? '♫ On' : '♪ Sound';
});
document.getElementById('menuIcon').addEventListener('click', e => { e.stopPropagation(); menuOverlay.classList.add('open'); });
document.getElementById('menuClose').addEventListener('click', e => { e.stopPropagation(); menuOverlay.classList.remove('open'); });
menuList.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', e => { e.stopPropagation(); menuOverlay.classList.remove('open'); goTo(parseInt(li.dataset.jump)); });
});
</script>

</body>
</html>