--- baseline.html
+++ after.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Forma — starting interface</title>
+    <title>Forma | Targeted redesign</title>
     <style>
       * {
         box-sizing: border-box;
@@ -195,22 +195,515 @@
           font-size: 16px;
         }
       }
+
+      * {
+        box-sizing: border-box;
+      }
+      html {
+        color-scheme: light;
+        scroll-behavior: smooth;
+      }
+      body {
+        margin: 0;
+        -webkit-font-smoothing: antialiased;
+      }
+      button,
+      input,
+      summary {
+        font: inherit;
+      }
+      button,
+      summary,
+      a {
+        touch-action: manipulation;
+      }
+      button,
+      summary {
+        cursor: pointer;
+      }
+      button {
+        min-height: 44px;
+      }
+      button:disabled {
+        cursor: default;
+        opacity: 0.55;
+      }
+      a {
+        color: inherit;
+      }
+      button:focus-visible,
+      summary:focus-visible,
+      a:focus-visible,
+      input:focus-visible {
+        outline: 3px solid var(--focus, #245bd6);
+        outline-offset: 4px;
+      }
+      h1,
+      h2,
+      h3,
+      p {
+        margin: 0;
+      }
+      h1,
+      h2,
+      h3 {
+        text-wrap: balance;
+      }
+      p {
+        text-wrap: pretty;
+      }
+      .sr {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+      }
+      .skip {
+        position: absolute;
+        left: 12px;
+        top: -100px;
+        padding: 12px;
+        background: white;
+        z-index: 10;
+      }
+      .skip:focus {
+        top: 12px;
+      }
+      .num {
+        font-variant-numeric: tabular-nums;
+      }
+      .foot {
+        font-size: 12px;
+        line-height: 1.5;
+        padding: 20px 0 12px;
+        color: var(--muted, #58606d);
+      }
+      [hidden] {
+        display: none !important;
+      }
+      summary {
+        list-style: none;
+      }
+      summary::-webkit-details-marker {
+        display: none;
+      }
+      summary:after {
+        content: "+";
+        font-size: 20px;
+        float: right;
+        margin-left: 8px;
+      }
+      details[open] > summary:after {
+        content: "−";
+      }
+      @media (prefers-reduced-motion: reduce) {
+        html {
+          scroll-behavior: auto;
+        }
+        *,
+        *:before,
+        *:after {
+          animation: none !important;
+          transition: none !important;
+        }
+      }
+      body {
+        background: #faf7f2;
+        color: #342a25;
+        font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
+        line-height: 1.5;
+        --muted: #6c5d55;
+        --line: #ded0c5;
+        --paper: #fffdf9;
+        --accent: #8a452e;
+        --focus: #8a452e;
+      }
+      .app {
+        max-width: 1040px;
+        padding: 22px 32px;
+      }
+      header {
+        padding: 0 0 20px;
+        border-radius: 0;
+        background: transparent;
+        border-bottom: 1px solid #ded0c5;
+      }
+      .brand {
+        font-size: 25px;
+        color: #8a452e;
+        letter-spacing: -1px;
+      }
+      nav {
+        color: #6c5d55;
+        font-size: 13px;
+        gap: 20px;
+      }
+      nav a {
+        text-decoration: none;
+        display: flex;
+        min-height: 44px;
+        align-items: center;
+      }
+      nav a[aria-current] {
+        color: var(--accent);
+        font-weight: 600;
+        box-shadow: inset 0 -2px var(--accent);
+      }
+      .welcome {
+        text-align: left;
+        margin: 26px 0 22px;
+        padding-left: 18px;
+        border-left: 3px solid var(--accent);
+      }
+      .welcome small {
+        letter-spacing: 0;
+        color: var(--accent);
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .welcome h1 {
+        font-size: 34px;
+        line-height: 1.2;
+        letter-spacing: -0.8px;
+        color: #342a25;
+        margin: 7px 0;
+      }
+      .welcome p {
+        color: #6c5d55;
+        margin: 0;
+        max-width: 65ch;
+      }
+      .welcome em {
+        font-style: normal;
+        color: inherit;
+        font-family: inherit;
+      }
+      .stats {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1.4fr;
+        gap: 24px;
+        padding: 14px 18px;
+        background: #f0e6dc;
+        border-bottom: 1px solid #ded0c5;
+      }
+      .stat {
+        background: transparent;
+        border: 0;
+        border-radius: 0;
+        text-align: left;
+        padding: 0;
+        font-size: 13px;
+        color: #6c5d55;
+      }
+      .stat strong {
+        display: inline;
+        font-size: 22px;
+        color: #8a452e;
+        font-weight: 600;
+        margin-right: 8px;
+        font-variant-numeric: tabular-nums;
+      }
+      .panel {
+        background: transparent;
+        padding: 0;
+        margin-top: 22px;
+        border-radius: 0;
+      }
+      .inner {
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+      }
+      .topline h2 {
+        color: #342a25;
+        font-size: 19px;
+      }
+      .chip {
+        border-radius: 4px;
+        background: #eee5dc;
+        color: #8a452e;
+        font-size: 11px;
+        padding: 4px 8px;
+        white-space: nowrap;
+      }
+      .progress {
+        height: 6px;
+        overflow: hidden;
+        background: #e5d8cc;
+        margin-top: 14px;
+      }
+      .progress span {
+        background: #a85739;
+      }
+      .tasks {
+        margin-top: 8px;
+      }
+      .task {
+        padding: 16px 0;
+        grid-template-columns: minmax(0, 1fr) 100px 100px;
+        color: #342a25;
+        border-top: 1px solid #e5d8cc;
+      }
+      .task:first-child {
+        border-top: 0;
+      }
+      .task > span:first-child,
+      .task .name {
+        font-weight: 600;
+      }
+      .task > span:nth-child(2),
+      .task summary > span:nth-child(2) {
+        color: var(--muted);
+      }
+      .task:first-child .chip {
+        color: #7c3622;
+        background: #f3e1d5;
+      }
+      .task:has(details) {
+        margin: 0 -12px;
+        padding-right: 12px;
+        padding-left: 9px;
+        background: #f3e4dc;
+        border-left: 3px solid var(--accent);
+      }
+      .dot {
+        color: #7c3622;
+        font-size: 12px;
+        font-weight: 600;
+        border: 1px solid #aa6951;
+        border-radius: 4px;
+        padding: 4px 8px;
+      }
+      .blocked-detail {
+        font-size: 12px;
+        color: #6c5d55;
+        display: block;
+        margin-top: 3px;
+      }
+      .actions {
+        justify-content: flex-start;
+        margin-top: 18px;
+        gap: 20px;
+      }
+      button {
+        border-radius: 6px;
+        background: #8a452e;
+        color: #fff;
+        min-height: 44px;
+        padding: 10px 18px;
+        font-weight: 600;
+        transition:
+          background-color 200ms ease,
+          transform 150ms ease;
+      }
+      .secondary {
+        background: transparent;
+        color: #8a452e;
+        padding: 10px 0;
+        border-radius: 0;
+        text-decoration: underline;
+        text-underline-offset: 4px;
+      }
+      .note {
+        font-size: 13px;
+        color: #6c5d55;
+        text-align: left;
+        margin-top: 16px;
+      }
+      .actions button:active {
+        transform: scale(0.98);
+      }
+      .task details {
+        grid-column: 1/-1;
+      }
+      .task details summary {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 100px 100px;
+        gap: 10px;
+        min-height: 44px;
+        align-items: center;
+      }
+      .task details summary:after {
+        display: none;
+      }
+      .task details summary .name:after {
+        content: " +";
+        font-weight: 400;
+      }
+      .task details[open] summary .name:after {
+        content: " −";
+      }
+      @media (hover: hover) and (pointer: fine) {
+        button:hover {
+          background: #713722;
+        }
+        .secondary:hover {
+          background: transparent;
+          color: #713722;
+        }
+        .plain:hover {
+          color: #fff;
+        }
+        .task details summary:hover .name {
+          text-decoration: underline;
+          text-underline-offset: 4px;
+        }
+      }
+      @media (max-width: 600px) {
+        .app {
+          padding: 16px 20px;
+        }
+        nav {
+          gap: 12px;
+          font-size: 12px;
+        }
+        .welcome {
+          margin: 22px 0 20px;
+        }
+        .welcome h1 {
+          font-size: 28px;
+        }
+        .stats {
+          gap: 12px;
+          padding: 13px 14px;
+          grid-template-columns: 1fr 1fr;
+        }
+        .stat {
+          font-size: 12px;
+        }
+        .stat:nth-child(3) {
+          grid-column: 1/-1;
+          display: flex;
+          align-items: baseline;
+        }
+        .stat strong {
+          font-size: 18px;
+        }
+        .panel {
+          margin-top: 18px;
+        }
+        .task,
+        .task details summary {
+          grid-template-columns: minmax(0, 1fr) 46px 78px;
+          font-size: 12px;
+          gap: 8px;
+        }
+        .chip {
+          font-size: 10px;
+          padding: 3px 5px;
+        }
+        .topline h2 {
+          font-size: 18px;
+        }
+        .actions {
+          gap: 16px;
+        }
+        .actions button {
+          font-size: 13px;
+        }
+        .note {
+          font-size: 12px;
+        }
+        .task {
+          padding: 14px 0;
+        }
+        .task:has(details) {
+          margin: 0 -8px;
+          padding-right: 8px;
+          padding-left: 5px;
+        }
+        .dot {
+          font-size: 11px;
+          padding: 3px 5px;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .actions button:active {
+          transform: none;
+        }
+      }
+      .prep {
+        margin-top: 20px;
+        padding: 24px;
+        background: var(--paper, #fff);
+        border: 1px solid var(--line, #d9dfe8);
+        border-radius: 8px;
+      }
+      .prep h2 {
+        font-size: 20px;
+        margin-bottom: 8px;
+      }
+      .prep p,
+      .prep li {
+        font-size: 14px;
+        line-height: 1.6;
+      }
+      .prep ul {
+        padding-left: 20px;
+      }
+      .prep .local {
+        font-size: 12px;
+        margin-top: 10px;
+        color: var(--muted, #58606d);
+      }
+      .plain {
+        background: transparent;
+        color: inherit;
+        border: 1px solid currentColor;
+        padding: 9px 14px;
+        border-radius: 5px;
+      }
+      .btn {
+        padding: 12px 20px;
+        border: 0;
+        border-radius: 6px;
+        white-space: nowrap;
+        font-weight: 600;
+      }
+      .text-btn {
+        background: transparent;
+        border: 0;
+        padding: 12px 0;
+        text-decoration: underline;
+        text-underline-offset: 4px;
+      }
+      .detail {
+        font-size: 14px;
+        line-height: 1.6;
+        padding: 10px 0;
+      }
+      .task-title {
+        font-weight: 600;
+      }
+      .status {
+        white-space: nowrap;
+        font-size: 12px;
+      }
+      .person {
+        font-size: 13px;
+        color: var(--muted, #58606d);
+      }
     </style>
   </head>
   <body>
-    <div class="app">
+    <a class="skip" href="#main">Skip to project</a>
+    <main class="app" id="main">
       <header>
         <span class="brand">forma.</span>
-        <nav><span>Overview</span><span>Projects</span><span>Team</span></nav>
+        <nav aria-label="Project">
+          <a href="#main" aria-current="page">Overview</a
+          ><a href="#work-items">Tasks</a>
+        </nav>
         <span>MA</span>
       </header>
       <section class="welcome">
-        <small>YOUR PRODUCTIVITY, REIMAGINED</small>
-        <h1>Make room for <em>great work.</em></h1>
-        <p>Everything you need, all in one place.</p>
+        <small>Weekly overview</small>
+        <h1>Make the next decision.</h1>
+        <p>Approve the homepage direction before the client review.</p>
       </section>
       <div class="stats">
-        <div class="stat"><strong>60%</strong>Complete</div>
+        <div class="stat"><strong>6 / 10</strong>Tasks complete</div>
         <div class="stat"><strong>1</strong>Blocked item</div>
         <div class="stat"><strong>Friday</strong>10:00 client review</div>
       </div>
@@ -221,14 +714,21 @@
             <span class="chip">ACTIVE PROJECT</span>
           </div>
           <div class="progress"><span></span></div>
-          <div class="tasks">
+          <div class="tasks" id="work-items" tabindex="-1">
             <div class="task">
               <span>Homepage direction</span><span>Maya</span
               ><span class="chip">In review</span>
             </div>
             <div class="task">
-              <span>Mobile navigation</span><span>Alex</span
-              ><span class="dot">● Blocked</span>
+              <details>
+                <summary>
+                  <span class="name">Mobile navigation</span><span>Alex</span
+                  ><span class="dot">Blocked</span>
+                </summary>
+                <p class="detail">
+                  Awaiting content. Alex needs the content to continue.
+                </p>
+              </details>
             </div>
             <div class="task">
               <span>Project case study</span><span>Sam</span
@@ -238,26 +738,54 @@
         </div>
       </div>
       <div class="actions">
-        <button
-          onclick="
-            document.querySelector('.note').textContent =
-              'Prepare the client review. Approve the homepage direction first.'
-          "
-        >
-          Get started</button
-        ><button
-          class="secondary"
-          onclick="
-            document.querySelector('.note').textContent =
-              'All three work items are shown above.'
-          "
-        >
-          Learn more
-        </button>
+        <button data-prepare>Prepare review</button
+        ><button class="secondary" data-all>View all tasks</button>
       </div>
       <p class="note">
         6 of 10 tasks complete. Next decision: approve the homepage direction.
       </p>
-    </div>
+      <section class="prep" id="review-brief" hidden tabindex="-1">
+        <h2>Review preparation</h2>
+        <p>Friday, 10:00 · Studio website</p>
+        <ul>
+          <li>Approve the homepage direction with Maya.</li>
+          <li>Confirm the content Alex needs for mobile navigation.</li>
+          <li>Include Sam’s project case study in progress.</li>
+        </ul>
+        <button type="button" class="plain" data-close>
+          Close preparation
+        </button>
+        <p class="local">Local draft only. Nothing has been sent.</p>
+      </section>
+    </main>
+    <script>
+      const prep = document.getElementById("review-brief");
+      let returnTo;
+      document.querySelectorAll("[data-prepare]").forEach((b) =>
+        b.addEventListener("click", () => {
+          returnTo = b;
+          prep.hidden = false;
+          prep.focus({ preventScroll: true });
+          prep.scrollIntoView({ block: "nearest" });
+        }),
+      );
+      document.querySelector("[data-close]")?.addEventListener("click", () => {
+        prep.hidden = true;
+        returnTo?.focus();
+      });
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && prep && !prep.hidden) {
+          prep.hidden = true;
+          returnTo?.focus();
+        }
+      });
+      document.querySelectorAll("[data-all]").forEach((b) =>
+        b.addEventListener("click", () => {
+          const t = document.getElementById("work-items");
+          t.focus({ preventScroll: true });
+          t.scrollIntoView({ block: "nearest" });
+        }),
+      );
+    </script>
   </body>
 </html>