Merge pull request #54 from mcclatchy/blockquote

Blockquotes + AMP author card grid

Author: gabrielakhanna

content/decks/story.md

@@ -23,7 +23,7 @@ What we don't know for sure is whether or not a fadeless carrot without details
   <blockquote>
     <p>We can assume any jet can be seen as a snooty bumper. Extending this, any sycamore can be viewed as a branchlike income.rel</p>
   </blockquote>
-  <cite>Anon</cite>
+  <cite>First Last</cite>
 </div>
 
 They were lost without the [teasing Monday that composed](#) their burn. The israel of a quiet becomes a ledgy menu. A plane is a manx from the right perspective. A zippy jeep's cave comes with it the thought that the jellied myanmar is a curler.
@@ -80,6 +80,18 @@ The first whittling anatomy is, in its own way, a double. Some afeared europes a
 
 Those foods are nothing more than ikebanas. Few can name an ethmoid leather that isn't an unplanked butcher. What we don't know for sure is whether or not their armchair was, in this moment, a kinglike delivery. A saw of the person is assumed to be a verism gallon.
 
+<ol>
+  <li>ordered list item 1</li>
+  <li>ordered list item 2</li>
+  <li><a>ordered list item link</a></li>
+</ol>
+
+<ul>
+  <li>unordered list item 1</li>
+  <li>unordered list item 2</li>
+  <li><a>unordered list item link</a></li>
+</ul>
+
 {{< transparency >}}
 
 {{< related-stories >}}

dist/amp.css

@@ -1082,6 +1082,16 @@ html.msb .masthead {
   background-color: unset;
 }
 
+/*
+ * Grid class
+ */
+.grid {
+  display: grid;
+  grid-template-columns: var(--columns);
+  gap: var(--grid-row-gap) var(--grid-column-gap);
+  grid-auto-flow: var(--grid-flow, dense);
+}
+
 /**
  * Flexbox grid
  *

dist/saratoga.css

@@ -1670,6 +1670,11 @@ html.msb .masthead {
   line-height: 1.66em;
 }
 
+.story-body a:hover .story-body a:focus {
+  text-decoration: underline;
+  outline: none;
+}
+
 /**
  * Embeds
  */
@@ -1782,25 +1787,30 @@ html.msb .masthead {
 }
 
 .quote:before {
+  content: "";
   display: block;
   width: 50px;
   height: 50px;
-  content: url("data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIiBmaWxsPSIjNEI1OTcyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIxLjk1IDguNzIxYy0uMDE3LS4xMDktLjAyNS0uMTY4LS4wMjUtLjE2OGwtLjAyNi4wMDZjLS40MzQtMi4wMzMtMi4yMzctMy41NTktNC4zOTktMy41NTktMi40ODUgMC00LjUgMi4wMTUtNC41IDQuNXMyLjAxNSA0LjUgNC41IDQuNWMuMjIzIDAgLjQzNy0uMDM0LjY1LS4wNjUtLjA2OS4yMzItLjE0LjQ2OC0uMjU0LjY4LS4xMTQuMzA4LS4yOTIuNTc1LS40NjkuODQ0LS4xNDguMjkxLS40MDkuNDg4LS42MDEuNzM3LS4yMDEuMjQyLS40NzUuNDAzLS42OTIuNjA0LS4yMTMuMjEtLjQ5Mi4zMTUtLjcxNC40NjMtLjIzMi4xMzMtLjQzNC4yOC0uNjUuMzUtLjIwOC4wODYtLjM5LjE2LS41MzkuMjIyLS4zMDIuMTI1LS40NzQuMTk3LS40NzQuMTk3bC40ODQgMS45MzlzLjIxOC0uMDUyLjU5Ny0uMTQ0Yy4xOTEtLjA0OC40MjQtLjEwNC42ODktLjE3MS4yNzEtLjA1LjU2LS4xODcuODgyLS4zMTIuMzE3LS4xNDMuNjg2LS4yMzggMS4wMjgtLjQ2Ny4zNDQtLjIxOC43NDEtLjQgMS4wOTEtLjY5Mi4zMzktLjMwMS43NDgtLjU2MiAxLjA1LS45NDQuMzMtLjM1OC42NTYtLjczNC45MDktMS4xNjIuMjkzLS40MDguNDkyLS44NTYuNzAyLTEuMjk5LjE5LS40NDMuMzQzLS44OTYuNDY4LTEuMzM2LjIzNy0uODgyLjM0My0xLjcyLjM4NC0yLjQzNy4wMzQtLjcxOC4wMTQtMS4zMTUtLjAyOC0xLjc0Ny0uMDE1LS4yMDQtLjA0Mi0uNDAzLS4wNjMtLjUzOXptLTExIDBjLS4wMTctLjEwOS0uMDI1LS4xNjgtLjAyNS0uMTY4bC0uMDI2LjAwNmMtLjQzNC0yLjAzMy0yLjIzNy0zLjU1OS00LjM5OS0zLjU1OS0yLjQ4NSAwLTQuNSAyLjAxNS00LjUgNC41czIuMDE1IDQuNSA0LjUgNC41Yy4yMjMgMCAuNDM3LS4wMzQuNjUtLjA2NS0uMDY5LjIzMi0uMTQuNDY4LS4yNTQuNjgtLjExNC4zMDgtLjI5Mi41NzUtLjQ2OS44NDQtLjE0OC4yOTEtLjQwOS40ODgtLjYwMS43MzctLjIwMS4yNDItLjQ3NS40MDMtLjY5Mi42MDQtLjIxMy4yMS0uNDkyLjMxNS0uNzE0LjQ2My0uMjMyLjEzMy0uNDM0LjI4LS42NS4zNS0uMjA4LjA4Ni0uMzkuMTYtLjUzOS4yMjItLjMwMS4xMjMtLjQ3My4xOTUtLjQ3My4xOTVsLjQ4NCAxLjkzOXMuMjE4LS4wNTIuNTk3LS4xNDRjLjE5MS0uMDQ4LjQyNC0uMTA0LjY4OS0uMTcxLjI3MS0uMDUuNTYtLjE4Ny44ODItLjMxMi4zMTctLjE0My42ODYtLjIzOCAxLjAyOC0uNDY3LjM0NC0uMjE4Ljc0MS0uNCAxLjA5MS0uNjkyLjMzOS0uMzAxLjc0OC0uNTYyIDEuMDUtLjk0NC4zMy0uMzU4LjY1Ni0uNzM0LjkwOS0xLjE2Mi4yOTMtLjQwOC40OTItLjg1Ni43MDItMS4yOTkuMTktLjQ0My4zNDMtLjg5Ni40NjgtMS4zMzYuMjM3LS44ODIuMzQzLTEuNzIuMzg0LTIuNDM3LjAzNC0uNzE4LjAxNC0xLjMxNS0uMDI4LTEuNzQ3LS4wMTYtLjIwMi0uMDQzLS40MDEtLjA2NC0uNTM3eiI+PC9wYXRoPjwvc3ZnPgo=");
+  background-color: var(--block-quote-icon-color, var(--darkgray));
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIxLjk1IDguNzIxYy0uMDE3LS4xMDktLjAyNS0uMTY4LS4wMjUtLjE2OGwtLjAyNi4wMDZjLS40MzQtMi4wMzMtMi4yMzctMy41NTktNC4zOTktMy41NTktMi40ODUgMC00LjUgMi4wMTUtNC41IDQuNXMyLjAxNSA0LjUgNC41IDQuNWMuMjIzIDAgLjQzNy0uMDM0LjY1LS4wNjUtLjA2OS4yMzItLjE0LjQ2OC0uMjU0LjY4LS4xMTQuMzA4LS4yOTIuNTc1LS40NjkuODQ0LS4xNDguMjkxLS40MDkuNDg4LS42MDEuNzM3LS4yMDEuMjQyLS40NzUuNDAzLS42OTIuNjA0LS4yMTMuMjEtLjQ5Mi4zMTUtLjcxNC40NjMtLjIzMi4xMzMtLjQzNC4yOC0uNjUuMzUtLjIwOC4wODYtLjM5LjE2LS41MzkuMjIyLS4zMDIuMTI1LS40NzQuMTk3LS40NzQuMTk3bC40ODQgMS45MzlzLjIxOC0uMDUyLjU5Ny0uMTQ0Yy4xOTEtLjA0OC40MjQtLjEwNC42ODktLjE3MS4yNzEtLjA1LjU2LS4xODcuODgyLS4zMTIuMzE3LS4xNDMuNjg2LS4yMzggMS4wMjgtLjQ2Ny4zNDQtLjIxOC43NDEtLjQgMS4wOTEtLjY5Mi4zMzktLjMwMS43NDgtLjU2MiAxLjA1LS45NDQuMzMtLjM1OC42NTYtLjczNC45MDktMS4xNjIuMjkzLS40MDguNDkyLS44NTYuNzAyLTEuMjk5LjE5LS40NDMuMzQzLS44OTYuNDY4LTEuMzM2LjIzNy0uODgyLjM0My0xLjcyLjM4NC0yLjQzNy4wMzQtLjcxOC4wMTQtMS4zMTUtLjAyOC0xLjc0Ny0uMDE1LS4yMDQtLjA0Mi0uNDAzLS4wNjMtLjUzOXptLTExIDBjLS4wMTctLjEwOS0uMDI1LS4xNjgtLjAyNS0uMTY4bC0uMDI2LjAwNmMtLjQzNC0yLjAzMy0yLjIzNy0zLjU1OS00LjM5OS0zLjU1OS0yLjQ4NSAwLTQuNSAyLjAxNS00LjUgNC41czIuMDE1IDQuNSA0LjUgNC41Yy4yMjMgMCAuNDM3LS4wMzQuNjUtLjA2NS0uMDY5LjIzMi0uMTQuNDY4LS4yNTQuNjgtLjExNC4zMDgtLjI5Mi41NzUtLjQ2OS44NDQtLjE0OC4yOTEtLjQwOS40ODgtLjYwMS43MzctLjIwMS4yNDItLjQ3NS40MDMtLjY5Mi42MDQtLjIxMy4yMS0uNDkyLjMxNS0uNzE0LjQ2My0uMjMyLjEzMy0uNDM0LjI4LS42NS4zNS0uMjA4LjA4Ni0uMzkuMTYtLjUzOS4yMjItLjMwMS4xMjMtLjQ3My4xOTUtLjQ3My4xOTVsLjQ4NCAxLjkzOXMuMjE4LS4wNTIuNTk3LS4xNDRjLjE5MS0uMDQ4LjQyNC0uMTA0LjY4OS0uMTcxLjI3MS0uMDUuNTYtLjE4Ny44ODItLjMxMi4zMTctLjE0My42ODYtLjIzOCAxLjAyOC0uNDY3LjM0NC0uMjE4Ljc0MS0uNCAxLjA5MS0uNjkyLjMzOS0uMzAxLjc0OC0uNTYyIDEuMDUtLjk0NC4zMy0uMzU4LjY1Ni0uNzM0LjkwOS0xLjE2Mi4yOTMtLjQwOC40OTItLjg1Ni43MDItMS4yOTkuMTktLjQ0My4zNDMtLjg5Ni40NjgtMS4zMzYuMjM3LS44ODIuMzQzLTEuNzIuMzg0LTIuNDM3LjAzNC0uNzE4LjAxNC0xLjMxNS0uMDI4LTEuNzQ3LS4wMTYtLjIwMi0uMDQzLS40MDEtLjA2NC0uNTM3eiIvPjwvc3ZnPg==");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIxLjk1IDguNzIxYy0uMDE3LS4xMDktLjAyNS0uMTY4LS4wMjUtLjE2OGwtLjAyNi4wMDZjLS40MzQtMi4wMzMtMi4yMzctMy41NTktNC4zOTktMy41NTktMi40ODUgMC00LjUgMi4wMTUtNC41IDQuNXMyLjAxNSA0LjUgNC41IDQuNWMuMjIzIDAgLjQzNy0uMDM0LjY1LS4wNjUtLjA2OS4yMzItLjE0LjQ2OC0uMjU0LjY4LS4xMTQuMzA4LS4yOTIuNTc1LS40NjkuODQ0LS4xNDguMjkxLS40MDkuNDg4LS42MDEuNzM3LS4yMDEuMjQyLS40NzUuNDAzLS42OTIuNjA0LS4yMTMuMjEtLjQ5Mi4zMTUtLjcxNC40NjMtLjIzMi4xMzMtLjQzNC4yOC0uNjUuMzUtLjIwOC4wODYtLjM5LjE2LS41MzkuMjIyLS4zMDIuMTI1LS40NzQuMTk3LS40NzQuMTk3bC40ODQgMS45MzlzLjIxOC0uMDUyLjU5Ny0uMTQ0Yy4xOTEtLjA0OC40MjQtLjEwNC42ODktLjE3MS4yNzEtLjA1LjU2LS4xODcuODgyLS4zMTIuMzE3LS4xNDMuNjg2LS4yMzggMS4wMjgtLjQ2Ny4zNDQtLjIxOC43NDEtLjQgMS4wOTEtLjY5Mi4zMzktLjMwMS43NDgtLjU2MiAxLjA1LS45NDQuMzMtLjM1OC42NTYtLjczNC45MDktMS4xNjIuMjkzLS40MDguNDkyLS44NTYuNzAyLTEuMjk5LjE5LS40NDMuMzQzLS44OTYuNDY4LTEuMzM2LjIzNy0uODgyLjM0My0xLjcyLjM4NC0yLjQzNy4wMzQtLjcxOC4wMTQtMS4zMTUtLjAyOC0xLjc0Ny0uMDE1LS4yMDQtLjA0Mi0uNDAzLS4wNjMtLjUzOXptLTExIDBjLS4wMTctLjEwOS0uMDI1LS4xNjgtLjAyNS0uMTY4bC0uMDI2LjAwNmMtLjQzNC0yLjAzMy0yLjIzNy0zLjU1OS00LjM5OS0zLjU1OS0yLjQ4NSAwLTQuNSAyLjAxNS00LjUgNC41czIuMDE1IDQuNSA0LjUgNC41Yy4yMjMgMCAuNDM3LS4wMzQuNjUtLjA2NS0uMDY5LjIzMi0uMTQuNDY4LS4yNTQuNjgtLjExNC4zMDgtLjI5Mi41NzUtLjQ2OS44NDQtLjE0OC4yOTEtLjQwOS40ODgtLjYwMS43MzctLjIwMS4yNDItLjQ3NS40MDMtLjY5Mi42MDQtLjIxMy4yMS0uNDkyLjMxNS0uNzE0LjQ2My0uMjMyLjEzMy0uNDM0LjI4LS42NS4zNS0uMjA4LjA4Ni0uMzkuMTYtLjUzOS4yMjItLjMwMS4xMjMtLjQ3My4xOTUtLjQ3My4xOTVsLjQ4NCAxLjkzOXMuMjE4LS4wNTIuNTk3LS4xNDRjLjE5MS0uMDQ4LjQyNC0uMTA0LjY4OS0uMTcxLjI3MS0uMDUuNTYtLjE4Ny44ODItLjMxMi4zMTctLjE0My42ODYtLjIzOCAxLjAyOC0uNDY3LjM0NC0uMjE4Ljc0MS0uNCAxLjA5MS0uNjkyLjMzOS0uMzAxLjc0OC0uNTYyIDEuMDUtLjk0NC4zMy0uMzU4LjY1Ni0uNzM0LjkwOS0xLjE2Mi4yOTMtLjQwOC40OTItLjg1Ni43MDItMS4yOTkuMTktLjQ0My4zNDMtLjg5Ni40NjgtMS4zMzYuMjM3LS44ODIuMzQzLTEuNzIuMzg0LTIuNDM3LjAzNC0uNzE4LjAxNC0xLjMxNS0uMDI4LTEuNzQ3LS4wMTYtLjIwMi0uMDQzLS40MDEtLjA2NC0uNTM3eiIvPjwvc3ZnPg==");
+  -webkit-mask-size: cover;
+  mask-size: cover;
 }
 
 .quote blockquote {
   margin: 0;
-  font: bold 24px/1.2em var(--sans);
-  letter-spacing: -0.3px;
+  font: bold var(--block-quote-font-size, 24px)/1.2em var(--sans);
 }
 
 .quote blockquote p {
   margin: 0;
 }
 
 .quote cite {
-  font: 16px/1.4em var(--sans);
-  color: #4B5972;
+  font: var(--block-quote-attribution-font-size, 16px)/1.4em var(--sans);
+  font-weight: var(--block-quote-attribution-font-weight, normal);
+  color: var(--darkgray);
 }
 
 /**

static/css/cards/story.css

@@ -9,6 +9,7 @@
   background-color: var(--story-background-color, var(--paper-color));
   --header-family: var(--story-subhead-family, var(--sans));
   --header-transform: var(--story-subhead-transform, inherit);
+  --link-hover-decoration: underline;
 }
 
 .story-body > * {
@@ -157,23 +158,28 @@
 }
 
 .quote:before {
+  content: '';
   display: block;
   width: 50px;
   height: 50px;
-  content: url('data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIiBmaWxsPSIjNEI1OTcyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIxLjk1IDguNzIxYy0uMDE3LS4xMDktLjAyNS0uMTY4LS4wMjUtLjE2OGwtLjAyNi4wMDZjLS40MzQtMi4wMzMtMi4yMzctMy41NTktNC4zOTktMy41NTktMi40ODUgMC00LjUgMi4wMTUtNC41IDQuNXMyLjAxNSA0LjUgNC41IDQuNWMuMjIzIDAgLjQzNy0uMDM0LjY1LS4wNjUtLjA2OS4yMzItLjE0LjQ2OC0uMjU0LjY4LS4xMTQuMzA4LS4yOTIuNTc1LS40NjkuODQ0LS4xNDguMjkxLS40MDkuNDg4LS42MDEuNzM3LS4yMDEuMjQyLS40NzUuNDAzLS42OTIuNjA0LS4yMTMuMjEtLjQ5Mi4zMTUtLjcxNC40NjMtLjIzMi4xMzMtLjQzNC4yOC0uNjUuMzUtLjIwOC4wODYtLjM5LjE2LS41MzkuMjIyLS4zMDIuMTI1LS40NzQuMTk3LS40NzQuMTk3bC40ODQgMS45MzlzLjIxOC0uMDUyLjU5Ny0uMTQ0Yy4xOTEtLjA0OC40MjQtLjEwNC42ODktLjE3MS4yNzEtLjA1LjU2LS4xODcuODgyLS4zMTIuMzE3LS4xNDMuNjg2LS4yMzggMS4wMjgtLjQ2Ny4zNDQtLjIxOC43NDEtLjQgMS4wOTEtLjY5Mi4zMzktLjMwMS43NDgtLjU2MiAxLjA1LS45NDQuMzMtLjM1OC42NTYtLjczNC45MDktMS4xNjIuMjkzLS40MDguNDkyLS44NTYuNzAyLTEuMjk5LjE5LS40NDMuMzQzLS44OTYuNDY4LTEuMzM2LjIzNy0uODgyLjM0My0xLjcyLjM4NC0yLjQzNy4wMzQtLjcxOC4wMTQtMS4zMTUtLjAyOC0xLjc0Ny0uMDE1LS4yMDQtLjA0Mi0uNDAzLS4wNjMtLjUzOXptLTExIDBjLS4wMTctLjEwOS0uMDI1LS4xNjgtLjAyNS0uMTY4bC0uMDI2LjAwNmMtLjQzNC0yLjAzMy0yLjIzNy0zLjU1OS00LjM5OS0zLjU1OS0yLjQ4NSAwLTQuNSAyLjAxNS00LjUgNC41czIuMDE1IDQuNSA0LjUgNC41Yy4yMjMgMCAuNDM3LS4wMzQuNjUtLjA2NS0uMDY5LjIzMi0uMTQuNDY4LS4yNTQuNjgtLjExNC4zMDgtLjI5Mi41NzUtLjQ2OS44NDQtLjE0OC4yOTEtLjQwOS40ODgtLjYwMS43MzctLjIwMS4yNDItLjQ3NS40MDMtLjY5Mi42MDQtLjIxMy4yMS0uNDkyLjMxNS0uNzE0LjQ2My0uMjMyLjEzMy0uNDM0LjI4LS42NS4zNS0uMjA4LjA4Ni0uMzkuMTYtLjUzOS4yMjItLjMwMS4xMjMtLjQ3My4xOTUtLjQ3My4xOTVsLjQ4NCAxLjkzOXMuMjE4LS4wNTIuNTk3LS4xNDRjLjE5MS0uMDQ4LjQyNC0uMTA0LjY4OS0uMTcxLjI3MS0uMDUuNTYtLjE4Ny44ODItLjMxMi4zMTctLjE0My42ODYtLjIzOCAxLjAyOC0uNDY3LjM0NC0uMjE4Ljc0MS0uNCAxLjA5MS0uNjkyLjMzOS0uMzAxLjc0OC0uNTYyIDEuMDUtLjk0NC4zMy0uMzU4LjY1Ni0uNzM0LjkwOS0xLjE2Mi4yOTMtLjQwOC40OTItLjg1Ni43MDItMS4yOTkuMTktLjQ0My4zNDMtLjg5Ni40NjgtMS4zMzYuMjM3LS44ODIuMzQzLTEuNzIuMzg0LTIuNDM3LjAzNC0uNzE4LjAxNC0xLjMxNS0uMDI4LTEuNzQ3LS4wMTYtLjIwMi0uMDQzLS40MDEtLjA2NC0uNTM3eiI+PC9wYXRoPjwvc3ZnPgo=');
+  background-color: var(--block-quote-icon-color, var(--darkgray));
+  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIxLjk1IDguNzIxYy0uMDE3LS4xMDktLjAyNS0uMTY4LS4wMjUtLjE2OGwtLjAyNi4wMDZjLS40MzQtMi4wMzMtMi4yMzctMy41NTktNC4zOTktMy41NTktMi40ODUgMC00LjUgMi4wMTUtNC41IDQuNXMyLjAxNSA0LjUgNC41IDQuNWMuMjIzIDAgLjQzNy0uMDM0LjY1LS4wNjUtLjA2OS4yMzItLjE0LjQ2OC0uMjU0LjY4LS4xMTQuMzA4LS4yOTIuNTc1LS40NjkuODQ0LS4xNDguMjkxLS40MDkuNDg4LS42MDEuNzM3LS4yMDEuMjQyLS40NzUuNDAzLS42OTIuNjA0LS4yMTMuMjEtLjQ5Mi4zMTUtLjcxNC40NjMtLjIzMi4xMzMtLjQzNC4yOC0uNjUuMzUtLjIwOC4wODYtLjM5LjE2LS41MzkuMjIyLS4zMDIuMTI1LS40NzQuMTk3LS40NzQuMTk3bC40ODQgMS45MzlzLjIxOC0uMDUyLjU5Ny0uMTQ0Yy4xOTEtLjA0OC40MjQtLjEwNC42ODktLjE3MS4yNzEtLjA1LjU2LS4xODcuODgyLS4zMTIuMzE3LS4xNDMuNjg2LS4yMzggMS4wMjgtLjQ2Ny4zNDQtLjIxOC43NDEtLjQgMS4wOTEtLjY5Mi4zMzktLjMwMS43NDgtLjU2MiAxLjA1LS45NDQuMzMtLjM1OC42NTYtLjczNC45MDktMS4xNjIuMjkzLS40MDguNDkyLS44NTYuNzAyLTEuMjk5LjE5LS40NDMuMzQzLS44OTYuNDY4LTEuMzM2LjIzNy0uODgyLjM0My0xLjcyLjM4NC0yLjQzNy4wMzQtLjcxOC4wMTQtMS4zMTUtLjAyOC0xLjc0Ny0uMDE1LS4yMDQtLjA0Mi0uNDAzLS4wNjMtLjUzOXptLTExIDBjLS4wMTctLjEwOS0uMDI1LS4xNjgtLjAyNS0uMTY4bC0uMDI2LjAwNmMtLjQzNC0yLjAzMy0yLjIzNy0zLjU1OS00LjM5OS0zLjU1OS0yLjQ4NSAwLTQuNSAyLjAxNS00LjUgNC41czIuMDE1IDQuNSA0LjUgNC41Yy4yMjMgMCAuNDM3LS4wMzQuNjUtLjA2NS0uMDY5LjIzMi0uMTQuNDY4LS4yNTQuNjgtLjExNC4zMDgtLjI5Mi41NzUtLjQ2OS44NDQtLjE0OC4yOTEtLjQwOS40ODgtLjYwMS43MzctLjIwMS4yNDItLjQ3NS40MDMtLjY5Mi42MDQtLjIxMy4yMS0uNDkyLjMxNS0uNzE0LjQ2My0uMjMyLjEzMy0uNDM0LjI4LS42NS4zNS0uMjA4LjA4Ni0uMzkuMTYtLjUzOS4yMjItLjMwMS4xMjMtLjQ3My4xOTUtLjQ3My4xOTVsLjQ4NCAxLjkzOXMuMjE4LS4wNTIuNTk3LS4xNDRjLjE5MS0uMDQ4LjQyNC0uMTA0LjY4OS0uMTcxLjI3MS0uMDUuNTYtLjE4Ny44ODItLjMxMi4zMTctLjE0My42ODYtLjIzOCAxLjAyOC0uNDY3LjM0NC0uMjE4Ljc0MS0uNCAxLjA5MS0uNjkyLjMzOS0uMzAxLjc0OC0uNTYyIDEuMDUtLjk0NC4zMy0uMzU4LjY1Ni0uNzM0LjkwOS0xLjE2Mi4yOTMtLjQwOC40OTItLjg1Ni43MDItMS4yOTkuMTktLjQ0My4zNDMtLjg5Ni40NjgtMS4zMzYuMjM3LS44ODIuMzQzLTEuNzIuMzg0LTIuNDM3LjAzNC0uNzE4LjAxNC0xLjMxNS0uMDI4LTEuNzQ3LS4wMTYtLjIwMi0uMDQzLS40MDEtLjA2NC0uNTM3eiIvPjwvc3ZnPg==');
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIxLjk1IDguNzIxYy0uMDE3LS4xMDktLjAyNS0uMTY4LS4wMjUtLjE2OGwtLjAyNi4wMDZjLS40MzQtMi4wMzMtMi4yMzctMy41NTktNC4zOTktMy41NTktMi40ODUgMC00LjUgMi4wMTUtNC41IDQuNXMyLjAxNSA0LjUgNC41IDQuNWMuMjIzIDAgLjQzNy0uMDM0LjY1LS4wNjUtLjA2OS4yMzItLjE0LjQ2OC0uMjU0LjY4LS4xMTQuMzA4LS4yOTIuNTc1LS40NjkuODQ0LS4xNDguMjkxLS40MDkuNDg4LS42MDEuNzM3LS4yMDEuMjQyLS40NzUuNDAzLS42OTIuNjA0LS4yMTMuMjEtLjQ5Mi4zMTUtLjcxNC40NjMtLjIzMi4xMzMtLjQzNC4yOC0uNjUuMzUtLjIwOC4wODYtLjM5LjE2LS41MzkuMjIyLS4zMDIuMTI1LS40NzQuMTk3LS40NzQuMTk3bC40ODQgMS45MzlzLjIxOC0uMDUyLjU5Ny0uMTQ0Yy4xOTEtLjA0OC40MjQtLjEwNC42ODktLjE3MS4yNzEtLjA1LjU2LS4xODcuODgyLS4zMTIuMzE3LS4xNDMuNjg2LS4yMzggMS4wMjgtLjQ2Ny4zNDQtLjIxOC43NDEtLjQgMS4wOTEtLjY5Mi4zMzktLjMwMS43NDgtLjU2MiAxLjA1LS45NDQuMzMtLjM1OC42NTYtLjczNC45MDktMS4xNjIuMjkzLS40MDguNDkyLS44NTYuNzAyLTEuMjk5LjE5LS40NDMuMzQzLS44OTYuNDY4LTEuMzM2LjIzNy0uODgyLjM0My0xLjcyLjM4NC0yLjQzNy4wMzQtLjcxOC4wMTQtMS4zMTUtLjAyOC0xLjc0Ny0uMDE1LS4yMDQtLjA0Mi0uNDAzLS4wNjMtLjUzOXptLTExIDBjLS4wMTctLjEwOS0uMDI1LS4xNjgtLjAyNS0uMTY4bC0uMDI2LjAwNmMtLjQzNC0yLjAzMy0yLjIzNy0zLjU1OS00LjM5OS0zLjU1OS0yLjQ4NSAwLTQuNSAyLjAxNS00LjUgNC41czIuMDE1IDQuNSA0LjUgNC41Yy4yMjMgMCAuNDM3LS4wMzQuNjUtLjA2NS0uMDY5LjIzMi0uMTQuNDY4LS4yNTQuNjgtLjExNC4zMDgtLjI5Mi41NzUtLjQ2OS44NDQtLjE0OC4yOTEtLjQwOS40ODgtLjYwMS43MzctLjIwMS4yNDItLjQ3NS40MDMtLjY5Mi42MDQtLjIxMy4yMS0uNDkyLjMxNS0uNzE0LjQ2My0uMjMyLjEzMy0uNDM0LjI4LS42NS4zNS0uMjA4LjA4Ni0uMzkuMTYtLjUzOS4yMjItLjMwMS4xMjMtLjQ3My4xOTUtLjQ3My4xOTVsLjQ4NCAxLjkzOXMuMjE4LS4wNTIuNTk3LS4xNDRjLjE5MS0uMDQ4LjQyNC0uMTA0LjY4OS0uMTcxLjI3MS0uMDUuNTYtLjE4Ny44ODItLjMxMi4zMTctLjE0My42ODYtLjIzOCAxLjAyOC0uNDY3LjM0NC0uMjE4Ljc0MS0uNCAxLjA5MS0uNjkyLjMzOS0uMzAxLjc0OC0uNTYyIDEuMDUtLjk0NC4zMy0uMzU4LjY1Ni0uNzM0LjkwOS0xLjE2Mi4yOTMtLjQwOC40OTItLjg1Ni43MDItMS4yOTkuMTktLjQ0My4zNDMtLjg5Ni40NjgtMS4zMzYuMjM3LS44ODIuMzQzLTEuNzIuMzg0LTIuNDM3LjAzNC0uNzE4LjAxNC0xLjMxNS0uMDI4LTEuNzQ3LS4wMTYtLjIwMi0uMDQzLS40MDEtLjA2NC0uNTM3eiIvPjwvc3ZnPg==');
+  -webkit-mask-size: cover;
+  mask-size: cover;
 }
 
 .quote blockquote {
   margin: 0;
-  font: bold 24px/1.2em var(--sans);
-  letter-spacing: -0.3px;
+  font: bold var(--block-quote-font-size, 24px) / 1.2em var(--sans);
 }
 
 .quote blockquote p {
   margin: 0;
 }
 
 .quote cite {
-  font: 16px/1.4em var(--sans);
-  color: #4B5972;
-}
+  font: var(--block-quote-attribution-font-size, 16px) / 1.4em var(--sans);
+  font-weight: var(--block-quote-attribution-font-weight, normal);
+  color: var(--darkgray);
+}