diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 1a8325e45..61beab9b2 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -97,12 +97,12 @@
     }
   }
 
-  .card--golden {
+  .card--golden.card--doing {
     --border-color: var(--color-bg) !important;
 
     background-color: var(--color-bg);
     background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
-    box-shadow: 
+    box-shadow:
       0 0 0.5em 0.2em var(--color-golden),
       0 0 1em 0.4em var(--color-golden) !important;
     outline: 1px solid var(--color-golden);
@@ -154,7 +154,7 @@
     &.card__actions-container--top {
       margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66);
       min-inline-size: 30ch;
-  
+
       #header:has(&) {
         position: relative;
         z-index: 1;
diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index 8c9cc0498..1546efd8e 100644
--- a/app/helpers/cards_helper.rb
+++ b/app/helpers/cards_helper.rb
@@ -27,7 +27,18 @@ module CardsHelper
       **options
   end
 
-  def golden_class_for(card)
-    "card--golden" if card.doing? && card.golden?
+  def card_article_tag(card, id: dom_id(card, :ticket), **options, &block)
+    classes = [
+      options.delete(:class),
+      ("card--golden" if card.golden?),
+      ("card--doing" if card.doing?)
+    ].compact.join(" ")
+
+    tag.article \
+      id: id,
+      style: "--card-color: #{card.color}; view-transition-name: #{id}",
+      class: classes,
+      **options,
+      &block
   end
 end
diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb
index adba7fb7f..c4c89046c 100644
--- a/app/views/cards/display/_perma.html.erb
+++ b/app/views/cards/display/_perma.html.erb
@@ -1,7 +1,5 @@
 <% cache card do %>
-  <article class="card shadow border flex flex-column position-relative txt-align-start border-radius <%= golden_class_for(card) %>"
-      style="--card-color: <%= card.color %>; view-transition-name: <%= dom_id(card, :ticket) %>;"
-      id="<%= dom_id(card, :ticket) %>">
+  <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start border-radius" 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" %>
@@ -39,5 +37,5 @@
     </footer>
 
     <%= render "cards/display/common/background", card: card %>
-  </article>
+  <% end %>
 <% end %>
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 3d59c8fb7..ceffc0867 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -1,7 +1,5 @@
 <% cache [ card ] do %>
-  <article class="card shadow border flex flex-column position-relative txt-align-start full-width border-radius <%= golden_class_for(card) %>"
-    style="--card-color: <%= card.color %>; view-transition-name: <%= dom_id(card, :ticket) %>;"
-    id="<%= dom_id(card, :ticket) %>">
+  <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start full-width border-radius" 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 %>
@@ -26,5 +24,5 @@
     </footer>
 
     <%= render "cards/display/common/background", card: card %>
-  </article>
+  <% end %>
 <% end %>