org_web/play/house.org

#+TITLE: The House of Pages
#+OPTIONS: num:nil title:nil toc:nil
#+NO_SIDENOTES: t
#+DATE: <2026-07-15 Wed>

#+BEGIN_EXPORT html
<main class="play-root play-page house-root" data-play-page="house">
  <a class="play-back" href="/play/play.html">Back to Play</a>

  <header class="play-page-head house-heading">
    <p class="play-kicker">13 / Living archive</p>
    <h1>The House of Pages</h1>
    <p>Every part of the site has found a room. Choose a lit window, follow a familiar passage, and notice the door that is not there yet.</p>
  </header>

  <div class="house-statusbar" aria-live="polite">
    <p data-house-status>Choose a room to begin.</p>
    <button type="button" data-house-reset>Forget my visit</button>
  </div>

  <div class="house-experience">
    <section class="house-illustration" aria-labelledby="house-plan-title">
      <div class="house-roof" aria-hidden="true">
        <span class="house-chimney"></span>
        <span class="house-moon">✦</span>
      </div>
      <div class="house-shell">
        <h2 id="house-plan-title" class="house-visually-hidden">House floor plan</h2>
        <div class="house-floorplan" role="tablist" aria-label="Rooms in the House of Pages">
          <button class="house-room house-room--attic" id="house-tab-attic" type="button" role="tab" aria-selected="false" aria-controls="house-room-panel" data-house-room="attic">
            <span class="house-room__object" aria-hidden="true">▱</span>
            <span class="house-room__name">Attic</span>
            <span class="house-room__hint">Keepsakes</span>
          </button>
          <button class="house-room house-room--study" id="house-tab-study" type="button" role="tab" aria-selected="false" aria-controls="house-room-panel" data-house-room="study">
            <span class="house-room__object" aria-hidden="true">⌘</span>
            <span class="house-room__name">Study</span>
            <span class="house-room__hint">Work</span>
          </button>
          <button class="house-room house-room--library" id="house-tab-library" type="button" role="tab" aria-selected="false" aria-controls="house-room-panel" data-house-room="library">
            <span class="house-room__object" aria-hidden="true">▥</span>
            <span class="house-room__name">Library</span>
            <span class="house-room__hint">Knowledge</span>
          </button>
          <button class="house-room house-room--foyer is-selected" id="house-tab-foyer" type="button" role="tab" aria-selected="true" aria-controls="house-room-panel" data-house-room="foyer">
            <span class="house-room__object" aria-hidden="true">⌂</span>
            <span class="house-room__name">Foyer</span>
            <span class="house-room__hint">Arrivals</span>
          </button>
          <button class="house-room house-room--kitchen" id="house-tab-kitchen" type="button" role="tab" aria-selected="false" aria-controls="house-room-panel" data-house-room="kitchen">
            <span class="house-room__object" aria-hidden="true">♨</span>
            <span class="house-room__name">Kitchen</span>
            <span class="house-room__hint">Daily life</span>
          </button>
          <button class="house-room house-room--workshop" id="house-tab-workshop" type="button" role="tab" aria-selected="false" aria-controls="house-room-panel" data-house-room="workshop">
            <span class="house-room__object" aria-hidden="true">⚙</span>
            <span class="house-room__name">Workshop</span>
            <span class="house-room__hint">Living systems</span>
          </button>
          <button class="house-room house-room--playroom" id="house-tab-playroom" type="button" role="tab" aria-selected="false" aria-controls="house-room-panel" data-house-room="playroom">
            <span class="house-room__object" aria-hidden="true">◇</span>
            <span class="house-room__name">Playroom</span>
            <span class="house-room__hint">Experiments</span>
          </button>
          <button class="house-room house-room--garden" id="house-tab-garden" type="button" role="tab" aria-selected="false" aria-controls="house-room-panel" data-house-room="garden">
            <span class="house-room__object" aria-hidden="true">❧</span>
            <span class="house-room__name">Garden</span>
            <span class="house-room__hint">Notes left outside</span>
          </button>
        </div>
        <div class="house-foundation" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
      </div>

      <div class="house-secret-wrap" role="tablist" aria-label="Discovered rooms">
        <button class="house-secret-door" id="house-tab-archive" type="button" role="tab" aria-selected="false" aria-controls="house-room-panel" data-house-room="archive" hidden>
          <span aria-hidden="true">Ⅸ</span>
          <strong>The Ninth Door</strong>
          <small>The house has remembered you.</small>
        </button>
      </div>
    </section>

    <section class="house-panel" id="house-room-panel" role="tabpanel" aria-labelledby="house-tab-foyer" tabindex="0" data-house-panel>
      <div class="house-panel__window" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
      <p class="house-panel__eyebrow" data-house-eyebrow>Arrivals</p>
      <h2 data-house-title>Foyer</h2>
      <p class="house-panel__description" data-house-description>The front door opens onto the newest corners of the site.</p>
      <p class="house-panel__caption" data-house-caption>A brass key waits in a blue bowl beside the door.</p>

      <div class="house-shelves">
        <div>
          <h3>Kept in this room</h3>
          <ul class="house-link-list" data-house-curated>
            <li><a href="/">Home</a></li>
            <li><a href="/recently-updated.html">Recently updated</a></li>
            <li><a href="/home/contact.html">Contact</a></li>
          </ul>
        </div>
        <div>
          <h3>Found on the shelves</h3>
          <ul class="house-link-list house-link-list--dynamic" data-house-dynamic>
            <li class="house-empty">The shelves are being catalogued…</li>
          </ul>
        </div>
      </div>
    </section>
  </div>

  <details class="house-directory">
    <summary>Plain directory of the house</summary>
    <div class="house-directory__grid">
      <section><h2>Foyer</h2><a href="/">Home</a> · <a href="/recently-updated.html">Recently updated</a> · <a href="/home/contact.html">Contact</a></section>
      <section><h2>Library</h2><a href="/posts/posts-list.html">Posts</a> · <a href="/home/categories.html">Categories</a></section>
      <section><h2>Study</h2><a href="/posts/career/career-list.html">Career</a> · <a href="/home/status.html">Competency status</a></section>
      <section><h2>Kitchen</h2><a href="/blogs/blogs-list.html">Blogs</a> · <a href="/tags/review.html">Weekly reviews</a></section>
      <section><h2>Workshop</h2><a href="/home/services.html">Services</a> · <a href="/home/wird-tracker.html">Wird tracker</a> · <a href="/home/backlog.html">Backlog</a></section>
      <section><h2>Playroom</h2><a href="/play/play.html">Play</a> · <a href="/play/rpg.html">Ash Below the Lake</a></section>
      <section><h2>Attic</h2><a href="/lima/index.html">Lima archive</a> · <a href="/blogs/blogs-list.html">Older writing</a></section>
      <section><h2>Garden</h2><a href="/home/notes.html">Notes wall</a> · <a href="/home/categories.html">Categories</a> · <a href="/sitemap.html">Sitemap</a></section>
    </div>
  </details>

  <noscript><p class="house-noscript">The lamps need JavaScript, but every room remains available in the plain directory above.</p></noscript>
</main>
#+END_EXPORT