More typography work. Getting somewhere!

site/development/style.css

@@ -16,6 +16,20 @@
    --base-size: 14px;
    --grid-base: 16px;
 
+   /* Rounded to whole numbers from https://www.modularscale.com/?14,16&px&1.5 */
+   --fs-4: 6px;
+   --fs-3: 8px;
+   --fs-2: 9px;
+   --fs-1: 12px;
+   --fs0: 14px;
+   --fs1: 16px;
+   --fs2: 21px;
+   --fs3: 24px;
+   --fs4: 32px;
+   --fs5: 36px;
+   --fs6: 47px;
+   --fs7: 54px;
+
    --serif: 'Frame';
    --serif-secondary: 'Sanomat';
    --sans: 'Sanomat Sans Text';
@@ -41,8 +55,7 @@
    --light-blue-0: oklch(92% 0.042 241.48);
 
    --white: oklch(97% 0.01 246.48);
-   --dark-white: oklch(94% 0.01 246.48);
-   --light-gray: oklch(92% 0.01 246.48);
+   --light-gray: oklch(94% 0.01 246.48);
 
    --gold: oklch(82.16% 0.148 73.12);
    --tan: oklch(68.99% 0.073 67.54);
@@ -55,8 +68,8 @@
 
 html {
    font-family: var(--text);
-   font-size: var(--base-size);
-   text-size-adjust: from-font;
+   font-size: var(--fs0);
+   font-size-adjust: from-font;
    line-height: 1;
    background-color: var(--light-blue);
    color: var(--dark-blue);
@@ -125,16 +138,44 @@ article {
    orphans: 3;
    hyphens: none;
    background-color: var(--white);
+   margin-right: 0;
+   margin-left: auto;
+}
+
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+   line-height: 1;
+   margin: 0;
 }
 
-[data-paragraph-flow='spacing'] {
-   --p-text-indent: 0;
-   --p-margin: 0 0 1em;
+article h1 {
+   font-size: var(--fs4);
+   font-weight: 600;
 }
 
-[data-paragraph-flow='indented'] {
-   --p-text-indent: 1.65em;
-   --p-margin: 0;
+article h2 {
+   font-size: var(--fs3);
+   margin-top: 1em;
+   margin-bottom: var(--fs-3);
+}
+
+article h3 {
+   font-size: var(--fs1);
+   font-weight: 600;
+   margin-top: 1em;
+   margin-bottom: var(--fs-3);
+}
+
+article h4 {
+   font-size: var(--fs0);
+   font-style: italic;
+   font-weight: 600;
+   margin-top: 1em;
+   margin-bottom: var(--fs-3);
 }
 
 article p {
@@ -152,8 +193,8 @@ article p:last-child {
 }
 
 article .item-subtitle {
-   font-size: 0.92em;
    font-style: italic;
+   font-size: var(--fs1);
 }
 
 article blockquote,
@@ -204,7 +245,6 @@ article a:hover {
 .sans {
    font-family: var(--text-alt);
    font-weight: var(--text-alt-weight);
-   font-size-adjust: var(--text-alt-adjust);
 }
 
 /*
@@ -305,8 +345,6 @@ abbr {
 
 code {
    font-family: var(--mono);
-   font-size-adjust: var(--mono-adjust);
-   letter-spacing: -0.25px;
 }
 
 p code {
@@ -324,8 +362,9 @@ pre:has(> code) {
 }
 
 pre code {
+   display: block;
    hanging-punctuation: none;
-   line-height: 1.2;
+   line-height: 1.15;
 }
 
 .smcp {
@@ -351,8 +390,22 @@ sup {
 /* Rough guess */
 @media (min-width: 600px) {
    :root {
-      --base-size: 16px;
+      --base-size: 15px;
       --grid-base: 18px;
+
+      /* Rounded to whole numbers from https://www.modularscale.com/?15,18&px&1.5 */
+      --fs-4: 7px;
+      --fs-3: 8px;
+      --fs-2: 10px;
+      --fs-1: 12px;
+      --fs0: 15px;
+      --fs1: 18px;
+      --fs2: 23px;
+      --fs3: 27px;
+      --fs4: 34px;
+      --fs5: 41px;
+      --fs6: 51px;
+      --fs7: 61px;
    }
 
    body {
@@ -379,9 +432,25 @@ sup {
 /* Rough guess, more later! */
 @media (min-width: 1024px) {
    :root {
+      --base-size: 16px;
+      --grid-base: 20px;
+
+      /* Rounded to whole numbers from https://www.modularscale.com/?16,20&px&1.5 */
+      --fs-4: 7px;
+      --fs-3: 9px;
+      --fs-2: 11px;
+      --fs-1: 13px;
+      --fs0: 16px;
+      --fs1: 20px;
+      --fs2: 24px;
+      --fs3: 30px;
+      --fs4: 36px;
+      --fs5: 45px;
+      --fs6: 54px;
+      --fs7: 68px;
+
       --text-lh: 1.5;
       --text-alt-lh: 1.4;
-      --grid-base: 20px;
    }
 
    body {