improve rec typography

Author: possumbilities

src/index.html

@@ -360,7 +360,7 @@ <h4>Creative Commons Attribution 4.0 International</h4>
 
         <div id="mark-your-work">
             <header>
-                <h2>Mark Your Work</h2>
+                <h3>Mark Your Work</h3>
                 <p>Choose the kind of work to get appropriate license code or public domain marking.</p>
             </header>
 
@@ -407,13 +407,13 @@ <h2>Mark Your Work</h2>
 
             </details>
 
-            <details class="medium">
+            <details class="medium" open>
             <summary>Print Work or Media</summary>
 
                 <p>Copy the text below and paste it on the title and/or copyright page of your print work or presentation, or in the credits of your media.</p>
 
                 <article>
-                <details class="format">
+                <details class="format" open>
                     <summary>Plain Text</summary>
 
                         <p class="plain-text mark">[contextually formatted mark here]</p>

src/style.css

@@ -97,7 +97,8 @@ ol li:has(.disable) {
 
 .tool header > .tool-icons {
     order: -1;
-    margin: 1.8em 1em 0 0;
+    /* margin: 1.8em 1em 0 0; */
+    margin: 0 1em 0 0;
 }
 
 .tool .tool-icons svg {
@@ -128,14 +129,62 @@ ol li:has(.disable) {
     color: lightgray;
 }
 
-#tool-recommendation p {
+#tool-recommendation {
+    margin-bottom: 4em;
+
+    font-family: 'Source Sans Pro';
+}
+
+#tool-recommendation .tool {
+    padding: 2em;
+
+    background: var(--vocabulary-brand-color-soft-turquoise);
+}
+
+#tool-recommendation .tool a {
+    --underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
+}
+
+#tool-recommendation h3 {
+    margin: 0;
+
+    font-family: 'Source Sans Pro';
     font-size: 1.4em;
 }
 
-#mark-your-work p {
+#tool-recommendation h4 {
+    margin: .2em;
+
+    font-family: 'Source Sans Pro';
     font-size: 1.4em;
 }
 
+#tool-recommendation p {
+    font-size: 1.2em;
+}
+
+#tool-recommendation a {
+    font-weight: 700;
+}
+
+#tool-recommendation .conditions-definitions {
+    margin-bottom: 2em;
+
+    font-family: 'Source Sans Pro';
+}
+
+#tool-recommendation .conditions-definitions dt {
+    font-weight: 700;
+}
+
+#mark-your-work {
+    /* border-top: 1px solid var(--vocabulary-neutral-color-lighter-gray); */
+}
+
+#mark-your-work p {
+    font-size: 1.2em;
+}
+
 details { 
     font-family: 'Source Sans Pro';
 
@@ -186,6 +235,8 @@ body.chooser-page .content {
 
 }
 
+
+
 @media (max-width: 705px) {
     .content {
         display: block;