diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro
index c101264..48f5725 100644
--- a/src/pages/guestbook.astro
+++ b/src/pages/guestbook.astro
@@ -32,107 +32,114 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
     </header>
 
     <!-- Submission form -->
-    <section class="card form-section" aria-labelledby="form-heading">
-      <h2 id="form-heading">Leave a message</h2>
-      <p class="form-note">
-        Messages are reviewed before being published. Please don't include personal or
-        sensitive information — this is a public guestbook.
-      </p>
+    <section class="card form-section" aria-label="Leave a message">
+      <details class="compose" open={submitted || Boolean(errorMsg)}>
+        <summary class="compose-toggle">
+          <span class="compose-toggle-text">Leave a message</span>
+        </summary>
 
-      {submitted && (
-        <div class="alert alert-success" role="alert">
-          Thank you for your message! It will appear here once reviewed.
-        </div>
-      )}
+        <div class="compose-body">
+          <p class="form-note">
+            Messages are reviewed before being published. Please don't include personal or
+            sensitive information — this is a public guestbook.
+          </p>
 
-      {errorMsg && (
-        <div class="alert alert-error" role="alert">
-          {errorMsg}
-        </div>
-      )}
+          {submitted && (
+            <div class="alert alert-success" role="alert">
+              Thank you for your message! It will appear here once reviewed.
+            </div>
+          )}
 
-      <form
-        method="post"
-        action="/api/guestbook/submit"
-        class="guestbook-form"
-        novalidate
-      >
-        <!-- Honeypot field: hidden from real users, filled by bots -->
-        <div class="hp-field" aria-hidden="true">
-          <label for="address">Address</label>
-          <input
-            type="text"
-            id="address"
-            name="address"
-            tabindex="-1"
-            autocomplete="off"
-          />
-        </div>
+          {errorMsg && (
+            <div class="alert alert-error" role="alert">
+              {errorMsg}
+            </div>
+          )}
 
-        <div class="field">
-          <label for="display_name">
-            Name or nickname <span class="required" aria-label="required">*</span>
-          </label>
-          <input
-            type="text"
-            id="display_name"
-            name="display_name"
-            maxlength="60"
-            required
-            autocomplete="nickname"
-            placeholder="your name or alias"
-          />
-        </div>
+          <form
+            method="post"
+            action="/api/guestbook/submit"
+            class="guestbook-form"
+            novalidate
+          >
+            <!-- Honeypot field: hidden from real users, filled by bots -->
+            <div class="hp-field" aria-hidden="true">
+              <label for="address">Address</label>
+              <input
+                type="text"
+                id="address"
+                name="address"
+                tabindex="-1"
+                autocomplete="off"
+              />
+            </div>
 
-        <div class="field">
-          <label for="message">
-            Message <span class="required" aria-label="required">*</span>
-          </label>
-          <textarea
-            id="message"
-            name="message"
-            maxlength="1000"
-            required
-            rows="4"
-            placeholder="say hello, share a thought, leave a trail..."
-          ></textarea>
-          <span class="field-hint">Plain text only. Max 1000 characters.</span>
-        </div>
+            <div class="field">
+              <label for="display_name">
+                Name or nickname <span class="required" aria-label="required">*</span>
+              </label>
+              <input
+                type="text"
+                id="display_name"
+                name="display_name"
+                maxlength="60"
+                required
+                autocomplete="nickname"
+                placeholder="your name or alias"
+              />
+            </div>
 
-        <div class="field">
-          <label for="website">
-            Website <span class="optional">(optional)</span>
-          </label>
-          <input
-            type="url"
-            id="website"
-            name="website"
-            maxlength="200"
-            autocomplete="url"
-            placeholder="https://your-site.example"
-          />
-          <span class="field-hint">Only https:// links. Leave blank if you don't have one.</span>
-        </div>
+            <div class="field">
+              <label for="message">
+                Message <span class="required" aria-label="required">*</span>
+              </label>
+              <textarea
+                id="message"
+                name="message"
+                maxlength="1000"
+                required
+                rows="4"
+                placeholder="say hello, share a thought, leave a trail..."
+              ></textarea>
+              <span class="field-hint">Plain text only. Max 1000 characters.</span>
+            </div>
 
-        <div class="field consent-field">
-          <label class="consent-label">
-            <input
-              type="checkbox"
-              name="consent"
-              value="yes"
-              required
-            />
-            <span>
-              I understand this message may be published publicly on this guestbook.
-              <span class="required" aria-label="required">*</span>
-            </span>
-          </label>
-        </div>
+            <div class="field">
+              <label for="website">
+                Website <span class="optional">(optional)</span>
+              </label>
+              <input
+                type="url"
+                id="website"
+                name="website"
+                maxlength="200"
+                autocomplete="url"
+                placeholder="https://your-site.example"
+              />
+              <span class="field-hint">Only https:// links. Leave blank if you don't have one.</span>
+            </div>
 
-        <div class="form-actions">
-          <button type="submit" class="btn-submit">send message</button>
+            <div class="field consent-field">
+              <label class="consent-label">
+                <input
+                  type="checkbox"
+                  name="consent"
+                  value="yes"
+                  required
+                />
+                <span>
+                  I understand this message may be published publicly on this guestbook.
+                  <span class="required" aria-label="required">*</span>
+                </span>
+              </label>
+            </div>
+
+            <div class="form-actions">
+              <button type="submit" class="btn-submit">send message</button>
+            </div>
+          </form>
         </div>
-      </form>
+      </details>
     </section>
 
     <!-- Approved entries -->
@@ -245,6 +252,55 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
     margin-bottom: var(--space-md);
   }
 
+  .compose {
+    width: 100%;
+  }
+
+  .compose-toggle {
+    list-style: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-accent-bright);
+    font-size: 1.1rem;
+    font-weight: bold;
+    margin-bottom: var(--space-sm);
+    user-select: none;
+  }
+
+  .compose-toggle::-webkit-details-marker {
+    display: none;
+  }
+
+  .compose-toggle:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  .compose-toggle::before {
+    content: '+';
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2em;
+    height: 1.2em;
+    border: 1px solid var(--color-accent);
+    border-radius: 4px;
+    color: var(--color-accent);
+    font-weight: normal;
+    line-height: 1;
+  }
+
+  .compose[open] .compose-toggle::before {
+    content: '−';
+  }
+
+  .compose-body {
+    margin-top: var(--space-sm);
+  }
+
   .guestbook-form {
     display: flex;
     flex-direction: column;