Start with a browser prototype.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Folio — Independent Book Club (Prototype)</title><style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{background-color:#f5f5f5;color:#000000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6}body{display:flex;flex-direction:column;min-height:100vh}a{color:#000000;text-decoration:underline;text-underline-offset:3px}a:hover,a:focus-visible{background-color:#000000;color:#f5f5f5;outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.notice-banner{background-color:#000000;color:#f5f5f5;padding:0.75rem 1.5rem;font-size:0.875rem;text-align:center;font-weight:600}header{border-bottom:2px solid #000000;padding:1.5rem 10%}nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.logo{font-size:1.5rem;font-weight:900;letter-spacing:-0.05em;text-transform:uppercase;text-decoration:none}nav ul{display:flex;list-style:none;gap:1.5rem}nav li a{font-weight:600;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.05em}main{flex:1;padding:3rem 10%}h1,h2,h3{letter-spacing:-0.03em;font-weight:800;line-height:1.2}h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:1rem}h2{font-size:clamp(1.5rem,3.5vw,2.25rem);margin-bottom:1rem;border-bottom:1px solid #000000;padding-bottom:0.5rem}.lead{font-size:1.25rem;max-width:40ch;margin-bottom:2.5rem}.hero{margin-bottom:4rem}section{margin-bottom:4rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}.card{border:2px solid #000000;padding:1.75rem;display:flex;flex-direction:column;justify-content:space-between;background:#f5f5f5}.card-tag{align-self:flex-start;background:#000000;color:#f5f5f5;font-size:0.75rem;font-weight:700;padding:0.2rem 0.5rem;text-transform:uppercase;margin-bottom:1rem}.card h3{margin-bottom:0.5rem}.card p{font-size:0.95rem;margin-bottom:1.5rem}.schedule-list{list-style:none}.schedule-item{border-top:1px solid #000000;padding:1rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem}.schedule-item:last-child{border-bottom:1px solid #000000}.date{font-weight:700;font-variant-numeric:tabular-nums}footer{border-top:2px solid #000000;padding:2rem 10%;text-align:center;font-size:0.875rem}@media (max-width:600px){nav{flex-direction:column;align-items:flex-start}nav ul{flex-direction:column;gap:0.5rem}.schedule-item{flex-direction:column}}</style></head><body><aside class="notice-banner" role="note" aria-label="Prototype notification">[PROTOTYPE] Offline non-functional design test. No data is collected.</aside><header><nav aria-label="Main Navigation"><a href="#" class="logo">Folio Club</a><ul><li><a href="#current">Current Read</a></li><li><a href="#ethos">Ethos</a></li><li><a href="#schedule">Schedule</a></li></ul></nav></header><main><section class="hero"><p class="lead">A disciplined, distraction-free environment dedicated to slow literature and critical discussion.</p><h1>The Books of the Century</h1></section><section id="current" aria-labelledby="current-heading"><h2 id="current-heading">Current Selection</h2><div class="grid"><article class="card"><span class="card-tag">Active Cycle</span><h3>The Trial</h3><p>By Franz Kafka &bull; Chapters 1 through 5 scheduled for this round. Themes explored include bureaucratic dread, existential isolation, and modern alienation.</p><span style="font-weight:700;font-size:0.85rem;">Discussion: Oct 28 &bull; 19:00 EST</span></article><article class="card"><span class="card-tag">Upcoming</span><h3>Invisible Cities</h3><p>By Italo Calvino &bull; An inquiry into structuralist narratives, memory, poetic taxonomy, and post-war Italian modernism.</p><span style="font-weight:700;font-size:0.85rem;">Discussion: Nov 18 &bull; 19:00 EST</span></article></div></section><section id="ethos" aria-labelledby="ethos-heading"><h2 id="ethos-heading">Club Ethos</h2><div class="grid"><div><h3>Physical Copies Only</h3><p>To reduce screen fatigue, we exclusively study printed matter, fostering spatial memory and deliberate pacing.</p></div><div><h3>Open Dialogue</h3><p>Every member delivers one prepared prompt per meeting. Silence is embraced as an active instrument of reflection.</p></div><div><h3>Zero Distraction</h3><p>No recording, no algorithmic feeds, no automated assessments. Strictly text and reader interaction.</p></div></div></section><section id="schedule" aria-labelledby="schedule-heading"><h2 id="schedule-heading">Upcoming Schedule</h2><ul class="schedule-list"><li class="schedule-item"><span class="date">2024-10-28</span><span>The Trial &mdash; Part I (pp. 1–110)</span><span>Host: A. Miller</span></li><li class="schedule-item"><span class="date">2024-11-04</span><span>The Trial &mdash; Part II (pp. 111–225)</span><span>Host: S. Lin</span></li><li class="schedule-item"><span class="date">2024-11-18</span><span>Invisible Cities &mdash; Full Reading</span><span>Host: E. Rostova</span></li></ul></section></main><footer><p>&copy; 2024 Folio Reading Society. Accessible black &amp; white prototype.</p></footer></body></html>