diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 4711ea25d..3dbe697a3 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -19,6 +19,17 @@
   --text-x-large: 1.8rem;
   --text-xx-large: 2.5rem;
 
+  /* Borders */
+  --border: 1px solid var(--color-subtle);
+
+  /* Shadows */
+  --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.02),
+            0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
+            0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
+            0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
+            0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
+            0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
+
   /* Components */
   --btn-size: 2.65em;
 
@@ -75,5 +86,12 @@
     --lch-green-light: 28.11% 0.02 142.49;
     --lch-yellow: 40.9% 0.06 88.9;
     --lch-light-blue: 20.62% 0.048 216.62;
+
+    --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.42),
+              0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
+              0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
+              0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
+              0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
+              0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
   }
 }
diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css
index c5ee440d7..a55112b8c 100644
--- a/app/assets/stylesheets/avatars.css
+++ b/app/assets/stylesheets/avatars.css
@@ -3,6 +3,7 @@
     --avatar-border-radius: 50%;
 
     aspect-ratio: 1;
+    block-size: var(--avatar-size, 5ch);
     border-radius: var(--avatar-border-radius);
     display: grid;
     inline-size: var(--avatar-size, 5ch);
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 693ba2429..210c81bd7 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -109,7 +109,7 @@
         display: none;
       }
     }
-    
+
     &:has(input:checked)  {
       --btn-background: var(--color-ink);
       --btn-color: var(--color-ink-reversed);
@@ -201,17 +201,17 @@
     }
 
     :first-of-type .btn {
-      border-bottom-left-radius: 2em;
+      border-end-start-radius: 2em;
       border-inline-end: 0;
-      border-top-left-radius: 2em;
+      border-start-start-radius: 2em;
       flex: 1 0 50%;
       padding-inline-end: 0.8em;
     }
 
     :last-of-type .btn {
-      border-bottom-right-radius: 2em;
+      border-end-end-radius: 2em;
       border-inline-start: 0;
-      border-top-right-radius: 2em;
+      border-start-end-radius: 2em;
       flex: 1 0 50%;
       padding-inline-start: 0.8em;
     }
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
new file mode 100644
index 000000000..022201a26
--- /dev/null
+++ b/app/assets/stylesheets/card-columns.css
@@ -0,0 +1,142 @@
+@layer components {
+  /* Coluns
+  /* -------------------------------------------------------------------------- */
+
+  /* Card contents are resized via container queries. We're using #main here as
+     the primary container so all cards have the same container reference */
+  #main:has(.card-columns) {
+    container-type: inline-size;
+    max-inline-size: 1400px;
+  }
+
+  .card-columns {
+    border-block-start: 1px solid var(--color-subtle);
+    display: grid;
+    grid-template-columns: repeat(2, 50%);
+    margin: auto;
+    max-inline-size: 1080px;
+
+    .cards:first-child {
+      border-inline-end: var(--border);
+      padding-inline-end: var(--cards-gap);
+    }
+
+    .cards:last-child {
+      padding-inline-start: var(--cards-gap);
+    }
+  }
+
+  /* Cards
+  /* -------------------------------------------------------------------------- */
+
+  .cards {
+    --cards-gap: 2cqi;
+
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cards-gap);
+    justify-content: start;
+    padding-block: var(--cards-gap);
+
+    .card {
+      --block-space: 1em;
+      --block-space-half: 0.5em;
+      --text-xx-large: 2em;
+
+      /* Set lower limit for font size */
+      font-size: clamp(0.45rem, 0.85cqi, 100px);
+    }
+
+    .card__title {
+      pointer-events: none;
+    }
+
+    .card__link {
+      z-index: 1;
+    }
+
+    .card__hide-on-index {
+      display: none;
+    }
+  }
+
+  .cards__heading {
+    display: inline-flex;
+    font-size: var(--text-medium);
+    inline-size: 100%;
+    justify-content: center;
+    text-transform: uppercase;
+  }
+
+  /* Considering
+  /* ------------------------------------------------------------------------ */
+
+  .cards--considering {
+    .card {
+      --text-xx-large: 1.6em;
+      --text-small: 1.1em;
+
+      background-color: var(--color-bg);
+      box-shadow: 0 0 0 1px var(--color-subtle);
+      line-height: 1.2;
+
+      @media (prefers-color-scheme: dark) {
+        box-shadow: 0 0 0 1px var(--color-subtle-dark);
+      }
+
+      .avatar {
+        block-size: 2.75em;
+        inline-size: 2.75em;
+      }
+    }
+
+    .card--drafted {
+      --card-color: var(--color-subtle-dark) !important;
+
+      border-color: var(--card-color) !important;
+      border-style: dashed !important;
+    }
+
+    .card__background {
+      display: none;
+    }
+
+    .card__title {
+      margin-block-start: 0.1em;
+      min-block-size: 0;
+    }
+
+    .card__people-label {
+      display: none;
+    }
+
+    .card__body {
+      padding-inline: 0;
+    }
+
+    .card__tags {
+      font-size: var(--text-small);
+    }
+  }
+
+  /* Closed
+  /* -------------------------------------------------------------------------- */
+
+  .cards--closed {
+    border-block-start: 1px solid var(--color-subtle);
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    inline-size: 100%;
+    margin: 0 auto;
+
+    .card {
+      inline-size: calc((100% - var(--cards-gap) * 2) / 3);
+
+      @media (max-width: 960px) {
+        inline-size: calc((100% - var(--cards-gap)) / 2);
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/card-filters.css b/app/assets/stylesheets/card-filters.css
new file mode 100644
index 000000000..5f2e3817e
--- /dev/null
+++ b/app/assets/stylesheets/card-filters.css
@@ -0,0 +1,40 @@
+@layer components {
+  .card-filter--collection {
+    > button {
+      --hover-size: 0;
+    }
+  }
+
+  .card-filter--column {
+    > button {
+      --hover-size: 0;
+
+      inline-size: auto;
+      padding: 0 2em 0 0;
+      margin-inline-start: 2em;
+    }
+  }
+
+  .card-filter--sorting {
+    inset: auto 50% -4em;
+    margin-inline-start: -1em;
+    position: absolute;
+    transform: translateX(-50%);
+
+    #header:has(&) {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .card-count__selector {
+    inset: 0.5cqi 0.5cqi auto auto;
+    position: absolute;
+    text-align: start;
+    z-index: 1;
+
+    .popup {
+      inset: 1em 1em auto auto;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
new file mode 100644
index 000000000..3b64b2200
--- /dev/null
+++ b/app/assets/stylesheets/card-perma.css
@@ -0,0 +1,153 @@
+/* Card container for the perma. Tools and actions and whatnot */
+
+@layer components {
+  .card-perma {
+    --actions-block-inset: 1.5rem;
+    --actions-inline-inset: 4rem;
+    --color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
+    --padding-inline: calc(var(--block-space-double) + var(--block-space));
+    --padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half));
+
+    align-items: start;
+    column-gap: var(--inline-space);
+    display: grid;
+    grid-template-areas:
+      "qw notch-top we"
+      "actions-left card actions-right"
+      "er notch-bottom rt";
+    grid-template-columns: 48px minmax(0, 960px) 48px;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    margin-inline: auto;
+
+    &:has(.card-perma__star-input:checked) {
+      .card {
+        outline: 4px solid var(--color-negative);
+      }
+    }
+
+    .card {
+      --card-aspect-ratio: 2 / 0.95;
+
+      border: none;
+    }
+  }
+
+  /* Children
+  /* ------------------------------------------------------------------------ */
+
+  .card-perma__bg {
+    background-color: var(--color-container);
+    border-radius: 0.2em;
+    grid-area: card;
+    padding: var(--padding-block) var(--padding-inline);
+  }
+
+  .card-perma__actions {
+    display: grid;
+    gap: var(--block-space-half);
+
+    &:has([open]) {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .card-perma__actions--left { grid-area: actions-left; }
+  .card-perma__actions--right { grid-area: actions-right; }
+
+  /* Notches
+  /* -------------------------------------------------------------------------- */
+
+  .card-perma__notch {
+    --card-notch-padding: 0.5ch;
+    --border-radius: 1em;
+
+    align-items: center;
+    background-color: var(--color-bg);
+    border-radius: 99rem;
+    color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    display: inline-flex;
+    inline-size: auto;
+    gap: var(--inline-space);
+    justify-content: center;
+    margin-inline: auto;
+    position: relative;
+    text-align: center;
+    z-index: 0;
+  }
+
+  .card-perma__notch--top {
+    grid-area: notch-top;
+    inset-inline-start: 50%;
+    min-inline-size: 36ch;
+    position: absolute;
+    translate: -50% -50%;
+
+    .btn {
+      --btn-border-color: var(--card-color);
+      --btn-color: var(--card-color);
+
+      text-align: center;
+
+      &:has(input:checked)  {
+        --btn-background: var(--card-color);
+        --btn-color: var(--color-ink-reversed);
+      }
+    }
+  }
+
+  .card-perma__notch--bottom {
+    grid-area: notch-bottom;
+    padding: calc(var(--block-space) * 0.75) calc(var(--block-space) * 0.66);
+    translate: 0 -50%;
+
+    &:has([open]) {
+      z-index: 1;
+    }
+
+    .btn:not(.popup__item, .btn--plain) {
+      --btn-background: var(--card-color);
+      --btn-color: var(--color-ink-reversed);
+    }
+
+    .btn--plain {
+      --btn-color: var(--card-color);
+
+      text-decoration: underline;
+    }
+  }
+
+  .card-perma__closure-message {
+    color: var(--card-color);
+
+    &:first-child {
+      padding-left: 1ch;
+    }
+  }
+
+  /* Variants
+  /* ------------------------------------------------------------------------ */
+
+  .card-perma--pointing {
+    --arrow-size: 20em;
+    --aspect-ratio: 7;
+
+    position: relative;
+    margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio));
+
+    &::after {
+      aspect-ratio: var(--aspect-ratio);
+      background-color: var(--color-container);
+      clip-path: polygon(50% 100%, 100% 0, 0 0);
+      inline-size: var(--arrow-size);
+      content: "";
+      display: block;
+      inset-block-start: 99%;
+      inset-inline-start: 50%;
+      position: absolute;
+      transform: translateX(-50%);
+      z-index: -1;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 8f0e2ee10..6f869df5c 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -1,106 +1,30 @@
 @layer components {
-  .cards {
-    --block-space: 2cqi;
-    --container-gap: var(--block-space);
-    --container-padding: calc(var(--block-space) * 1.5);
-
-    container-type: inline-size;
-    padding: var(--block-space-half) 0;
-    justify-content: start;
-
-    :where(.card) {
-      --block-space: 1em;
-      --block-space-half: 0.5em;
-      --card-size: calc(100% - (var(--container-padding) * 2) / 2);
-      --text-xx-large: 2em;
-
-      font-size: 1.8cqi;
-      flex: 0 1 var(--card-size);
-      inline-size: var(--card-size);
-      margin: var(--block-space) auto calc(var(--block-space) * 1.5);
-    }
-
-    :is(.card--mini) {
-      --text-xx-large: 1.6em;
-      --text-small: 1.1em;
-
-      aspect-ratio: unset;
-      border: 1px solid var(--color-subtle) !important;
-      line-height: 1.2;
-      padding: 0;
-      margin: var(--block-space) auto calc(var(--block-space) * 1.5);
-
-      @media (prefers-color-scheme: dark) {
-        border-color: var(--color-subtle-dark) !important;
-      }
-
-      .card__title {
-        margin-block-start: 0.1em;
-        min-block-size: 0;
-      }
-
-      .card__body {
-        padding-inline: 0;
-
-        .card--mini & {
-          padding: 0 var(--inline-space-double) var(--block-space);
-        }
-      }
-
-      .card__tags {
-        font-size: var(--text-small);
-      }
-
-      &:is(.card--drafted) {
-        --card-color: var(--color-subtle-dark) !important;
-
-        border-color: var(--card-color) !important;
-        border-style: dashed !important;
-      }
-    }
-  }
-
-  .cards--columns {
-    border-block: 1px solid var(--color-subtle);
-    display: grid;
-    grid-template-columns: repeat(2, 50%);
-    margin: auto;
-    max-inline-size: 100ch;
-    padding-block: var(--block-space-half);
-
-    .card {
-      aspect-ratio: unset;
-      z-index: unset;
-    }
-  }
-
   .card {
+    --card-padding-inline: var(--inline-space-double);
+    --card-padding-block: var(--block-space);
     --border-color: transparent;
     --border-radius: 0.2em;
     --border-size: 0;
 
-    aspect-ratio: 2/0.95;
+    aspect-ratio: var(--card-aspect-ratio, auto);
     background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
+    border-radius: 0.5em;
+    box-shadow: var(--shadow);
     color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-    max-inline-size: 75ch;
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    padding: var(--card-padding-block) var(--card-padding-inline);
+    position: relative;
+    text-align: start;
     z-index: 1;
 
-    .card__container & {
-      inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2);
-    }
-
-    .local-time-value {
-      font-weight: bold;
-    }
-
     .avatar {
-      block-size: 2.75em;
-      inline-size: 2.75em;
+      --avatar-size: 2.75em;
     }
 
     @media (prefers-color-scheme: dark) {
       --border-color: var(--color-subtle-dark);
-      --border-size: 1px;
     }
   }
 
@@ -115,79 +39,6 @@
     outline: 1px solid var(--color-golden);
   }
 
-  .card__actions {
-    position: absolute;
-    inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1);
-    z-index: 0;
-
-    &:has(dialog[open]) {
-      z-index: 1;
-    }
-  }
-
-  .card__actions--right {
-    inset: var(--actions-block-inset) calc(var(--actions-inline-inset) * -1) auto auto;
-  }
-
-  .card__actions-container {
-    --border-radius: 6em;
-
-    background-color: var(--color-bg);
-    color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-    margin-block: calc(var(--block-space) * -1.66) calc(var(--block-space) * 1.66);
-    padding: calc(var(--block-space) * 0.75) calc(var(--block-space) * 0.66);
-    position: relative;
-    z-index: 0;
-
-    &:has([open]) {
-      z-index: 1;
-    }
-
-    .btn:not(.popup__item, .btn--plain, :has(input[type="radio"])) {
-      --btn-background: var(--card-color);
-      --btn-color: var(--color-ink-reversed);
-    }
-
-    .btn--plain {
-      --btn-color: var(--card-color);
-
-      text-decoration: underline;
-    }
-
-    .card__closure-message {
-      color: var(--card-color);
-    }
-
-    &.card__actions-container--top {
-      margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66);
-      min-inline-size: 28ch;
-      padding: 0;
-
-      #header:has(&) {
-        position: relative;
-        z-index: 1;
-      }
-
-      .btn {
-        --btn-border-color: var(--card-color);
-        --btn-color: var(--card-color);
-
-        text-align: center;
-
-        &:has(input:checked)  {
-          --btn-background: var(--card-color);
-          --btn-color: var(--color-ink-reversed);
-        }
-      }
-    }
-  }
-
-  .cards .card__assignees:not(:has(.avatar)) {
-    .txt-uppercase {
-      display: none;
-    }
-  }
-
   .card__background {
     inset: 0;
     position: absolute;
@@ -211,180 +62,6 @@
     }
   }
 
-  .card__body {
-    padding-inline: var(--inline-space-double);
-  }
-
-  .card__body-header {
-    flex: 2 1 75%;
-    padding-block: var(--block-space);
-  }
-
-  .card__collection {
-    background-color: var(--card-color);
-    font-weight: 800;
-    letter-spacing: 0.5ch;
-    padding: var(--block-space-half) var(--inline-space-double);
-  }
-
-  .card-collection__filter {
-    > button {
-      --hover-size: 0;
-    }
-  }
-
-  .card-column__filter {
-    > button {
-      --hover-size: 0;
-
-      inline-size: auto;
-      padding: 0 2em 0 0;
-      margin-inline-start: 2em;
-    }
-  }
-
-  .card-sorting__filter {
-    inset: auto 50% calc(var(--btn-size) * -0.66);
-    margin-inline-start: -1em;
-    position: absolute;
-    transform: translate(-50%, 50%);
-
-    #header:has(&) {
-      position: relative;
-      z-index: 1;
-    }
-  }
-
-  .card__container {
-    --actions-block-inset: 1.5rem;
-    --actions-inline-inset: 4rem;
-    --padding-inline: calc(var(--block-space-double) + var(--block-space));
-    --padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half));
-
-    background-color: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
-    border-radius: 0.2em;
-    display: inline-flex;
-    margin-block: calc(var(--block-space) * -1) calc(var(--block-space) * -0.33);
-    padding: var(--padding-block) var(--padding-inline);
-  }
-
-  .card__container--pointing {
-    --arrow-size: 20em;
-    --aspect-ratio: 7;
-
-    position: relative;
-    margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio));
-
-    &::after {
-      aspect-ratio: var(--aspect-ratio);
-      background: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
-      clip-path: polygon(50% 100%, 100% 0, 0 0);
-      inline-size: var(--arrow-size);
-      content: "";
-      display: block;
-      inset-block-start: 99%;
-      inset-inline-start: 50%;
-      position: absolute;
-      transform: translateX(-50%);
-      z-index: -1;
-    }
-  }
-
-  .card__delete-btn {
-    .cards & {
-      display: none;
-    }
-  }
-
-  .card__footer {
-    margin-block-end: var(--block-space);
-  }
-
-  .cards--grid {
-    --block-space: 2cqi;
-    --container-gap: var(--block-space-double);
-    --container-padding: calc(var(--block-space) * 1.5);
-
-    container-type: inline-size;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--container-gap);
-    inline-size: 100%;
-    margin: 0 auto;
-    max-inline-size: 120ch;
-    padding: var(--container-padding);
-    place-content: center;
-    position: relative;
-    z-index: 0;
-
-    .card {
-      --block-space: 1em;
-      --block-space-half: 0.5em;
-      --card-size: calc(100% - (var(--container-padding) * 2) / 2);
-      --text-xx-large: 1.8em;
-
-      block-size: 50%;
-      font-size: 3cqi;
-      flex: 0 0 var(--card-size);
-      inline-size: var(--card-size);
-      z-index: 0;
-    }
-
-    .card__meta,
-    .card__stages {
-      display: none;
-    }
-
-    @media (min-width: 1ch) {
-      --block-space: 1cqi;
-      --container-gap: calc(var(--block-space) * 2);
-      --container-padding: calc(var(--block-space) * 2.5);
-
-      .card {
-        --card-size: calc(50% - var(--container-gap) - (var(--container-padding) * 2) / 4);
-        --text-xx-large: 1.6em;
-
-        font-size: 1.5cqi;
-      }
-
-      .card__footer,
-      .card__header,
-      .card__stages {
-        font-size: 0.85em;
-      }
-    }
-
-    @media (min-width: 120ch) {
-      --block-space: 0.9cqi;
-      --container-gap: calc(var(--block-space) * 2);
-      --container-padding: calc(var(--block-space) * 2.5);
-
-      .card {
-        --card-size: calc(33% - var(--container-gap) / 2 - (var(--container-padding) * 2) / 6);
-        --text-xx-large: 1.8em;
-
-        font-size: 1cqi;
-      }
-
-      .card__footer,
-      .card__header,
-      .card__stages {
-        font-size: 0.85em;
-      }
-    }
-  }
-
-  .card__header {
-    padding-inline-end: var(--inline-space);
-  }
-
-  .card__hide-on-index {
-    .cards &,
-    .cards--grid & {
-      display: none;
-    }
-  }
-
   .card__link {
     --hover-size: 0;
 
@@ -392,43 +69,25 @@
     inset: 0;
     position: absolute;
     z-index: -1;
-
-    .cards &,
-    .cards--grid & {
-      z-index: 1;
-    }
   }
 
-  .card__meta {
-    --border-color: var(--card-color);
-    --border-size: 1px;
-    --row-gap: 0.25em;
-
-    margin-inline: var(--inline-space-double);
-
-    strong {
-      font-weight: 900;
-    }
-
-    .separator {
-      height: calc(2lh + 2ex);
-    }
-
-    .card--mini & {
-      margin-inline-start: 0;
-    }
+  .card__header {
+    margin-block-start: calc(-1 * var(--card-padding-block));
+    margin-inline-start: calc(-1 * var(--card-padding-inline));
   }
 
-  .card__move-button {
-    --btn-background: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-
-    margin-block-start: calc(var(--block-space) * 1.2);
-    margin-inline-end: calc(var(--inline-space) * -4);
-    padding-inline-end: var(--inline-space);
+  .card__collection {
+    background-color: var(--card-color);
+    border-radius: var(--border-radius) 0 var(--border-radius) 0;
+    font-weight: 800;
+    letter-spacing: 0.4ch;
+    padding: var(--block-space-half) var(--inline-space-double);
   }
 
-  .card__stages {
-    flex: 1 1 25%;
+  .card__tags {
+    align-items: center;
+    color: var(--card-color);
+    display: flex;
   }
 
   .card__tag {
@@ -436,31 +95,25 @@
     font-weight: 700;
   }
 
-  .card__tags {
-    color: var(--card-color);
+  .card__body {
+    padding-block: var(--card-padding-block);
   }
 
   .card__title {
     --hover-size: 0;
     --input-border-radius: 0;
 
+    flex: 2 1 75%;
     font-size: var(--text-xx-large);
     font-weight: 900;
     line-height: 1.1;
     min-block-size: 3lh;
     text-wrap: balance;
 
-    .cards & {
-      pointer-events: none;
-    }
-
     .card__title-field {
-      &:is(textarea) {
-
-        &::placeholder {
-          color: inherit;
-          opacity: 0.5;
-        }
+      &:is(textarea)::placeholder {
+        color: inherit;
+        opacity: 0.5;
       }
     }
 
@@ -471,14 +124,76 @@
     }
   }
 
+  .card__stages {
+    display: flex;
+    flex: 1 1 25%;
+    flex-direction: column;
+    max-width: 100%;
+    min-width: 0;
+    padding-block: var(--block-space);
+  }
+
+  .card__move-button {
+    --btn-background: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+
+    margin-block-start: calc(var(--block-space) * 1.2);
+    margin-inline-end: calc(var(--inline-space) * -4);
+    padding-inline-end: var(--inline-space);
+  }
+
+  .card__meta {
+     --border: 1px solid var(--card-color);
+
+    align-items: center;
+    display: flex;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  .card__meta-grid {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+
+  .card__meta-item {
+    text-transform: uppercase;
+
+    strong,
+    .local-time-value {
+      font-weight: 900;
+    }
+
+    &:nth-child(odd) {
+      border-inline-end: var(--border);
+      padding-inline-end: var(--inline-space);
+    }
+
+    &:nth-child(even) {
+      padding-inline-start: var(--inline-space);
+    }
+
+    /* First two */
+    &:nth-child(-n+2) {
+      border-block-end: var(--border);
+      padding-block-end: 0.25ch;
+    }
+
+    /* Last two */
+    &:nth-child(n+3) {
+      padding-block-start: 0.25ch;
+    }
+  }
+
   .card__closed {
     align-items: center;
     aspect-ratio: 7/4;
     border: var(--block-space-half) solid var(--card-color);
-    position: absolute;
+    display: flex;
+    flex-direction: column;
     inset: auto var(--block-space) var(--block-space-double) auto;
     justify-content: space-between;
     padding: var(--block-space-half) calc(var(--inline-space) * 1.5);
+    position: absolute;
     transform: rotate(-10deg);
     z-index: -1;
   }
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 0edd2a841..5e3ba772c 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -223,4 +223,35 @@
     opacity: 0;
     padding: 0;
   }
+
+  .input.boost__input {
+    --hover-size: 0;
+    --input-border-radius: 0;
+    --input-border-size: 0;
+    --input-padding: 0;
+    --outline-size: 0;
+
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    inline-size: min-content;
+    max-inline-size: 3ch;
+    min-inline-size: 1ch;
+    outline: none;
+
+    @supports (field-sizing: content) {
+      field-sizing: content;
+      max-inline-size: unset;
+    }
+
+    &:focus {
+      background-color: var(--color-highlight);
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css
index c55e0cb87..e42f2d3e7 100644
--- a/app/assets/stylesheets/pins.css
+++ b/app/assets/stylesheets/pins.css
@@ -1,48 +1,13 @@
 @layer components {
-  .pin__collection {
-    background-color: var(--card-color);
-    font-weight: 800;
-    letter-spacing: 0.3ch;
-    padding: 0.3em 0.6em 0.3em 1.5em;
-  }
-
-  .pin__content {
-    --border-color: transparent;
-    --border-radius: 0.2em;
-    --padding: 0.75em;
-
-    padding: var(--padding);
-
-    @media (prefers-color-scheme: dark) {
-      --border-color: var(--color-subtle-dark);
-    }
-  }
-
-  .pin__header {
-    margin: calc(var(--padding) * -1) calc(var(--padding) * -1) auto;
-    padding: 0 0.2em 0 0;
-  }
-
-  .pin__stage {
-    --border-color: currentColor;
-
-    padding: 0.2em 0.5em;
-  }
-
-  .pin__tags {
-    color: var(--card-color);
-  }
-
-  .pin__title {
-    margin-block-start: 0.3rem;
-  }
-
   .pin-tray {
     inset: auto auto var(--block-space-half) var(--inline-space);
 
     .pin {
       --z: calc(10 - var(--position));
 
+      container-type: inline-size;
+      font-size: 10px;
+
       &:nth-child(7) { --position: 7; }
       &:nth-child(8) { --position: 8; }
       &:nth-child(9) { --position: 9; }
@@ -50,5 +15,66 @@
 
       &:nth-child(1n + 11) { display: none; }
     }
+
+    .avatar,
+    .card__tags,
+    .card__meta .btn,
+    .card__meta-item:not(.card__meta-item--updated),
+    .workflow-stage:not(.workflow-stage--current),
+    .card__closed {
+      display: none;
+    }
+
+    .card {
+      --block-space: 1em;
+      --block-space-half: 0.5em;
+      --text-xx-large: 2em;
+
+      border: 1px solid var(--color-bg);
+    }
+
+    .card__collection {
+      padding-block: 0.25ch;
+    }
+
+    .card__body {
+      display: block;
+      padding-block-end: 0;
+    }
+
+    .card__title {
+      font-size: var(--text-small);
+      font-weight: bold;
+      min-block-size: 0;
+    }
+
+    .card__title-link {
+      --lines: 1;
+    }
+
+    .card__stages {
+      padding: 0;
+    }
+
+    .card__meta-item--updated {
+      border: 0;
+      font-size: var(--text-x-small);
+      opacity: 0.66;
+      padding: 0;
+      text-transform: none;
+
+      .local-time-value {
+        font-weight: normal;
+      }
+    }
+
+    .workflow-stage--current {
+      background: none;
+      border: 1px solid currentColor;
+      color: var(--color-ink);
+      inline-size: fit-content;
+      inset: 0 0 auto auto;
+      position: absolute;
+    }
   }
 }
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 614489b3f..6ec13a630 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -167,25 +167,7 @@
   .border-radius { border-radius: var(--border-radius, 0.5em); }
 
   /* Shadows */
-  .shadow {
-    box-shadow:
-      0 0 0 1px oklch(var(--lch-always-black) / 0.02),
-      0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
-      0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
-      0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
-      0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
-      0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
-
-    @media (prefers-color-scheme: dark) {
-      box-shadow:
-        0 0 0 1px oklch(var(--lch-always-black) / 0.42),
-        0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
-        0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
-        0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
-        0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
-        0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
-    }
-  }
+  .shadow { box-shadow: var(--shadow); }
 
   /* Lists */
   :where(.list-style-none) {
diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index 43ead2256..d69dbfe3b 100644
--- a/app/assets/stylesheets/workflows.css
+++ b/app/assets/stylesheets/workflows.css
@@ -7,6 +7,7 @@
     --hover-size: 0;
 
     color: inherit;
+    inline-size: 100%;
     text-transform: uppercase;
 
     @media (hover: hover) {
diff --git a/app/controllers/cards/pins_controller.rb b/app/controllers/cards/pins_controller.rb
index 1f6c1aaa8..76c5aa723 100644
--- a/app/controllers/cards/pins_controller.rb
+++ b/app/controllers/cards/pins_controller.rb
@@ -20,7 +20,7 @@ class Cards::PinsController < ApplicationController
 
   private
     def broadcast_my_new(pin)
-      pin.broadcast_prepend_later_to [ Current.user, :pins ], target: "pins", partial: "my/pins/pin"
+      pin.card.broadcast_prepend_later_to [ Current.user, :pins ], target: "pins", partial: "cards/display/preview"
     end
 
     def broadcast_my_removed(pin)
diff --git a/app/helpers/workflows_helper.rb b/app/helpers/workflows_helper.rb
index ad56ea1fe..b78482c9f 100644
--- a/app/helpers/workflows_helper.rb
+++ b/app/helpers/workflows_helper.rb
@@ -1,7 +1,7 @@
 module WorkflowsHelper
   def button_to_set_stage(card, stage)
     button_to card_stagings_path(card, stage_id: stage),
-        method: :post, class: [ "btn full-width justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage } ],
+        method: :post, class: [ "btn justify-start workflow-stage txt-uppercase workflow-stage", { "workflow-stage--current": stage == card.stage } ],
         form_class: "flex align-center gap-half",
         data: { turbo_frame: "_top" } do
       tag.span class: "overflow-ellipsis" do
diff --git a/app/views/cards/_closure_toggle.html.erb b/app/views/cards/_closure_toggle.html.erb
index c649534ad..76edfa091 100644
--- a/app/views/cards/_closure_toggle.html.erb
+++ b/app/views/cards/_closure_toggle.html.erb
@@ -1,6 +1,6 @@
-<div class="card__actions-container center border-radius flex-inline align-center justify-center gap" id="<%= dom_id(@card, :card_closure_toggle) %>" style="--card-color: <%= @card.color %>">
+<div class="card-perma__notch card-perma__notch--bottom" id="<%= dom_id(@card, :card_closure_toggle) %> style="--card-color: <%= @card.color %>">
   <% if card.closed? %>
-    <span class="card__closure-message pad-inline-start">Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
+    <span class="card-perma__closure-message">Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
     <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
       <span class="pad-inline-end">Un-do</span>
     <% end %>
@@ -19,7 +19,7 @@
       </div>
     </details>
 
-    <span class="card__closure-message">
+    <span class="card-perma__closure-message">
       <% if card.doing? %>
         Returns to <em>Considering</em> if no activity <%= local_datetime_tag(card.auto_reconsider_at, style: :indays) -%>.
       <% else %>
diff --git a/app/views/cards/_doing_toggle.html.erb b/app/views/cards/_doing_toggle.html.erb
new file mode 100644
index 000000000..54aa661b9
--- /dev/null
+++ b/app/views/cards/_doing_toggle.html.erb
@@ -0,0 +1,19 @@
+<% if @card.published? && !@card.closed? %>
+  <div class="card-perma__notch card-perma__notch--top" id="<%= dom_id(@card, :card_engagement_toggle) %>" style="--card-color: <%= @card.color %>;">
+    <div class="btn__group flex full-width txt-uppercase">
+      <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
+        <%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
+          <%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
+          <span>Considering</span>
+        <% end %>
+      <% end %>
+
+      <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
+        <%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
+          <%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
+          <span>Doing</span>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/cards/display/_mini.html.erb b/app/views/cards/display/_mini.html.erb
deleted file mode 100644
index 7d1961d2c..000000000
--- a/app/views/cards/display/_mini.html.erb
+++ /dev/null
@@ -1,24 +0,0 @@
-<%= tag.div class: ["card card--mini border flex flex-column gap position-relative txt-align-start full-width border-radius fill-white", { "card--drafted": card.drafted? }], 
-    style: "--card-color: #{ card.color }; view-transition-name: #{ dom_id(card, :ticket) };" do %>
-  <header class="card__header flex align-center gap min-width">
-    <span class="card__collection txt-uppercase overflow-ellipsis txt-reversed">
-      <%= card.collection.name %>
-    </span>
-
-    <div class="overflow-ellipsis"><%= render "cards/display/mini/tags", card: card %></div>
-  </header>
-
-  <div class="card__body flex flex-column gap-half full-width flex-item-grow min-width max-width">
-    <div class="flex align-center gap min-width margin-block-end-half">
-      <h3 class="card__title overflow-ellipsis">
-        <%= card.title %>
-      </h3>
-    </div>
-
-    <%= render "cards/display/mini/meta", card: card %>
-  </div>
-
-  <%= link_to collection_card_path(card.collection, card), class: "card__link" do %>
-    <span class="for-screen-reader"><%= card.title %></span>
-  <% end %>
-<% end %>
diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb
index 8210f0af6..f70b9d2c8 100644
--- a/app/views/cards/display/_perma.html.erb
+++ b/app/views/cards/display/_perma.html.erb
@@ -1,5 +1,5 @@
 <% cache card do %>
-  <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start border-radius" do %>
+  <%= card_article_tag card, class: "card" do %>
     <header class="card__header flex align-center gap min-width">
       <%= link_to card.collection.name, cards_path(collection_ids: [card.collection]),
             class: "card__collection txt-uppercase overflow-ellipsis txt-reversed" %>
@@ -8,22 +8,20 @@
     </header>
 
     <div class="card__body flex gap full-width flex-item-grow">
-      <div class="card__body-header">
-        <h1 class="card__title">
-          <% if card.published? %>
-            <%= turbo_frame_tag card, :edit do %>
-              <%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link overflow-line-clamp" %>
-            <% end %>
-          <% else %>
-            <%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", data: { controller: "auto-save" } do |form| %>
-              <%= form.text_area :title, placeholder: "Name it…",
-                    class: "input input--textarea full-width borderless txt-align-start #{ "fill-highlight" if card.creating? }",
-                    autofocus: card.title.blank?,
-                    data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
-            <% end %>
+      <h1 class="card__title">
+        <% if card.published? %>
+          <%= turbo_frame_tag card, :edit do %>
+            <%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link overflow-line-clamp" %>
           <% end %>
-        </h1>
-      </div>
+        <% else %>
+          <%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", data: { controller: "auto-save" } do |form| %>
+            <%= form.text_area :title, placeholder: "Name it…",
+                  class: "input input--textarea full-width borderless txt-align-start #{ "fill-highlight" if card.creating? }",
+                  autofocus: card.title.blank?,
+                  data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
+          <% end %>
+        <% end %>
+      </h1>
 
       <% if card.doing? %>
         <%= turbo_frame_tag dom_id(@card, :stages) do %>
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index bc1c86e13..7d673308c 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -1,16 +1,14 @@
 <% cache [ card ] do %>
-  <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start full-width border-radius" do %>
+  <%= card_article_tag card, class: "card" do %>
     <header class="card__header flex align-center gap min-width">
       <span class="card__collection txt-uppercase overflow-ellipsis txt-reversed"><%= card.collection.name %></span>
       <%= render "cards/display/preview/tags", card: card %>
     </header>
 
     <div class="card__body flex gap full-width flex-item-grow">
-      <div class="card__body-header">
-        <h1 class="card__title">
-          <span class="card__title-link overflow-line-clamp"><%= card.title %></span>
-        </h1>
-      </div>
+      <h1 class="card__title">
+        <span class="card__title-link overflow-line-clamp"><%= card.title %></span>
+      </h1>
 
       <%= link_to collection_card_path(card.collection, card), class: "card__link" do %>
         <span class="for-screen-reader"><%= card.title %></span>
diff --git a/app/views/cards/display/common/_background.html.erb b/app/views/cards/display/common/_background.html.erb
index cb4335108..08a3c557a 100644
--- a/app/views/cards/display/common/_background.html.erb
+++ b/app/views/cards/display/common/_background.html.erb
@@ -3,7 +3,7 @@
 </div>
 
 <% if card.closed? %>
-  <div class="card__closed flex flex-column">
+  <div class="card__closed">
     <span class="card__closed-title txt-uppercase"><%= card.closure.reason %></span>
     <strong><%= card.closed_at.strftime("%b %d, %Y") %></strong>
     <span>by <span class="card__closed-by"><%= card.closed_by.name %></span></span>
diff --git a/app/views/cards/display/common/_meta.html.erb b/app/views/cards/display/common/_meta.html.erb
index eda0a910b..d2ba79b98 100644
--- a/app/views/cards/display/common/_meta.html.erb
+++ b/app/views/cards/display/common/_meta.html.erb
@@ -1,25 +1,14 @@
-<div class="card__meta flex align-center txt-tight-lines txt-uppercase max-width min-width" id="<%= dom_id(card, :meta) %>">
+<div class="card__meta" id="<%= dom_id(card, :meta) %>">
   <%= avatar_image_tag card.creator, class: "avatar margin-inline-end" %>
 
-  <div class="flex flex-column gap txt-align-start">
-    <span class="pad-inline overflow-ellipsis">Added
-      <%= local_datetime_tag(card.created_at, style: :daysago) %>
+  <div class="card__meta-grid">
+    <span class="card__meta-item card__meta-item--added overflow-ellipsis">
+      Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
       <% if card.drafted? %>
         <strong>(Draft)</strong>
       <% end %>
     </span>
-
-    <hr class="full-width separator--horizontal unpad margin-none">
-
-    <span class="pad-inline overflow-ellipsis">
-      Reported by <strong><%= familiar_name_for(card.creator) %></strong>  
-    </span>
-  </div>
-
-  <hr class="separator margin-none unpad">
-  
-  <div class="flex flex-column gap txt-align-start overflow-ellipsis">
-    <span class="pad-inline overflow-ellipsis">
+    <span class="card__meta-item card__meta-item--updated overflow-ellipsis">
       <% if card.creating? %>
         &nbsp;
       <% else %>
@@ -27,10 +16,10 @@
         <%= local_datetime_tag(card.updated_at, style: :daysago) %>
       <% end %>
     </span>
-
-    <hr class="full-width separator--horizontal unpad margin-none">
-
-    <span class="pad-inline overflow-ellipsis">
+    <span class="card__meta-item card__meta-item--reported overflow-ellipsis">
+      Reported by <strong><%= familiar_name_for(card.creator) %></strong>
+    </span>
+    <span class="card__meta-item card__meta-item--assigned overflow-ellipsis">
       Assigned to <%= card.assignees.any? ? card.assignees.map { |assignee| "<strong>#{familiar_name_for(assignee)}</strong>" }.to_sentence.html_safe : "no one" %>
     </span>
   </div>
@@ -39,3 +28,4 @@
     <%= yield %>
   </div>
 </div>
+
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index 7d57385a6..cecde410e 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -1,4 +1,4 @@
-<div id="<%= dom_id(card, :tags) %>" class="card__tags flex align-center flex-item-grow min-width">
+<div id="<%= dom_id(card, :tags) %>" class="card__tags flex-item-grow min-width">
   <div class="overflow-ellipsis">
     <% if card.tags.any? || card.creating? %>
       <span># </span>
diff --git a/app/views/cards/display/preview/_stages.html.erb b/app/views/cards/display/preview/_stages.html.erb
index d320f5711..1ab34b675 100644
--- a/app/views/cards/display/preview/_stages.html.erb
+++ b/app/views/cards/display/preview/_stages.html.erb
@@ -1,9 +1,9 @@
 <% workflow = card.collection.workflow %>
 
 <% if workflow %>
-  <div class="card__stages flex flex-column max-width min-width pad-block">
+  <div class="card__stages">
     <% workflow.stages.each do |stage| %>
-      <%= tag.span stage.name, class: ["overflow-ellipsis btn full-width justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage }] %>
+      <%= tag.span stage.name, class: ["overflow-ellipsis btn justify-start workflow-stage txt-uppercase workflow-stage", { "workflow-stage--current": stage == card.stage }] %>
     <% end %>
   </div>
 <% end %>
diff --git a/app/views/cards/display/preview/_tags.html.erb b/app/views/cards/display/preview/_tags.html.erb
index 3283efed8..35f7c41dc 100644
--- a/app/views/cards/display/preview/_tags.html.erb
+++ b/app/views/cards/display/preview/_tags.html.erb
@@ -1,4 +1,4 @@
-<div class="card__tags flex align-center flex-item-grow min-width">
+<div class="card__tags flex-item-grow min-width">
   <div class="overflow-ellipsis">
     <% if card.tags.any?  %>
       <span># </span>
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index c57284da5..fbc5528f4 100644
--- a/app/views/cards/index.html.erb
+++ b/app/views/cards/index.html.erb
@@ -6,7 +6,7 @@
   <%= render "cards/index/header", filter: @filter %>
 <% end %>
 
-<div class="cards--columns">
+<div class="card-columns">
   <%= render "cards/index/engagement/considering", **@considering.to_h %>
   <%= render "cards/index/engagement/doing", **@doing.to_h %>
 </div>
diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb
index 5263d9551..0eef62cce 100644
--- a/app/views/cards/index/_header.html.erb
+++ b/app/views/cards/index/_header.html.erb
@@ -5,7 +5,7 @@
   <div class="btn btn--placeholder flex-item-justify-start"></div>
 
   <header class="flex flex-inline flex-column center flex-shrink">
-    <div class="card-collection__filter flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+    <div class="card-filter--collection flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
       <button class="txt-align-center input input--select borderless center txt-medium" data-action="click->dialog#open:stop">
         <h1 class="txt-large overflow-ellipsis margin-none">
           <%= filter_title filter %>
diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb
index 7c9df340e..3a890907d 100644
--- a/app/views/cards/index/_workflow_filter.html.erb
+++ b/app/views/cards/index/_workflow_filter.html.erb
@@ -1,5 +1,5 @@
-<div class="card-column__filter flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-  <button class="txt-align-center input input--select borderless center txt-uppercase txt-medium margin-none-block-start margin-block-end" data-action="click->dialog#open:stop">
+<div class="card-filter--column flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <button class="cards__heading input input--select borderless" data-action="click->dialog#open:stop">
     <strong class="overflow-ellipsis">
       <% if filter.stages.any? %>
         <%= filter.stages.map(&:name).to_sentence %>
diff --git a/app/views/cards/index/engagement/_closed.html.erb b/app/views/cards/index/engagement/_closed.html.erb
index 1071ac197..656106a15 100644
--- a/app/views/cards/index/engagement/_closed.html.erb
+++ b/app/views/cards/index/engagement/_closed.html.erb
@@ -1,17 +1,15 @@
-<div class="margin-block">
-  <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none">
+<section id="closed-cards" class="cards cards--closed">
+  <h2 class="cards__heading">
     Recently closed
   </h2>
 
-  <section id="closed-cards" class="cards--grid">
-    <% if page.used? %>
-      <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
+  <% if page.used? %>
+    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
 
-      <% unless page.last? %>
-        <%= cards_next_page_link "closed-cards", page: page, filter: filter, fetch_on_visible: true %>
-      <% end %>
-    <% else %>
-      <p class="txt-medium translucent">Nothing here</p>
+    <% unless page.last? %>
+      <%= cards_next_page_link "closed-cards", page: page, filter: filter, fetch_on_visible: true %>
     <% end %>
-  </section>
-</div>
+  <% else %>
+    <p class="txt-medium translucent">Nothing here</p>
+  <% end %>
+</section>
diff --git a/app/views/cards/index/engagement/_considering.html.erb b/app/views/cards/index/engagement/_considering.html.erb
index f2ff7475f..60da186c5 100644
--- a/app/views/cards/index/engagement/_considering.html.erb
+++ b/app/views/cards/index/engagement/_considering.html.erb
@@ -1,10 +1,10 @@
-<section id="considering-cards"  class="cards" style="align-items: center; border-inline-end: 1px solid var(--color-subtle);">
-  <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
+<section id="considering-cards" class="cards cards--considering">
+  <h2 class="cards__heading">
     Considering
   </h2>
 
   <% if page.used? %>
-    <%= render partial: "cards/display/mini", collection: page.records, as: :card, cached: true %>
+    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
 
     <% unless page.last? %>
       <%= cards_next_page_link "considering-cards", page: page, filter: filter %>
diff --git a/app/views/cards/index/engagement/_doing.html.erb b/app/views/cards/index/engagement/_doing.html.erb
index a612d5647..e59c70700 100644
--- a/app/views/cards/index/engagement/_doing.html.erb
+++ b/app/views/cards/index/engagement/_doing.html.erb
@@ -1,8 +1,8 @@
-<section id="doing-cards"  class="cards gap position-relative" style="align-items: center; view-transition-name: cards-container;" data-controller="card-size" data-action="turbo:morph@window->card-size#resize">
+<section id="doing-cards" class="cards cards--doing" style="view-transition-name: cards-container;" data-controller="card-size" data-action="turbo:morph@window->card-size#resize">
   <% if workflow = filter.single_workflow %>
     <%= render "cards/index/workflow_filter", workflow: workflow, filter: filter %>
   <% else %>
-    <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
+    <h2 class="cards__heading">
       Doing
     </h2>
   <% end %>
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index cc284ec5d..f0151c3ce 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -23,39 +23,16 @@
   <nav class="align-start max-width">
     <%= link_to_home %>
     <%= link_to_back fallback_path: cards_path(collection_id: @card.collection) %>
-
-    <% if @card.published? && !@card.closed? %>
-      <div class="card__actions-container card__actions-container--top center border-radius" id="<%= dom_id(@card, :card_engagement_toggle) %>" style="--card-color: <%= @card.color %>;">
-        <div class="btn__group flex full-width txt-uppercase">
-          <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
-            <%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
-              <%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
-              <span>Considering</span>
-            <% end %>
-          <% end %>
-
-          <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
-            <%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
-              <%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
-              <span>Doing</span>
-            <% end %>
-          <% end %>
-        </div>
-      </div>
-    <% end %>
-
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
-    <div class="btn btn--placeholder"></div>
   </nav>
 <% end %>
 
 <div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
-  <div id="<%= dom_id(@card, :card_container) %>" class="card__container position-relative <%= "card__container--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
-    <%= render "cards/display/perma", card: @card %>
+  <section id="<%= dom_id(@card, :card_container) %>" class="card-perma <%= "card-perma--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
 
-    <div class="card__actions flex flex-column gap-half">
+    <%= render "cards/doing_toggle", card: @card %>
+
+    <aside class="card-perma__actions card-perma__actions--left" role="toolbar">
       <%= render "cards/golden_toggle", card: @card if @card.doing? %>
-
       <%= render "cards/image", card: @card %>
       <%= button_to collection_card_path(@card.collection, @card),
             method: :delete,
@@ -64,22 +41,24 @@
         <%= icon_tag "trash" %>
         <span class="for-screen-reader">Delete</span>
       <% end %>
-    </div>
+    </aside>
 
+    <div class="card-perma__bg">
+      <%= render "cards/display/perma", card: @card %>
+    </div>
 
     <% if @card.published? %>
-      <div class="card__actions card__actions--right flex flex-column gap-half">
+      <aside class="card-perma__actions card-perma__actions--right" role="toolbar">
         <%= turbo_frame_tag dom_id(@card, :watch), src: card_watch_path(@card), refresh: :morph %>
         <%= turbo_frame_tag dom_id(@card, :pin), src: card_pin_path(@card), refresh: :morph %>
-      </div>
+      </aside>
     <% end %>
-  </div>
 
-  <% unless @card.drafted? || @card.creating? %>
-    <div class="card__actions-wrapper">
+    <% unless @card.drafted? || @card.creating? %>
       <%= render "cards/closure_toggle", card: @card %>
-    </div>
-  <% end %>
+    <% end %>
+  </section>
+
 
   <% if @card.published? %>
     <%= render "cards/messages", card: @card %>
diff --git a/app/views/cards/stagings/_stages.html.erb b/app/views/cards/stagings/_stages.html.erb
index fe8f86869..71885bce9 100644
--- a/app/views/cards/stagings/_stages.html.erb
+++ b/app/views/cards/stagings/_stages.html.erb
@@ -1,7 +1,7 @@
 <% workflow = card.collection.workflow %>
 
 <% if workflow  %>
-  <div id="<%= dom_id(card, "stages") %>" class="card__stages flex flex-column max-width min-width pad-block">
+  <div id="<%= dom_id(card, "stages") %>" class="card__stages">
     <% workflow.stages.each do |stage| %>
       <%= button_to_set_stage card, stage %>
     <% end %>
diff --git a/app/views/my/pins/_pin.html.erb b/app/views/my/pins/_pin.html.erb
deleted file mode 100644
index 36e7ce132..000000000
--- a/app/views/my/pins/_pin.html.erb
+++ /dev/null
@@ -1,36 +0,0 @@
-<% cache pin do %>
-  <%= tag.div id: dom_id(pin), class: "pin tray__item txt-normal" do %>
-    <%= link_to collection_card_path(pin.card.collection, pin.card),
-          class: "pin__content shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border border-radius txt-ink overflow-clip",
-          data: { action: "click->dialog#close", turbo_frame: "_top" },
-          style: "--card-color: #{ pin.card.color };" do %>
-      <div class="flex flex-column min-width flex-item-grow">
-        <div class="pin__header flex gap-half align-center txt-uppercase">
-          <div class="pin__collection flex-inline flex-item-justify-start txt-reversed min-width txt-xx-small">
-            <span class="txt-xx-small overflow-ellipsis"><%= pin.card.collection.name %></span>
-          </div>
-
-          <% if pin.card&.stage %>
-            <strong class="pin__stage border txt-tight-lines flex-item-justify-end txt-xx-small">
-              <%= pin.card&.stage&.name %>
-            </strong>
-          <% end %>
-        </div>
-
-        <strong class="pin__title overflow-ellipsis txt-small"><%= pin.card.title %></strong>
-
-        <div class="tray__item-meta flex align-end gap-half txt-tight-lines">
-          <div class="translucent">
-            <span>Updated</span> <%= local_datetime_tag(pin.card.updated_at, style: :ago) -%>
-          </div>
-
-          <%= " · " if pin.card.tags.any? %>
-          <div class="overflow-ellipsis pin__tags txt-uppercase">
-            <%= "#" if pin.card.tags.any? %>
-            <%= pin.card.tags.map(&:title).join(", ") %>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  <% end %>
-<% end %>
diff --git a/app/views/my/pins/index.html.erb b/app/views/my/pins/index.html.erb
index d4c176587..519070aec 100644
--- a/app/views/my/pins/index.html.erb
+++ b/app/views/my/pins/index.html.erb
@@ -1,3 +1,7 @@
 <%= turbo_frame_tag "pins" do %>
-  <%= render collection: @pins, partial: "my/pins/pin" %>
+  <% @pins.map(&:card).each do |card| %>
+    <div class="pin tray__item">
+      <%= render partial: "cards/display/preview", locals: { card: card } %>
+    </div>
+  <% end %>
 <% end %>