From 35ea2c3921e109804455335654c0f86a4ee26a8f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 10 Jul 2025 16:16:40 -0500
Subject: [PATCH 1/5] Use vw units for main padding

---
 app/assets/stylesheets/card-perma.css | 6 +-----
 app/assets/stylesheets/layout.css     | 4 +++-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 13933d9da..d9592df61 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -58,7 +58,7 @@
     }
 
     @media (max-width: 800px) {
-      --padding-inline: 3cqmin;
+      --padding-inline: var(--main-padding);
 
       column-gap: 0;
       grid-template-areas:
@@ -156,10 +156,6 @@
         --btn-color: var(--color-ink-inverted);
       }
     }
-
-    @media (max-width: 580px) {
-      margin-block-start: -2ch;
-    }
   }
 
   .card-perma__notch--bottom {
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index 40de97e09..ab65b2f10 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -9,10 +9,12 @@
   }
 
   :where(#main) {
+    --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
+
     inline-size: 100dvw;
     margin-inline: auto;
     max-inline-size: 100dvw;
-    padding-inline: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
+    padding-inline: var(--main-padding);
     text-align: center;
 
     @media print {

From bd8f37e742d17b4c970d642bd0b167859ac28866 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 10 Jul 2025 16:16:52 -0500
Subject: [PATCH 2/5] Tighten up space below header

---
 app/assets/stylesheets/card-perma.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index d9592df61..8e7fbb61c 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -79,6 +79,10 @@
 
     #main:has(.card-perma__notch--top) & {
       margin-block-end: 4ch;
+
+      @media (max-width: 639px) {
+        margin-block-end: 2ch;
+      }
     }
   }
 

From cebbc390a1cad9d076587236284ac9955150262b Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 10 Jul 2025 16:17:10 -0500
Subject: [PATCH 3/5] Consistent card title size

---
 app/assets/stylesheets/card-columns.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index ec8a848e0..3cd493293 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -118,7 +118,6 @@
   /* ------------------------------------------------------------------------ */
 
   .cards__heading {
-
     background-color: var(--color-canvas);
     display: flex;
     font-size: var(--text-medium);
@@ -172,11 +171,14 @@
 
     .card {
       --avatar-size: 2.75em;
-      --text-xx-large: 1.6em;
       --text-small: 1.1em;
 
       background-color: var(--color-canvas);
       line-height: 1.2;
+
+      @media (min-width: 640px) {
+        --text-xx-large: 1.6em;
+      }
     }
 
     .card__body {

From af097e374727dae99ebcfce2123a6c4490fe7ac2 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 10 Jul 2025 16:23:22 -0500
Subject: [PATCH 4/5] Move workflow below title when it won't fit comfortably
 on the side

---
 app/assets/stylesheets/card-perma.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 8e7fbb61c..b436b4d91 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -37,6 +37,16 @@
       opacity: 0.2;
     }
 
+    .card__body {
+      @media (max-width: 639px) {
+        flex-direction: column;
+      }
+    }
+
+    .card__title {
+      font-size: clamp(var(--text-medium), 6vw, var(--text-xx-large));
+    }
+
     .card__meta,
     .card__stages {
       font-size: var(--text-small);

From 71ead7f35a283b66464b1a5b9090bc951bda6fe4 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 10 Jul 2025 16:34:11 -0500
Subject: [PATCH 5/5] Hide empty p tag

---
 app/assets/stylesheets/card-perma.css |  2 --
 app/assets/stylesheets/cards.css      | 11 +++--------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index b436b4d91..8005f1fbb 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -27,8 +27,6 @@
     }
 
     .card {
-      --card-aspect-ratio: 2 / 0.95;
-
       border: none;
     }
 
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 710c8ae05..def62776d 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -106,14 +106,9 @@
   }
 
   .card__description {
-    house-md-toolbar,
-    .house-md-content {
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-    }
-
-    .house-md-content {
-      min-block-size: 3lh;
-      padding: var(--block-space-half) var(--inline-space) 0 0;
+    /* Hide the empty element that Lexical saves when nothing is added to the description <p><br /></p> */
+    p:only-child:has(br:only-child) {
+      display: none;
     }
 
     & ~ .btn {