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>
1031 lines
65 KiB
HTML
1031 lines
65 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>But For a Dream — Annotated Edition</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||
html{font-size:16px;scroll-behavior:smooth;}
|
||
|
||
:root {
|
||
/* Waking world — warm cream */
|
||
--page: #f7f2ea;
|
||
--page-mid: #f0e9de;
|
||
--page-lift: #ebe3d6;
|
||
--text: #2e2418;
|
||
--text-mid: #6a5840;
|
||
--text-dim: #9a8870;
|
||
--text-faint: #c8b8a0;
|
||
--border: #d8ccb8;
|
||
--border-hi: #c0ad90;
|
||
|
||
/* Dream world — dusty dusk blue */
|
||
--dream-bg: #eaecf4;
|
||
--dream-mid: #dde0ef;
|
||
--dream-accent:#7080a8;
|
||
--dream-hi: #4860a0;
|
||
--dream-dim: #a0aac8;
|
||
--dream-faint:#d0d4e8;
|
||
|
||
/* Gold — the warmth at the border of both */
|
||
--gold: #a87828;
|
||
--gold-hi: #c89838;
|
||
--gold-dim: #d8c898;
|
||
--gold-faint: #ede4c8;
|
||
}
|
||
|
||
/* ── Subtle paper texture ───────────────────── */
|
||
body {
|
||
background: var(--page);
|
||
color: var(--text);
|
||
font-family: 'EB Garamond', serif;
|
||
min-height: 100vh;
|
||
background-image:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E"),
|
||
radial-gradient(ellipse at 50% 0%, rgba(112,128,168,0.06) 0%, transparent 55%),
|
||
radial-gradient(ellipse at 20% 100%, rgba(168,120,40,0.05) 0%, transparent 50%);
|
||
}
|
||
|
||
/* ── HEADER ─────────────────────────────────── */
|
||
.site-header {
|
||
padding: 5rem 2rem 4rem;
|
||
text-align: center;
|
||
position: relative;
|
||
border-bottom: 1px solid var(--border);
|
||
background: linear-gradient(180deg, #f2ecdf 0%, var(--page) 100%);
|
||
}
|
||
.site-header::before {
|
||
content:'';
|
||
position:absolute; inset:0;
|
||
background: radial-gradient(ellipse at 50% 0%, rgba(112,128,168,0.1) 0%, transparent 60%);
|
||
pointer-events:none;
|
||
}
|
||
|
||
.header-inner { position:relative; }
|
||
|
||
.header-eyebrow {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.6rem;
|
||
letter-spacing: 0.35em;
|
||
text-transform: uppercase;
|
||
color: var(--text-faint);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
h1 {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-weight: 500;
|
||
font-size: clamp(2.8rem, 9vw, 5.8rem);
|
||
line-height: 1;
|
||
color: var(--text);
|
||
letter-spacing: 0.03em;
|
||
position: relative;
|
||
animation: fadein 1.4s ease forwards;
|
||
}
|
||
|
||
@keyframes fadein {
|
||
from { opacity:0; transform: translateY(10px); }
|
||
to { opacity:1; transform: translateY(0); }
|
||
}
|
||
|
||
h1 em {
|
||
font-style: italic;
|
||
color: var(--dream-hi);
|
||
}
|
||
|
||
.header-ornament {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1.2rem;
|
||
margin: 1.8rem auto;
|
||
max-width: 280px;
|
||
}
|
||
.header-ornament-line {
|
||
flex:1;
|
||
height:1px;
|
||
background: linear-gradient(90deg, transparent, var(--border-hi));
|
||
}
|
||
.header-ornament-line:last-child {
|
||
background: linear-gradient(90deg, var(--border-hi), transparent);
|
||
}
|
||
.header-ornament span {
|
||
font-family:'Cormorant Garamond', serif;
|
||
font-size:1.1rem;
|
||
color: var(--text-faint);
|
||
letter-spacing:0.3em;
|
||
}
|
||
|
||
.header-meta {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.62rem;
|
||
letter-spacing: 0.15em;
|
||
color: var(--text-dim);
|
||
line-height:2.2;
|
||
}
|
||
.header-meta a { color: var(--dream-accent); text-decoration:none; }
|
||
.header-meta a:hover { color: var(--dream-hi); }
|
||
|
||
/* ── TAB NAV ─────────────────────────────────── */
|
||
.tab-nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--page);
|
||
padding: 0 1rem;
|
||
overflow-x: auto;
|
||
scrollbar-width:none;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
gap: 0;
|
||
}
|
||
.tab-nav::-webkit-scrollbar{display:none;}
|
||
|
||
.tab-btn {
|
||
background: transparent;
|
||
border: none;
|
||
border-bottom: 1px solid transparent;
|
||
color: var(--text-faint);
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.62rem;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
padding: 1.1rem 1.5rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
white-space: nowrap;
|
||
margin-bottom: -1px;
|
||
}
|
||
.tab-btn:hover { color: var(--text-mid); }
|
||
.tab-btn.active {
|
||
color: var(--dream-hi);
|
||
border-bottom-color: var(--dream-accent);
|
||
}
|
||
|
||
/* ── TAB CONTENT ────────────────────────────── */
|
||
.tab-content { display:none; }
|
||
.tab-content.active { display:block; }
|
||
|
||
/* ── PROSE ──────────────────────────────────── */
|
||
.prose-wrap {
|
||
max-width: 660px;
|
||
margin: 0 auto;
|
||
padding: 4rem 1.5rem 6rem;
|
||
}
|
||
.prose-wrap p {
|
||
font-family: 'EB Garamond', serif;
|
||
font-size: 1.13rem;
|
||
line-height: 2;
|
||
color: #3a2e20;
|
||
margin-bottom: 1.6rem;
|
||
}
|
||
|
||
/* Second-person address — the story's voice */
|
||
.prose-wrap p strong.you {
|
||
font-weight:400;
|
||
font-style:italic;
|
||
color: var(--dream-hi);
|
||
}
|
||
|
||
/* ── DREAM SECTIONS ─────────────────────────── */
|
||
.dream-section {
|
||
background: var(--dream-bg);
|
||
border-top: 1px solid var(--dream-faint);
|
||
border-bottom: 1px solid var(--dream-faint);
|
||
padding: 2.2rem 2rem 2.2rem;
|
||
margin: 2rem -0.5rem;
|
||
position: relative;
|
||
}
|
||
.dream-section::before {
|
||
content: 'dream';
|
||
position: absolute;
|
||
top: -0.55rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-style: italic;
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.3em;
|
||
color: var(--dream-dim);
|
||
background: var(--dream-bg);
|
||
padding: 0 0.8rem;
|
||
}
|
||
.dream-section p {
|
||
color: #2e3448 !important;
|
||
}
|
||
|
||
/* Time jump — years passing */
|
||
.time-jump {
|
||
text-align: center;
|
||
padding: 3rem 0;
|
||
position: relative;
|
||
}
|
||
.time-jump::before,
|
||
.time-jump::after {
|
||
content:'';
|
||
position:absolute;
|
||
left:10%;right:10%;
|
||
height:1px;
|
||
background: linear-gradient(90deg, transparent, var(--border), transparent);
|
||
}
|
||
.time-jump::before { top:1.4rem; }
|
||
.time-jump::after { bottom:1.4rem; }
|
||
.time-jump-text {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-style: italic;
|
||
font-size: 1rem;
|
||
letter-spacing: 0.25em;
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
/* ── FINAL LINE ─────────────────────────────── */
|
||
.final-section {
|
||
padding: 4rem 0 2rem;
|
||
text-align: center;
|
||
}
|
||
.final-dialogue {
|
||
display: inline-block;
|
||
text-align: left;
|
||
padding: 2.5rem 3rem;
|
||
background: var(--page-lift);
|
||
border: 1px solid var(--border);
|
||
position: relative;
|
||
max-width: 420px;
|
||
width: 100%;
|
||
animation: dreamfade 0.8s ease forwards;
|
||
}
|
||
.final-dialogue::before {
|
||
content:'"';
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 6rem;
|
||
line-height:1;
|
||
color: var(--border);
|
||
position:absolute;
|
||
top:-1rem;
|
||
left:0.8rem;
|
||
pointer-events:none;
|
||
}
|
||
.final-dialogue p {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-style: italic;
|
||
font-size: 1.5rem !important;
|
||
line-height: 1.6 !important;
|
||
color: var(--text) !important;
|
||
margin:0 !important;
|
||
}
|
||
.final-attribution {
|
||
margin-top: 1.2rem;
|
||
font-family:'Space Mono',monospace;
|
||
font-size:0.58rem;
|
||
letter-spacing:0.2em;
|
||
color: var(--text-faint);
|
||
text-align:center;
|
||
}
|
||
|
||
/* ── DECODER ────────────────────────────────── */
|
||
.decoder { display:inline; position:relative; }
|
||
.decoder-trigger {
|
||
background:none; border:none;
|
||
border-bottom:1px dotted var(--gold);
|
||
color: var(--gold);
|
||
cursor:pointer;
|
||
font-family:inherit; font-size:inherit; line-height:inherit;
|
||
padding:0; display:inline;
|
||
transition:color 0.15s;
|
||
}
|
||
.decoder-trigger:hover { color: var(--gold-hi); }
|
||
.decoder-trigger::after {
|
||
content:'▾'; font-size:0.5em;
|
||
margin-left:1px; vertical-align:super; opacity:0.5;
|
||
}
|
||
.decoder-trigger.open { color: var(--gold-hi); }
|
||
.decoder-trigger.open::after { content:'▴'; }
|
||
|
||
.decoder-panel {
|
||
display:none;
|
||
position:absolute;
|
||
top:calc(100% + 6px); left:0;
|
||
z-index:500; width:295px;
|
||
background: #faf7f0;
|
||
border:1px solid var(--border-hi);
|
||
border-top:2px solid var(--gold);
|
||
padding:1rem 1.15rem;
|
||
box-shadow:0 8px 32px rgba(80,60,20,0.12);
|
||
}
|
||
.decoder-panel.open { display:block; }
|
||
.decoder-panel.flip-left { left:auto; right:0; }
|
||
|
||
.decode-label {
|
||
display:block;
|
||
font-family:'Space Mono',monospace;
|
||
font-size:0.58rem; letter-spacing:0.25em; text-transform:uppercase;
|
||
color: var(--gold); margin-bottom:0.3rem;
|
||
}
|
||
.decode-term {
|
||
display:block;
|
||
font-family:'Cormorant Garamond',serif;
|
||
font-size:1.15rem; font-weight:600;
|
||
color: var(--text); margin-bottom:0.4rem;
|
||
}
|
||
.decoder-panel .panel-body {
|
||
display:block;
|
||
font-family:'Space Mono',monospace;
|
||
font-size:0.7rem; color: var(--text-mid); line-height:1.7;
|
||
}
|
||
.decode-link {
|
||
display:block; margin-top:0.5rem;
|
||
font-family:'Space Mono',monospace; font-size:0.6rem;
|
||
color: var(--text-faint); text-decoration:none;
|
||
}
|
||
.decode-link:hover { color: var(--gold); }
|
||
|
||
/* Dream-register decoder */
|
||
.decoder-panel.dream {
|
||
background: #f4f5fa;
|
||
border-top-color: var(--dream-accent);
|
||
}
|
||
.decoder-panel.dream .decode-label { color: var(--dream-accent); }
|
||
.decoder-panel.dream .decode-term { color: var(--dream-hi); }
|
||
|
||
/* ── MARGIN NOTE ────────────────────────────── */
|
||
.marginnote { display:inline; position:relative; }
|
||
.marginnote-trigger {
|
||
background:none; border:none;
|
||
border-bottom:1px dotted var(--dream-dim);
|
||
color:inherit; cursor:pointer;
|
||
font-family:inherit; font-size:inherit; line-height:inherit;
|
||
padding:0; display:inline;
|
||
}
|
||
.marginnote-trigger::after {
|
||
content:'✎'; font-size:0.52em;
|
||
margin-left:2px; vertical-align:super;
|
||
color: var(--dream-accent); opacity:0.75;
|
||
}
|
||
|
||
.marginnote-panel {
|
||
display:none;
|
||
position:absolute; top:calc(100% + 6px); left:0;
|
||
z-index:500; width:295px;
|
||
background: #f2f4fa;
|
||
border:1px solid var(--dream-faint);
|
||
border-top:2px solid var(--dream-accent);
|
||
padding:1rem 1.15rem;
|
||
box-shadow:0 8px 32px rgba(70,90,160,0.1);
|
||
}
|
||
.marginnote-panel.open { display:block; }
|
||
.marginnote-panel.flip-left { left:auto; right:0; }
|
||
|
||
.mn-label {
|
||
display:block;
|
||
font-family:'Space Mono',monospace;
|
||
font-size:0.58rem; letter-spacing:0.25em; text-transform:uppercase;
|
||
color: var(--dream-dim); margin-bottom:0.3rem;
|
||
}
|
||
.marginnote-panel .panel-body {
|
||
display:block;
|
||
font-family:'Space Mono',monospace;
|
||
font-size:0.7rem; color: #6878a8; line-height:1.7;
|
||
}
|
||
|
||
/* ── LIGHTBOX TRIGGER ───────────────────────── */
|
||
.lb-trigger {
|
||
background:none; border:none;
|
||
border-bottom:1px solid rgba(80,130,80,0.35);
|
||
color:inherit; cursor:pointer;
|
||
font-family:inherit; font-size:inherit; line-height:inherit;
|
||
padding:0; display:inline;
|
||
}
|
||
.lb-trigger::after {
|
||
content:'⊕'; font-size:0.5em;
|
||
margin-left:2px; vertical-align:super;
|
||
color:#608060; opacity:0.7;
|
||
}
|
||
|
||
/* ── LIGHTBOX ───────────────────────────────── */
|
||
.lb-overlay {
|
||
display:none; position:fixed; inset:0;
|
||
background: rgba(30,22,10,0.6);
|
||
z-index:1000; align-items:center; justify-content:center;
|
||
padding:1rem; backdrop-filter:blur(6px);
|
||
}
|
||
.lb-overlay.open { display:flex; }
|
||
.lb-box {
|
||
background: #faf7f0;
|
||
border:1px solid var(--border-hi);
|
||
border-top:2px solid var(--dream-accent);
|
||
max-width:580px; width:100%;
|
||
max-height:88vh; overflow-y:auto;
|
||
box-shadow:0 20px 80px rgba(30,22,10,0.25);
|
||
}
|
||
.lb-header {
|
||
display:flex; align-items:center; justify-content:space-between;
|
||
padding:1.1rem 1.4rem; border-bottom:1px solid var(--border);
|
||
background: var(--page-mid); position:sticky; top:0;
|
||
}
|
||
.lb-title {
|
||
font-family:'Cormorant Garamond',serif;
|
||
font-size:1.15rem; font-weight:600; color: var(--text);
|
||
}
|
||
.lb-close {
|
||
background:none; border:1px solid var(--border-hi);
|
||
color: var(--text-dim); cursor:pointer;
|
||
font-size:0.8rem; width:24px; height:24px;
|
||
display:flex; align-items:center; justify-content:center;
|
||
transition:all 0.15s;
|
||
}
|
||
.lb-close:hover { color: var(--dream-hi); border-color: var(--dream-dim); }
|
||
.lb-body { padding:1.6rem; }
|
||
.lb-body h3 {
|
||
font-family:'Space Mono',monospace; font-size:0.62rem;
|
||
letter-spacing:0.25em; text-transform:uppercase;
|
||
color: var(--dream-dim); margin:1.4rem 0 0.5rem;
|
||
padding-bottom:0.35rem; border-bottom:1px solid var(--border);
|
||
}
|
||
.lb-body h3:first-child { margin-top:0; }
|
||
.lb-body p {
|
||
font-family:'Space Mono',monospace; font-size:0.76rem;
|
||
color: var(--text-mid); line-height:1.8; margin-bottom:0.6rem;
|
||
}
|
||
.lb-body a { color: var(--dream-accent); font-size:0.72rem; text-decoration:none; }
|
||
.lb-body a:hover { color: var(--dream-hi); }
|
||
.lb-body strong { color: var(--text); font-weight:600; }
|
||
.lb-body em { font-style:italic; color: #6070a0; }
|
||
|
||
/* ── ACCORDION ──────────────────────────────── */
|
||
.acc-item {
|
||
border:1px solid var(--border); margin-bottom:0.5rem; overflow:hidden;
|
||
}
|
||
.acc-trigger {
|
||
background: var(--page-mid); border:none; width:100%;
|
||
text-align:left; padding:0.95rem 1.1rem; cursor:pointer;
|
||
display:flex; justify-content:space-between; align-items:center;
|
||
font-family:'Space Mono',monospace; font-size:0.7rem;
|
||
color: var(--text-mid); transition:all 0.18s; gap:1rem;
|
||
}
|
||
.acc-trigger:hover { background: var(--page-lift); color: var(--text); }
|
||
.acc-trigger.open { color: var(--dream-hi); background: var(--page-lift); }
|
||
.acc-arrow { font-size:0.8rem; flex-shrink:0; transition:transform 0.2s; }
|
||
.acc-trigger.open .acc-arrow { transform:rotate(180deg); }
|
||
.acc-panel {
|
||
display:none; padding:1.2rem 1.3rem;
|
||
border-top:1px solid var(--border); background: var(--page);
|
||
}
|
||
.acc-panel.open { display:block; }
|
||
.acc-panel p {
|
||
font-family:'Space Mono',monospace; font-size:0.76rem;
|
||
color: var(--text-mid); line-height:1.8; margin-bottom:0.65rem;
|
||
}
|
||
.acc-panel p:last-child { margin-bottom:0; }
|
||
.acc-panel a { color: var(--dream-accent); text-decoration:none; }
|
||
.acc-panel a:hover { color: var(--dream-hi); }
|
||
.acc-panel strong { color: var(--text); }
|
||
.acc-panel em { font-style:italic; color:#6878a8; }
|
||
|
||
/* ── EDU WRAP ───────────────────────────────── */
|
||
.edu-wrap {
|
||
max-width:660px; margin:0 auto; padding:4rem 1.5rem 6rem;
|
||
}
|
||
.edu-wrap > h2 {
|
||
font-family:'Cormorant Garamond',serif;
|
||
font-weight:500; font-style:italic;
|
||
font-size:clamp(1.8rem,5vw,2.6rem);
|
||
color: var(--text); margin-bottom:0.2rem;
|
||
}
|
||
.edu-intro {
|
||
font-family:'Space Mono',monospace; font-size:0.6rem;
|
||
letter-spacing:0.15em; color: var(--text-faint);
|
||
margin-bottom:2.2rem; padding-bottom:1.2rem;
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
|
||
/* ── FURTHER READING ────────────────────────── */
|
||
.reading-section h3 {
|
||
font-family:'Space Mono',monospace; font-size:0.6rem;
|
||
letter-spacing:0.25em; text-transform:uppercase;
|
||
color: var(--dream-dim); margin:2rem 0 0.65rem;
|
||
padding-bottom:0.4rem; border-bottom:1px solid var(--border);
|
||
}
|
||
.reading-section h3:first-child { margin-top:0; }
|
||
.reading-link {
|
||
display:block; padding:0.65rem 0;
|
||
border-bottom:1px solid var(--page-lift); text-decoration:none; transition:all 0.15s;
|
||
}
|
||
.reading-link:hover .rl-title { color: var(--dream-hi); }
|
||
.rl-title {
|
||
display:block; font-family:'EB Garamond',serif;
|
||
font-size:1rem; color: var(--text-mid); transition:color 0.15s;
|
||
}
|
||
.rl-desc {
|
||
display:block; font-family:'Space Mono',monospace;
|
||
font-size:0.62rem; color: var(--text-faint); margin-top:0.15rem; line-height:1.5;
|
||
}
|
||
|
||
/* ── SCROLLBAR ──────────────────────────────── */
|
||
::-webkit-scrollbar{ width:4px; height:4px; }
|
||
::-webkit-scrollbar-track{ background:var(--page); }
|
||
::-webkit-scrollbar-thumb{ background:var(--border); }
|
||
::-webkit-scrollbar-thumb:hover{ background:var(--dream-dim); }
|
||
|
||
@keyframes dreamfade {
|
||
from { opacity:0; transform:translateY(6px); }
|
||
to { opacity:1; transform:translateY(0); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══════════════════════ HEADER ══════════════════════ -->
|
||
<header class="site-header">
|
||
<div class="header-inner">
|
||
<div class="header-eyebrow">Renegade Storyteller · Written 2010 · Annotated Edition</div>
|
||
<h1>But For <em>a Dream</em></h1>
|
||
<div class="header-ornament">
|
||
<div class="header-ornament-line"></div>
|
||
<span>✦</span>
|
||
<div class="header-ornament-line"></div>
|
||
</div>
|
||
<div class="header-meta">
|
||
<p>Author / JL · Published 2014 at <a href="https://renegadestoryteller.tumblr.com/post/84605530778/but-for-a-dream?" target="_blank">renegadestoryteller.tumblr.com</a></p>
|
||
<p>Read aloud / <a href="https://www.youtube.com/watch?v=wGeLoHr_02Y" target="_blank">YouTube</a></p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ══════════════════════ TAB NAV ══════════════════════ -->
|
||
<nav class="tab-nav">
|
||
<button class="tab-btn active" onclick="switchTab('story',this)">The Story</button>
|
||
<button class="tab-btn" onclick="switchTab('character',this)">The Character</button>
|
||
<button class="tab-btn" onclick="switchTab('craft',this)">The Craft</button>
|
||
<button class="tab-btn" onclick="switchTab('reading',this)">Further Reading</button>
|
||
</nav>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
TAB 1: THE STORY
|
||
══════════════════════════════════════════════════════ -->
|
||
<div id="tab-story" class="tab-content active">
|
||
<div class="prose-wrap">
|
||
|
||
<p>
|
||
<span class="marginnote" id="mn-room">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-room',this)">You're in a room.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · Second Person</span>
|
||
<span class="panel-body">The entire story is told in second person — "you." Every observation, every feeling, is addressed directly to the reader, collapsing the distance between the protagonist's experience and ours. This is the story's central formal choice, and it does two things at once: it makes the haunting feel intimate, even personal, and it creates a slight dreamlike unreality, as if the narrator isn't entirely sure whether these things are happening to someone else or to them.</span>
|
||
</span>
|
||
</span>
|
||
It reminds you of a dream you want to forget. The walls are white, but the light makes them seem a little blue. You're looking at yourself in the mirror that's mounted on the wall.</p>
|
||
|
||
<p>People say you're beautiful and it flatters you. You're not vain, but you like your looks.
|
||
<span class="marginnote" id="mn-hair">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-hair',this)">Tonight your hair is blonde and wavy, cascading gently down your shoulders. Thank God. In the dream it was brown, wasn't it?</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note</span>
|
||
<span class="panel-body">"Thank God" is doing a lot of quiet work here. She is relieved that her waking self is different from her dream self — as if the difference is a proof of separation, a confirmation that the dream is not real. But the relief also reveals the anxiety: she is already checking. Already looking for the distance between who she is and who she was in the dream.</span>
|
||
</span>
|
||
</span>
|
||
You look into your own eyes. Why are you so sad? Tonight is a night for celebration; your dress is gorgeous and the atmosphere outside is perfect for a good time. You feel sick. You glance behind you at the toilet for a moment, contemplating actually throwing up.</p>
|
||
|
||
<p>Breathe, you say, everything's fine. It is fine, right? What could possibly be the matter? The dream?</p>
|
||
|
||
<!-- ── FIRST DREAM MEMORY ──────────────── -->
|
||
<div class="dream-section">
|
||
<p>No, it can't be the dream. In the dream, you were getting ready at home for one of those gala evenings that you always have to go to. You were excited in the dream, not nauseous. But why? It was just another obligation. You suddenly remember. It was him. You were excited because you were going with him. What did he look like? All you really remember are his green eyes and his smile. When you opened your door in the dream, all that you cared about were those eyes, that looked at you as if they had always known you and yet were still trying to figure you out.</p>
|
||
</div>
|
||
|
||
<p>You look at yourself again in the bathroom mirror and try compose yourself. It was just a dream, you keep telling yourself. Your boyfriend's out there waiting on you and here you are, freaking out over some man that you've never met. You go over to the designer basin and splash some water in your face.</p>
|
||
|
||
<p>It's a good thing you don't wear makeup to these kinds of parties, you don't need to. You dry your face, smooth your dress and walk out.</p>
|
||
|
||
<p>You're walking down the street with your hand in your boyfriend's. His is big and warm, enveloping your dainty fingers with a warm, yet firm, grip. There are people bustling by, a few of them with cameras, but you don't mind. You're looking around from behind dark glasses, wondering what many of them are thinking. They all have their own lives, completely removed from your own.</p>
|
||
|
||
<p>
|
||
<span class="marginnote" id="mn-paths">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-paths',this)">They're on their path and you're on yours, but somehow, you have always felt a connection between all the infinite random events of each individual's journey and yours.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · Character</span>
|
||
<span class="panel-body">This is the story's first portrait of who she actually is: a person who thinks in terms of connection and meaning, who feels the weight of other lives even as they brush past. Her boyfriend, immediately after, "prefers to think about where he's going to eat next." The incompatibility is not announced — it's shown in this adjacency. She is already elsewhere, even on his arm.</span>
|
||
</span>
|
||
</span>
|
||
Your boyfriend asks what's wrong and you explain but he doesn't quite get it. He isn't the type. He prefers to think about where he's going to eat next, or where to find another crazy thrill. But that's okay, you think; everyone has a different way of looking at the world.
|
||
</p>
|
||
|
||
<p>
|
||
<span class="marginnote" id="mn-bookshop">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-bookshop',this)">You pass a book store on your left. It's one of those second-hand ones where people trade books more than they buy them. You can see thousands of books, stacked on their sides to save space, all of them looking just a little bit worn. You can imagine the smell of that store and the thrill of what hidden literary gems you might find if given a few hours inside. But you don't go in. Your boyfriend wouldn't really enjoy it. He'd stand at the door, waiting for you to buy something and be done. So you walk past.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · Desire Deferred</span>
|
||
<span class="panel-body">One of the most quietly devastating moments in the story. She knows exactly what she wants (to go inside, to lose herself in worn books, to follow her curiosity), and she walks past. The narrator doesn't editorialize — it simply states the fact. This small act of self-erasure for a boyfriend's comfort says more about the relationship than any argument could. The dream man, when he appears in the bookshop moments later, is reading.</span>
|
||
</span>
|
||
</span>
|
||
Suddenly, you stop. Your hand breaks away from your boyfriend's and he turns. <em>What's wrong babe?</em> You rush back to the bookstore's window, just to be sure. Your eyes dart around the store, searching every little niche they can find.</p>
|
||
|
||
<p>You could have sworn you'd just seen him again. In the store. The man with those green eyes. He was reading a book, and looked up as you walked past. He seemed to recognise you. It happened in an instant, but you're sure that his eyes met yours with that same knowing look. But he isn't there.</p>
|
||
|
||
<p>You feel a hand grasp yours but it's only your boyfriend. You're being silly, you think as you explain to your boyfriend that you thought you saw someone you know. As you depart, you get the same sad, nauseous feeling in your stomach that you had a month ago at the party. Are you going mad?</p>
|
||
|
||
<!-- ── KITCHEN / CHOCOLATE MILK ─────────── -->
|
||
<p>
|
||
<span class="marginnote" id="mn-nutella">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-nutella',this)">You wake up. It's three in the morning and you're sweating. You had one of those dreams, and it freaked you out because you don't really get those dreams.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · Tonal Register</span>
|
||
<span class="panel-body">After the ache of the bookshop scene, the story pivots to 3am chocolate milk and Nutella eaten from a jar with a teaspoon. This is a deliberate tonal landing — domestic, slightly comic, humanising. She is not a romantic heroine suffering beautifully; she is a person who copes with unsettling dreams by raiding the fridge. The story trusts its own sentimentality enough to keep puncturing it.</span>
|
||
</span>
|
||
</span>
|
||
You get up and go to the kitchen. Your first thought is a glass of water, but you open the refrigerator and grab a bottle of chocolate milk instead. You also decide that it's the perfect time for some Nutella, so you grab a jar out of the cupboard and a teaspoon. It's been six months since that day at the bookstore and three months since the break-up. You did the dumping and you hated it, but you're rather enjoying the single life at the moment. You start thinking about the dream.
|
||
</p>
|
||
|
||
<!-- ── DREAM: THE DANCE FLOOR ─────────────── -->
|
||
<div class="dream-section">
|
||
<p>You were in a room full of people you didn't know; all of them, and yourself, dolled up to the nines. People were talking to each other, and every now and then, someone would say hello in passing, stopping only to tell you good job, or beautiful dress. You remember giving your usual gracious responses, wishing for a familiar, friendly face to come up to you and keep you company. For ages you stood rooted to the spot, terrified and lonely, waiting for someone to rescue you, and just when you thought that the nightmare would remain he offered you his arm. You remember this time that he hadn't shaved and his stubble made him seem older and wilder, but his eyes remained gentle and his smile was still full of the life it always has in your dreams. You remember his foolishness on the dance floor, which he did to make you laugh. You remember doing the rumba, and the foxtrot, even though he's a terrible dancer, and you remember slowly swaying as everyone around you dissolved into nothing. He kissed you on the dance floor and then suggested that you both get out of there.</p>
|
||
</div>
|
||
|
||
<p>Why are these dreams so vivid? You can never remember your dreams quite like you recall these, except perhaps for the ones with clowns in them. You hate clowns. You try shake of the wave of sadness and nausea as you go back to bed. It seems like every time you wake up from one of these dreams, you've just broken up with him. But you don't know him, you've never met him and, very possibly, he doesn't even exist. But what about the book store? Perhaps you should see a shrink or something.</p>
|
||
|
||
<p>You're staring out the window of a car. The sun is shining and the endless blue of the sky makes you feel insignificant, but understood. The trees are flashing past as the countryside gets wilder and wilder. Your new boyfriend is driving. You've been with him for three months and he makes you happy. He turns up the volume of a song that's playing on the radio and you both start belting out the words, singing and laughing all the way. He's off key half the time, but you don't really care; it's fun to sing. As the song finishes, you put your hand on his knee and smile. He's taking you up to a secret place of his for a picnic. It's a Sunday afternoon and it all seems perfect. Almost.</p>
|
||
|
||
<p>
|
||
<span class="marginnote" id="mn-picnic">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-picnic',this)">As he pulls up to the site of your picnic, you take your hand back and try calm yourself. You've been here before. In a dream.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · Déjà Rêvé</span>
|
||
<span class="panel-body">Déjà rêvé — "already dreamed" — is the experience of recognising a real place or event from a dream. The story uses this moment to deepen the haunting: the dream man doesn't just visit her at night, he seems to have preceded her into her waking life, marking places she hasn't been yet. The story leaves open whether this is supernatural or psychological — whether she is being followed, or following herself.</span>
|
||
</span>
|
||
</span>
|
||
It's all there; the fast flowing river with reeds and bullrushes on the other side, the weeping willow with one bough so low it only comes up to your waist and the large rock, just to the left of the willow plastered with graffiti from other couples who have also escaped to this romantic rendezvous. You cautiously walk up to the rock, just to make sure it isn't there. In a dream, you wrote on that rock, and so did he. You look for the exact place and sigh, relieved, when there is nothing there.
|
||
</p>
|
||
|
||
<p>Your boyfriend lays out the picnic and it's perfectly splendid; he's a good listener and knows exactly what you like. He opens a bottle of Sauvignon Blanc and pours you each a glass. As you chat and eat, your boyfriend seems to be picking up that something is amiss. He keeps asking what's wrong and you keep reassuring him that it's nothing, although you're less convincing each time. What are you supposed to tell him? That every time you look up you're hoping to see green eyes instead of blue?</p>
|
||
|
||
<p>
|
||
<span class="marginnote" id="mn-ruining">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-ruining',this)">It's like this green-eyed man is ruining all of your romantic endeavours without even existing.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note</span>
|
||
<span class="panel-body">The story's sharpest self-aware line. She names her own predicament with dark clarity — "without even existing" — and immediately follows it with two questions that the story holds open until the final line: <em>Maybe you're afraid to commit. Maybe he's out there, having the same dreams.</em> The story never decides which is true. That refusal to resolve is the point.</span>
|
||
</span>
|
||
</span>
|
||
Maybe you're terrified you will never find 'the one' so your subconscious has invented one just to give you some hope. Maybe God's playing a trick. Maybe you feel alienated from any man you get close to and so you're wishing for someone who gets you, who fits you like a glove. Maybe –</p>
|
||
|
||
<p>Maybe, he's out there, just waiting to meet you, having the same dreams, and the same issues with lovers.</p>
|
||
|
||
<p>You're at a coffee shop with your closest friend. You've spent the past forty five minutes relating every detail of the dreams that you can remember and all the problems that they're causing. At first, she laughs, especially when you say that you've had a sex dream about a man you've never met or heard of. When you tell her about the book store, she asks if you were on acid at the time, before realising that you're actually serious. In the end, she has no answers for you and her questions get ridiculous. She says that it's stress, that you're working too hard.</p>
|
||
|
||
<p>Eventually, she gets bored of talking about the dreams and starts asking about your boyfriend. You've been together for almost a year now and it's beginning to get serious. He asked you to move in with him last week, and you still haven't decided. Probably because you don't want to see his face when you tell him that you don't want to. It hurts to hurt people, and you avoid it at all costs. Your friend asks if you think he's marriage material. You say you don't know.</p>
|
||
|
||
<!-- ── CLIFF DREAM ─────────────────────── -->
|
||
<div class="dream-section">
|
||
<p>In the dream, you were on a cliff, overlooking the sea, dressed in a gorgeous blue dress that was all the more alluring in the light of the setting sun. There was a bench a little way in from the edge and you decided to take a seat and wait. After what seemed like ages, he called to you. As you turned, you saw him, dressed in a tuxedo beside a beautiful chestnut coloured stallion, smiling and beckoning for you to join him. He took you on a ride along the cliffs, until turning and making for the beach below. When you arrived at the beach, he helped you down and took you to a collection of rocks on the shore. As you stood on the largest of these and looked out to the horizon, you remember feeling as though you had been set free. You turned and found him on bended knee offering you a simple platinum band with a
|
||
<span class="decoder" id="dec-diamond">
|
||
<button class="decoder-trigger" onclick="togglePanel('dec-diamond',this)">blue diamond, cut square</button>
|
||
<span class="decoder-panel dream">
|
||
<span class="decode-label">Detail · Symbolic</span>
|
||
<span class="decode-term">The Blue Diamond</span>
|
||
<span class="panel-body">Blue diamonds are among the rarest gemstones on earth. In the story's colour grammar, blue has been the dream's colour from the first sentence — the white walls tinted blue by the light. A blue diamond set simply on a platinum band is the dream world made permanent, offered as a gift. The contrast with the real proposal — an elaborate gold band with thirty tiny diamonds surrounding one large one — could not be more deliberate.</span>
|
||
<a class="decode-link" href="https://en.wikipedia.org/wiki/Blue_diamond" target="_blank">→ Blue diamonds — Wikipedia</a>
|
||
</span>
|
||
</span>.
|
||
When he proposed, you looked into his green eyes and knew for a fact that he would not try to cage you.</p>
|
||
</div>
|
||
|
||
<p>When you woke, the wave of sudden, cold reality washed over you and shook you so much that you considered cancelling your date with your boyfriend whom you've been with for almost two years now.</p>
|
||
|
||
<p>The restaurant is as opulent and marvellous as its French name and fine location suggest. The light is a romantic yellow, very slightly approaching the orange of candlelight – bright enough to entertain friends and colleagues, but dim enough to create the intimacy needed for a perfectly splendid first date. You remember now that this is the place that your boyfriend took you on your first date. As you approach him he smiles and gets your chair for you.</p>
|
||
|
||
<p>It's pleasant enough, and your boyfriend has the charm to keep you engaged, but you find your mind drifting to the dream at every pause or mouthful from his side. You excuse yourself once you've had your first course and stare at yourself in the bathroom mirror. <em>Get a grip,</em> you tell yourself, <em>it was just a dream.</em></p>
|
||
|
||
<p>He pauses for what feels like a minute and gives you a very intense, yet tender look. You've seen it once before, on the night he said "I love you" for the first time. You hesitated before saying it back, because at that moment, his blue eyes seemed to flash green.</p>
|
||
|
||
<p>He starts to tell you about how he feels about you, and the relationship that you and he have had for the past two years. You smile and laugh as he reminisces of your adventures together and he gets up after telling you that you are the girl of his dreams. He gets down on one knee before you and pulls a small black box out of his jacket pocket. The ring is a beauty, with an elaborate gold band, encrusted with about thirty tiny diamonds that surround an enormous square-cut one.</p>
|
||
|
||
<p>You gasp for a moment, and begin to weep. The entire restaurant is watching, as they do whenever something like this happens. All their romantic desires want to see you accept and all their scandalous sensibilities are begging for a rejection.
|
||
<span class="marginnote" id="mn-proposal">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-proposal',this)">You look at him, hoping against hope to find green eyes instead of blue, stubble instead of a fresh face, but at each blink, your boyfriend is still there.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · The Blink</span>
|
||
<span class="panel-body">"At each blink" — she is checking at each blink, hoping the face in front of her will resolve into a different one. This is the scene's cruelest detail, and also its most honest. She is not ambivalent about the proposal; she is already somewhere else, trying to will someone else into existence at the most consequential moment of her relationship. The blink is a small mechanical gesture carrying enormous weight.</span>
|
||
</span>
|
||
</span>
|
||
You want desperately to say yes, just to please your boyfriend and the restaurant. You don't want to hurt him, but you will do much worse later if you agree now. You simply say you can't and flee, leaving your boyfriend, shattered, on the floor of a posh restaurant.</p>
|
||
|
||
<p>As the months pass, you begin to love and hate the dreams even more. They come and go as they have always done, with no more than one each month. Each dream brings a new adventure that you dwell on till the next. You're also trying to get used to the single life again, since your boyfriend rightly assumed that your relationship with him ended when you exited the restaurant. You have tried to apologise and he has tried to forgive you, but you still cannot offer a reason that satisfies his perfectly justified question of why.
|
||
<span class="marginnote" id="mn-absurd">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-absurd',this)">You can't tell him that you left him for a dream, it seems absurd even to you, but despite your fiercest reasonings and blatant denials, you know that it's the truth.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · Self-Knowledge</span>
|
||
<span class="panel-body">The story names its own impossible premise head-on, in the protagonist's voice: this is absurd, and it is also the truth. That double acknowledgement — absurd but true — is the story's philosophical core. It refuses to resolve the tension between the rational (this is a dream, he doesn't exist, you are being self-destructive) and the experiential (I know what I felt and I cannot unknow it). The story asks which of these is more real.</span>
|
||
</span>
|
||
</span>
|
||
</p>
|
||
|
||
<p>You start seeing a therapist, trying to understand what these dreams mean. It doesn't help. Soon the dreams become more frequent and more intense until, for a week, you dream a dream every night.</p>
|
||
|
||
<p>You're walking along a crowded street. You're thinking of the past week. It's been both wonderful and terrible, with a dream every night. You've been taken around the world, spent days in bed, taken walks everywhere and nowhere, all in your sleep, all with him. You haven't been able to focus on anything and the dreams lavish you when you're asleep and torment you when you're awake.</p>
|
||
|
||
<p>
|
||
<span class="marginnote" id="mn-paper">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-paper',this)">You look up and see a piece of folded paper, falling from an apartment window above, being buffeted along by the wind. As it falls it catches fire and as it burns into oblivion you feel a tremendous weight being lifted from inside you. It feels as if you're at an airport, saying goodbye to someone you deeply care for. You're the one being left behind.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · The Letting Go</span>
|
||
<span class="panel-body">A piece of paper catches fire as it falls and she feels a weight lift. The image doesn't announce its meaning — it offers it as sensation, the way a dream does. Something is ending; she feels it as loss and relief simultaneously. "You're the one being left behind" is the cruelest possible framing of a voluntary release: she did not let go of him. He left.</span>
|
||
</span>
|
||
</span>
|
||
</p>
|
||
|
||
<!-- ── THREE YEARS ─────────────────────── -->
|
||
<div class="time-jump">
|
||
<span class="time-jump-text">Three years pass without a single dream of him.</span>
|
||
</div>
|
||
|
||
<p>You're at one of those after-parties that you're obliged to attend. It's pleasant enough, but your date has disappeared to go flirt with a girl who's been making eyes at him all night. You love to dance, but not tonight. You're in a sombre mood and the din prompts you to retreat to the quieter parts of this establishment, where people are gathered around tables talking about everything and nothing.</p>
|
||
|
||
<p>You start thinking of your life as it is now. You can't complain much. You're successful and wealthy now, well read and well-travelled – happy, but for the fact that you haven't been able to keep a man in your life for longer than three months, not since you left an almost forgotten suitor on one knee in a restaurant. Did you make a terrible mistake that night? You've asked that question often, and it remains unanswerable.</p>
|
||
|
||
<p>You're struck from your thoughts when a good friend of yours rushes up and greets you. She says, after grabbing your arm and dragging you behind her, that there is someone she would like you to meet at her table. You recognise his name but barely pay attention as your friend lists his merits. Eventually you reach the table, where at least fifteen people are seated. You recognize most of them.</p>
|
||
|
||
<p>Seated a little to your right is a man whose face you have not yet seen because, he too, is discussing something with a curly-haired man who has rather broad shoulders and large biceps. As you approach, he notices you and interrupts the curly-haired man and his friend, gesturing in your direction. The curly-haired man gets up from his seat and charmingly introduces himself, kissing your hand like they used to do in bygone days.</p>
|
||
|
||
<p>Flattered, you respond with a curtsey and notice the other man who has just got up from his seat behind the curly-haired man. You recognise his face vaguely, and you're sure you've seen him somewhere. He performs a mock-bow as he approaches you, the curly-haired man returning to his seat.
|
||
<span class="marginnote" id="mn-eyes">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-eyes',this)">As he comes up from his bow, his eyes meet yours with an intrigued, yet knowing look. His eyes are green and as he smiles through his stubble the rest of the world vanishes for a moment.</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · The Arrival</span>
|
||
<span class="panel-body">Every element the story has trained us to recognise arrives at once: the knowing look, the green eyes, the stubble. The story has been building this inventory of details across years of page-time — we know exactly what we're seeing at the moment she recognises it. "The rest of the world vanishes for a moment" is the same phrase-shape that ended the dancing dream. The story has been rhyming with itself all along.</span>
|
||
</span>
|
||
</span>
|
||
For three years, you haven't had a single dream about him, haven't seen his face in your mind's eye and now he stands before you as nonchalant as ever. The difference is that this time he's real, tangible, flesh and blood. All the dreams rush into your head and vanish in an instant, making you feel giddy.</p>
|
||
|
||
<p>He offers his hand and regards you tenderly.</p>
|
||
|
||
<!-- ── FINAL LINE ──────────────────────── -->
|
||
<div class="final-section">
|
||
<div class="final-dialogue">
|
||
<p>"Hi," he says, "Have we met before?"</p>
|
||
</div>
|
||
<p class="final-attribution">
|
||
<span class="marginnote" id="mn-final">
|
||
<button class="marginnote-trigger" onclick="togglePanel('mn-final',this)">Have we met before?</button>
|
||
<span class="marginnote-panel">
|
||
<span class="mn-label">Craft Note · Final Line</span>
|
||
<span class="panel-body">He asks the question she has been living for years. His phrasing — "have we met before?" — is the most ordinary of social pleasantries, but landed here it carries everything. For her, the answer is yes, in a hundred dreams across a decade. For him, it's a genuine question, perhaps carrying the same uncanny sense of familiarity she has always felt. The story ends without answering it. The answer is the entire story you have just read.</span>
|
||
</span>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div><!-- /tab-story -->
|
||
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
TAB 2: THE CHARACTER
|
||
══════════════════════════════════════════════════════ -->
|
||
<div id="tab-character" class="tab-content">
|
||
<div class="edu-wrap">
|
||
<h2>The Character</h2>
|
||
<p class="edu-intro">Who she is, what she wants, and what the story argues about the distance between the two</p>
|
||
|
||
<div class="acc-item">
|
||
<button class="acc-trigger" onclick="toggleAcc(this)">
|
||
<span>Who is she? What do we know about her beyond the dreams?</span>
|
||
<span class="acc-arrow">▾</span>
|
||
</button>
|
||
<div class="acc-panel">
|
||
<p>The story tells us precisely what we need to know, in glimpses. She is recognisably famous or prominent — people with cameras recognise her on the street, she attends galas and Michelin-star restaurants as obligations rather than treats, she eventually becomes "successful and wealthy, well read and well-travelled." She has a close friend who knows her well enough to handle her seriously when she finally stops laughing.</p>
|
||
<p>More revealingly: she thinks about other people's inner lives while walking past them. She slows at a second-hand bookshop and can imagine the smell. She feels the weight of hurting people acutely enough that she walks past her own desires rather than cause inconvenience. She is, in the story's own terms, someone who "fits" — and who has not, yet, found anyone she fits with in the waking world. The dream man is not simply romantic projection; he represents a self that she is not yet fully living.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="acc-item">
|
||
<button class="acc-trigger" onclick="toggleAcc(this)">
|
||
<span>What is the story actually arguing — is the dream man real, or is he a symptom?</span>
|
||
<span class="acc-arrow">▾</span>
|
||
</button>
|
||
<div class="acc-panel">
|
||
<p>The story holds both possibilities open, honestly. The protagonist herself articulates both: <em>"maybe you're afraid to commit to anyone"</em> and <em>"maybe he's out there, just waiting to meet you."</em> The therapist cannot resolve it. The friend cannot resolve it. The story does not resolve it — until the final line, which resolves it in one direction completely.</p>
|
||
<p>What the story is careful not to do is dismiss the dreams as pure dysfunction. Each real boyfriend is presented as genuinely good — kind, charming, fun, attentive — and she is drawn to them. The dreams do not corrupt her waking relationships by making her dissatisfied; they corrupt them by giving her a standard of <strong>recognition</strong> — of being known, fully, from the first look — that her waking relationships never quite reach. Whether that standard is wisdom or delusion is the story's live question.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="acc-item">
|
||
<button class="acc-trigger" onclick="toggleAcc(this)">
|
||
<span>What does "he would not try to cage you" mean, and why is it the dream's central gift?</span>
|
||
<span class="acc-arrow">▾</span>
|
||
</button>
|
||
<div class="acc-panel">
|
||
<p>In the cliff dream, when the dream man proposes, she looks into his eyes and "knew for a fact that he would not try to cage you." This is the story's most precise statement of what she is looking for — and what she hasn't found.</p>
|
||
<p>The word "cage" is not about control in a simple sense. All three boyfriends presented in the story are affectionate and non-controlling in obvious ways. What the cage describes is more subtle: the way that any sufficiently serious relationship makes demands on who you are and where you go and what you do with your Sunday afternoon. The bookshop she walks past. The picnic at a place she already dreamed. The proposal she cannot accept. Each waking relationship asks her to become a slightly smaller version of herself. The dream man — whoever he is — promises not to ask that. The story saves the delivery of that promise for last.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="acc-item">
|
||
<button class="acc-trigger" onclick="toggleAcc(this)">
|
||
<span>Why does she walk away from the restaurant proposal, and is it the right decision?</span>
|
||
<span class="acc-arrow">▾</span>
|
||
</button>
|
||
<div class="acc-panel">
|
||
<p>The story is quietly unflinching about the cost of her choice. Her boyfriend is left "shattered, on the floor of a posh restaurant." She cannot give him a reason. He has done nothing wrong. The story doesn't sentimentalise this: it is a genuine harm done to a real person who deserved better, and she carries the unanswerability of his "why?" for years afterwards.</p>
|
||
<p>Whether it was the right decision depends on what you believe the story is arguing. If the dreams are a symptom — fear of commitment, anxiety about intimacy — then walking away was damage disguised as principle, and the story is a cautionary tale. If the dreams are preparation — her subconscious knowing before she does who she is waiting for — then walking away was the only honest thing she could have done. The final line makes the case for the second reading. But the story has been fair enough to the first that the reader's own beliefs about such things will likely determine which reading they leave with.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div><!-- /tab-character -->
|
||
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
TAB 3: THE CRAFT
|
||
══════════════════════════════════════════════════════ -->
|
||
<div id="tab-craft" class="tab-content">
|
||
<div class="edu-wrap">
|
||
<h2>The Craft</h2>
|
||
<p class="edu-intro">Formal choices, genre tradition, and what the second-person does to a love story</p>
|
||
|
||
<div class="acc-item">
|
||
<button class="acc-trigger" onclick="toggleAcc(this)">
|
||
<span>Second-person narration: why use it, and what does it cost?</span>
|
||
<span class="acc-arrow">▾</span>
|
||
</button>
|
||
<div class="acc-panel">
|
||
<p>Second-person fiction addresses the reader as "you" — a rare and committed formal choice. In literary fiction it appears in works like Jay McInerney's <em>Bright Lights, Big City</em> (1984) and Mohsin Hamid's <em>How to Get Filthy Rich in Rising Asia</em> (2013); in shorter form, it is more common, often used for precisely the effect it achieves here: a dreamlike intimacy, a blurring of the line between the protagonist's experience and the reader's.</p>
|
||
<p>The choice is particularly apt for a story about <strong>not being fully present in your own life</strong>. "You" are the subject, but the narrator seems to be watching you from a slight remove — observing what you do, what you feel, what you hope for. The pronoun creates a protagonist who is simultaneously the subject and the observed. It mirrors the experience of dreaming: you are in the dream, and the dream is also happening to you.</p>
|
||
<p>The cost: second-person can feel mannered or distancing if the character's specificity fades. This story earns it by keeping the details granular — the chocolate milk, the Nutella, the exact weeping willow — so that "you" feels like a particular person, not a generic one.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="acc-item">
|
||
<button class="acc-trigger" onclick="toggleAcc(this)">
|
||
<span>How does the story structure time, and what does compression do?</span>
|
||
<span class="acc-arrow">▾</span>
|
||
</button>
|
||
<div class="acc-panel">
|
||
<p>The story spans roughly a decade — from the first dream we witness to the final meeting — but moves unevenly through it. Some scenes are rendered in real time (the bookshop, the restaurant, the picnic). Others are compressed into summary sentences: <em>"As the months pass,"</em> <em>"Three years pass without a single dream of him."</em></p>
|
||
<p>That line — "Three years pass without a single dream of him" — is the story's most audacious compression: an entire period of her life, including the grief of losing the dreams, reduced to nine words and a paragraph break. The compression is felt as a held breath. The white space after it is the three years. Then the after-party begins, and time slows back down to real-time for the arrival.</p>
|
||
<p>This technique — dilating time for charged moments, collapsing it for the stretches between — is how the story makes ten years feel like a Sunday afternoon: you are always in the significant moments; the rest is travelling.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="acc-item">
|
||
<button class="acc-trigger" onclick="toggleAcc(this)">
|
||
<span>What tradition is this story working within?</span>
|
||
<span class="acc-arrow">▾</span>
|
||
</button>
|
||
<div class="acc-panel">
|
||
<p>The story belongs to the tradition of <strong>romantic literary fiction exploring prescience and recognition</strong> — the feeling that someone is already known to you before you have met them. This is ancient territory: Plato's <em>Symposium</em> contains the myth of split humans searching for their other halves; Romantic poetry made it central (Keats's <em>La Belle Dame Sans Merci</em>, in which a dream woman destroys real relationships, is a darker cousin). In 20th-century fiction it appears in everything from du Maurier's <em>Rebecca</em> to García Márquez's <em>Love in the Time of Cholera</em>.</p>
|
||
<p>What the story does that is distinctly contemporary is hold the psychological and the romantic explanations in genuine tension rather than resolving into one. Earlier traditions tended to endorse the supernatural reading (she is haunted; this is fate) or the psychological one (she is neurotic; this is pathology). This story says: both are available, and the story ends before telling you which to choose. The final line is not resolution — it is the moment the question becomes moot.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="acc-item">
|
||
<button class="acc-trigger" onclick="toggleAcc(this)">
|
||
<span>What does the story refuse to resolve, and why is that refusal meaningful?</span>
|
||
<span class="acc-arrow">▾</span>
|
||
</button>
|
||
<div class="acc-panel">
|
||
<p>Three questions the story leaves entirely open: whether the bookshop sighting was real; whether the dream-hauntings were precognitive or psychological; and — most importantly — whether he has been having the same dreams. That last question is implied by the structure of "Have we met before?" but never confirmed. The story ends at the threshold of knowledge.</p>
|
||
<p>This restraint is the story's greatest formal achievement. A lesser version would end with him saying "I've been dreaming of you" — which would confirm the supernatural reading, resolve the tension, and reduce the story to wish-fulfilment. Instead it ends with the most ordinary of social phrases landing with the weight of a decade. The reader is left in exactly her position: standing at a table, looking at green eyes, knowing something enormous is happening, not yet knowing what it means. The experience of reading the ending is the experience of living it.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div><!-- /tab-craft -->
|
||
|
||
|
||
<!-- ══════════════════════════════════════════════════════
|
||
TAB 4: FURTHER READING
|
||
══════════════════════════════════════════════════════ -->
|
||
<div id="tab-reading" class="tab-content">
|
||
<div class="edu-wrap">
|
||
<h2>Further Reading</h2>
|
||
<p class="edu-intro">The tradition, the form, and comparative texts worth finding</p>
|
||
<div class="reading-section">
|
||
|
||
<h3>Second-Person Fiction</h3>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Bright_Lights,_Big_City_(novel)" target="_blank">
|
||
<span class="rl-title">Bright Lights, Big City — Jay McInerney (1984)</span>
|
||
<span class="rl-desc">The novel most associated with second-person; its use creates intimacy and self-distance simultaneously.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/How_to_Get_Filthy_Rich_in_Rising_Asia" target="_blank">
|
||
<span class="rl-title">How to Get Filthy Rich in Rising Asia — Mohsin Hamid (2013)</span>
|
||
<span class="rl-desc">A life story told as self-help manual in second person; structurally distant but thematically resonant.</span>
|
||
</a>
|
||
|
||
<h3>Recognition, Longing, and the Dream Other</h3>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Love_in_the_Time_of_Cholera" target="_blank">
|
||
<span class="rl-title">Love in the Time of Cholera — Gabriel García Márquez (1985)</span>
|
||
<span class="rl-desc">A fifty-year longing held against all reason; the most sustained treatment of love as obsession in literary fiction.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/La_Belle_Dame_sans_Merci" target="_blank">
|
||
<span class="rl-title">La Belle Dame Sans Merci — John Keats (1819)</span>
|
||
<span class="rl-desc">A dream woman who destroys real relationships; the Romantic-era precursor to this story's central tension.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Symposium_(Plato)" target="_blank">
|
||
<span class="rl-title">The Symposium — Plato (c. 385 BC)</span>
|
||
<span class="rl-desc">Aristophanes' myth of split humans searching for their other half — the origin of "the one" as a concept.</span>
|
||
</a>
|
||
|
||
<h3>Dreams and Precognition in Fiction</h3>
|
||
<a class="reading-link" href="https://en.wikipedia.org/wiki/Rebecca_(novel)" target="_blank">
|
||
<span class="rl-title">Rebecca — Daphne du Maurier (1938)</span>
|
||
<span class="rl-desc">A woman haunted by someone she never knew; the uncanny presence of an absent person shaping a real life.</span>
|
||
</a>
|
||
|
||
<h3>The Author's Work</h3>
|
||
<a class="reading-link" href="https://renegadestoryteller.tumblr.com/post/84605530778/but-for-a-dream?" target="_blank">
|
||
<span class="rl-title">But For a Dream — original post</span>
|
||
<span class="rl-desc">The original publication, with comments.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://www.youtube.com/watch?v=wGeLoHr_02Y" target="_blank">
|
||
<span class="rl-title">But For a Dream — read aloud (YouTube)</span>
|
||
<span class="rl-desc">The author's reading; hearing the second-person spoken aloud changes the intimacy of the piece considerably.</span>
|
||
</a>
|
||
<a class="reading-link" href="https://renegadestoryteller.tumblr.com" target="_blank">
|
||
<span class="rl-title">Renegade Storyteller — full archive</span>
|
||
<span class="rl-desc">JL's complete body of challenge-response fiction.</span>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div><!-- /tab-reading -->
|
||
|
||
|
||
<!-- ══════════════════════ LIGHTBOXES ══════════════════════ -->
|
||
|
||
<div class="lb-overlay" id="lb-secondperson" onclick="closeLbOnOverlay(event,'lb-secondperson')">
|
||
<div class="lb-box">
|
||
<div class="lb-header">
|
||
<span class="lb-title">The Second Person — Why "You"?</span>
|
||
<button class="lb-close" onclick="closeLightbox('lb-secondperson')">✕</button>
|
||
</div>
|
||
<div class="lb-body">
|
||
<h3>What Second Person Does</h3>
|
||
<p>When a story addresses you directly as "you," it collapses the usual distance between reader and character. Instead of following someone else's experience, you are told that this is happening to <em>you</em> — that you opened the refrigerator, that you felt sick, that you looked into his green eyes. The effect is intimate, slightly disorienting, and dreamlike.</p>
|
||
<h3>Why It Fits This Story</h3>
|
||
<p>A story about being not-quite-present in your own life — dreaming of someone else while living with the person in front of you — benefits enormously from a narrator who seems to be watching you from outside yourself. Second person creates exactly that split: you are the subject of the sentence, but the narrator seems to be observing you, which mirrors the experience of half-waking from a dream and watching yourself return to a life that already feels slightly unreal.</p>
|
||
<h3>The Risk</h3>
|
||
<p>Second person can feel like an affectation if the specificity of the character fades and "you" becomes generic. The story forestalls this with deliberate granular details: the brand of hazelnut spread, the exact height of the willow bough, the thirty tiny diamonds on the ring. "You" is not anyone — she is a very specific person, which makes the "you" feel like trust rather than imposition.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════ JAVASCRIPT ══════════════════════ -->
|
||
<script>
|
||
function switchTab(id, btn) {
|
||
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||
document.getElementById('tab-' + id).classList.add('active');
|
||
btn.classList.add('active');
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
|
||
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');
|
||
}
|
||
}
|
||
|
||
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'));
|
||
}
|
||
});
|
||
|
||
function toggleAcc(btn) {
|
||
const panel = btn.nextElementSibling;
|
||
const isOpen = btn.classList.contains('open');
|
||
document.querySelectorAll('.acc-trigger.open').forEach(b => {
|
||
b.classList.remove('open');
|
||
b.nextElementSibling.classList.remove('open');
|
||
});
|
||
if (!isOpen) { btn.classList.add('open'); panel.classList.add('open'); }
|
||
}
|
||
|
||
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 closeLbOnOverlay(e, id) { if (e.target === document.getElementById(id)) closeLightbox(id); }
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
document.querySelectorAll('.lb-overlay.open').forEach(el => el.classList.remove('open'));
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|