diff --git a/_extensions/closeread/closeread.css b/_extensions/closeread/closeread.css
index 7c3e0c2..e88a3e4 100644
--- a/_extensions/closeread/closeread.css
+++ b/_extensions/closeread/closeread.css
@@ -9,9 +9,12 @@
 .cr-section {
   display: grid;
   grid-template-rows: 1fr;
+  background-color: var(--cr-section-background-color);
 }
 .cr-section .narrative-col {
   grid-row: 1;
+  font-family: var(--cr-narrative-font-family);
+  font-size: var(--cr-narrative-font-size);
 }
 .cr-section .narrative-col .trigger {
   padding-block: 45svh;
@@ -39,10 +42,12 @@
   opacity: 0;
   transition: opacity linear 0.5s, color 0.7s linear, transform 1s ease-in-out, transform-origin 1s ease-in-out;
 }
-.cr-section .sticky-col .sticky-col-stack .sticky.cr-poem {
+.cr-section .sticky-col .sticky-col-stack .sticky:has(.line-block) {
+  font-family: var(--cr-poem-font-family);
   transition: transform 0.8s ease-in-out;
 }
-.cr-section .sticky-col .sticky-col-stack .sticky.cr-poem2 {
+.cr-section .sticky-col .sticky-col-stack .sticky:has(.line-block) {
+  font-family: var(--cr-poem-font-family);
   transition: transform 0.8s ease-in-out, font-size 0.8s ease-in-out;
 }
 .cr-section .sticky-col .sticky-col-stack .cr-active {
@@ -86,16 +91,17 @@
     grid-column: 1;
     z-index: 1;
     margin-inline: auto;
+    background-color: transparent;
   }
   .cr-section.sidebar-left .narrative-col .narrative,
   .cr-section.sidebar-right .narrative-col .narrative,
   .cr-section.overlay-left .narrative-col .narrative,
   .cr-section.overlay-right .narrative-col .narrative,
   .cr-section.overlay-center .narrative-col .narrative {
-    background-color: rgba(17, 17, 17, 0.85);
-    color: white;
+    background-color: var(--cr-narrative-background-color-overlay);
+    color: var(--cr-narrative-text-color-overlay);
     padding: 0.3em 0.5em;
-    border-radius: 5px;
+    border-radius: var(--cr-narrative-border-radius);
   }
   .cr-section.sidebar-left .sticky-col,
   .cr-section.sidebar-right .sticky-col,
@@ -116,14 +122,15 @@
   grid-column: 1;
   z-index: 1;
   transition: opacity 0.5s ease-in-out;
-  max-width: 527.98px;
+  max-width: var(--cr-narrative-overlay-max-width);
+  min-width: var(--cr-narrative-overlay-min-width);
 }
 .overlay-left .narrative-col .narrative,
 .overlay-center .narrative-col .narrative,
 .overlay-right .narrative-col .narrative {
-  background-color: rgba(17, 17, 17, 0.85);
-  color: white;
-  border-radius: 5px;
+  background-color: var(--cr-narrative-background-color-overlay);
+  color: var(--cr-narrative-text-color-overlay);
+  border-radius: var(--cr-narrative-border-radius);
 }
 .overlay-left .sticky-col,
 .overlay-center .sticky-col,
@@ -133,6 +140,7 @@
 
 .overlay-left .narrative-col {
   justify-self: start;
+  margin-left: var(--cr-narrative-outer-margin);
 }
 
 .overlay-center .narrative-col {
@@ -141,31 +149,36 @@
 
 .overlay-right .narrative-col {
   justify-self: end;
+  margin-right: var(--cr-narrative-outer-margin);
 }
 
 .sidebar-left {
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: var(--cr-narrative-sidebar-width) 2fr;
 }
 .sidebar-left .narrative-col {
   grid-column: 1;
   margin-inline: 0;
+  background-color: var(--cr-narrative-background-color-sidebar);
 }
 .sidebar-left .narrative-col .narrative {
   padding: 0 0.75em;
+  color: var(--cr-narrative-text-color-sidebar);
 }
 .sidebar-left .sticky-col {
   grid-column: 2;
 }
 
 .sidebar-right {
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 2fr var(cr-narrative-sidebar-width);
 }
 .sidebar-right .narrative-col {
   grid-column: 2;
   margin-inline: 0;
+  background-color: var(--cr-narrative-background-color-sidebar);
 }
 .sidebar-right .narrative-col .narrative {
   padding: 0 0.75em;
+  color: var(--cr-narrative-text-color-sidebar);
 }
 .sidebar-right .sticky-col {
   grid-column: 1;
@@ -197,41 +210,6 @@
   grid-column: 1 !important;
 }
 
-/* poem styles */
-.cr-poem {
-  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  /* need large font to stop safari text blurriness, but max-height to stop
-   other stickies from being pushed down by pre-scaled poem size */
-  max-height: 100dvh;
-  font-size: 300%;
-  white-space: pre;
-  line-height: 0.7em;
-  transform-origin: center center;
-}
-.cr-poem.cr-hl-within {
-  color: rgba(0, 0, 0, 0.4);
-}
-.cr-poem .cr-hl {
-  color: rgb(0, 0, 0);
-}
-
-.cr-poem2 {
-  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  max-height: 100svh;
-  max-width: 100svh;
-  font-size: 2.75cqmin;
-  white-space: pre;
-  line-height: 0.6em;
-  transform-origin: center center;
-}
-.cr-poem2.cr-hl-within {
-  color: rgba(0, 0, 0, 0.4);
-  font-size: 2.75cqi;
-}
-.cr-poem2 .cr-hl {
-  color: rgb(0, 0, 0);
-}
-
 /* debug styles */
 body.cr-debug .cr-poem {
   background-color: rgba(255, 255, 0, 0.6);
@@ -243,7 +221,7 @@ body.cr-debug .sticky {
 body.cr-debug .narrative-col .trigger {
   background: rgba(0, 208, 255, 0.5);
   border: 1px solid orange;
-  border-radius: 5px;
+  border-radius: var(--cr-narrative-border-radius);
 }
 body.cr-debug .narrative-col .trigger.new-trigger {
   background: lightgreen;
@@ -258,4 +236,21 @@ body.cr-removeheaderspace #quarto-content main#quarto-document-content .quarto-t
   display: none;
 }
 
+/* configurable style variables. use bootstrap variables where possible */
+:root {
+  --cr-narrative-background-color-overlay: #708090e1;
+  --cr-narrative-text-color-overlay: white;
+  --cr-narrative-background-color-sidebar: transparent;
+  --cr-narrative-text-color-sidebar: black;
+  --cr-narrative-border-radius: 1em;
+  --cr-narrative-overlay-max-width: 527.98px;
+  --cr-narrative-overlay-min-width: none;
+  --cr-narrative-outer-margin: 5%;
+  --cr-narrative-font-family: var(--bs-body-font-family);
+  --cr-narrative-font-size: 1.15rem;
+  --cr-poem-font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --cr-narrative-sidebar-width: 1fr;
+  --cr-section-background-color: lightgrey;
+}
+
 /*# sourceMappingURL=closeread.css.map */
diff --git a/_extensions/closeread/closeread.css.map b/_extensions/closeread/closeread.css.map
index b2db67a..c73ee14 100644
--- a/_extensions/closeread/closeread.css.map
+++ b/_extensions/closeread/closeread.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["closeread.scss"],"names":[],"mappings":"AACA;AAGA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EAEE;;AAIA;EACE;;AAOR;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAGA;EAEA,YACE;;AAMJ;EACE,YACE;;AAGJ;EACE,YACE;;AAKJ;EACE;;AAIA;EACE;EAEA,YACE;;AAGF;EACE;EAEA,YACA;;AAMJ;EACE;EAEA;;AAGA;EACE;EAEA;;AAIF;EACE;EAEA;;;AASZ;AACA;EACE;AAAA;AAAA;AAAA;AAAA;IAKE;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;IACA;;EAIJ;AAAA;AAAA;AAAA;AAAA;IACE;;;AAQN;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;;;AAMF;EACE;;;AAIF;EACE;;;AAIF;EACE;;;AAMJ;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;;AAGJ;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;;AAKJ;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;;AAKJ;AAEA;EAEE;AAEA;AAAA;EAEA;EACA;EAEA;EACA;EAGA;;AAGA;EACE;;AAGF;EACE;;;AAIJ;EAEE;EAGA;EACA;EAGA;EAEA;EACA;EAGA;;AAGA;EACE;EAEA;;AAGF;EACE;;;AAKJ;AAKE;EACE;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAEA;EACE;;;AAOR;AAII;EACE;EACA;;AAEA;EACE","file":"closeread.css"}
+{"version":3,"sourceRoot":"","sources":["closeread.scss"],"names":[],"mappings":"AACA;AAGA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;EACA;;AAEA;EACE;EAEA;EACA;;AAEA;EACE;EACA;;AAEA;EAEE;;AAIA;EACE;;AAOR;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAGA;EAEA,YACE;;AAMJ;EACE;EACA,YACE;;AAGJ;EACE;EACA,YACE;;AAKJ;EACE;;AAIA;EACE;EAEA,YACE;;AAGF;EACE;EAEA,YACA;;AAMJ;EACE;EAEA;;AAGA;EACE;EAEA;;AAIF;EACE;EAEA;;;AASZ;AACA;EACE;AAAA;AAAA;AAAA;AAAA;IAKE;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;IACA;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;IACA;;EAIJ;AAAA;AAAA;AAAA;AAAA;IACE;;;AAQN;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;;;AAMF;EACE;EACA;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAMJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;;;AAGJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;;;AAKJ;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;;AAIJ;AAKE;EACE;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAEA;EACE;;;AAOR;AAII;EACE;EACA;;AAEA;EACE;;;AAOR;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"closeread.css"}
\ No newline at end of file
diff --git a/_extensions/closeread/closeread.lua b/_extensions/closeread/closeread.lua
index 963de1a..539e5f6 100644
--- a/_extensions/closeread/closeread.lua
+++ b/_extensions/closeread/closeread.lua
@@ -15,6 +15,23 @@ local cr_attributes = {["pan-to"] = true,
 local remove_header_space = false
 local global_layout = "sidebar-left"
 
+-- default style options
+local style_options = {}
+local allowed_style_options = {
+  "narrative-background-color-overlay",
+  "narrative-text-color-overlay",
+  "narrative-text-color-sidebar",
+  "narrative-border-radius",
+  "narrative-overlay-max-width",
+  "narrative-overlay-min-width",
+  "narrative-outer-margin",
+  "narrative-font-family",
+  "narrative-font-size",
+  "poem-font-family",
+  "narrative-background-color-sidebar",
+  "section-background-color",
+  "narrative-sidebar-width"
+}
 
 --======================--
 -- Process YAML options --
@@ -38,6 +55,36 @@ function read_meta(m)
       global_layout = m["cr-section"]["layout"][1].text
     end
   end
+
+  -- style options: add values for any allowed keys to injected style string
+  if m["cr-style"] ~= nil then
+    for index, value in ipairs(allowed_style_options) do
+      if m["cr-style"][value] then
+        style_options[value] = pandoc.utils.stringify(m["cr-style"][value])
+      end
+    end
+  end
+
+  -- process style options into style strings using keys as css vars
+  local style_string = ""
+  for key, value in pairs(style_options) do
+    style_string = style_string ..
+      "--cr-" .. key .. ": " .. value .. ";\n"
+  end
+
+  -- inject style option style block
+  if style_string ~= "" then
+    local style_tag = [[
+      <!-- user-provided yaml closeread style options -->
+      <style>
+        :root {
+          ]] .. style_string .. [[
+        }
+      </style>
+    ]]
+    quarto.doc.include_text("before-body", style_tag)
+  end
+
   
   -- inject debug mode option in html <meta>
   quarto.doc.include_text("in-header", "<meta cr-debug-mode='" ..
diff --git a/_extensions/closeread/closeread.scss b/_extensions/closeread/closeread.scss
index 8a795dc..5c22c63 100644
--- a/_extensions/closeread/closeread.scss
+++ b/_extensions/closeread/closeread.scss
@@ -15,10 +15,14 @@
 .cr-section {
   display: grid;
   grid-template-rows: 1fr;
+  background-color: var(--cr-section-background-color);
 
   .narrative-col {
     grid-row: 1;
 
+    font-family: var(--cr-narrative-font-family);
+    font-size: var(--cr-narrative-font-size);
+
     .trigger {
       padding-block: 45svh;
       padding-inline: 24px;
@@ -63,12 +67,14 @@
           transform-origin 1s ease-in-out;
       }
       
-      .sticky.cr-poem {
+      .sticky:has(.line-block) {
+        font-family: var(--cr-poem-font-family);
         transition:
           transform .8s ease-in-out;
       }
       
-      .sticky.cr-poem2 {
+      .sticky:has(.line-block) {
+        font-family: var(--cr-poem-font-family);
         transition:
           transform .8s ease-in-out,
           font-size .8s ease-in-out;
@@ -135,12 +141,13 @@
       grid-column: 1;
       z-index: 1;
       margin-inline: auto;
+      background-color: transparent;
       
       .narrative {
-        background-color: rgba(17, 17, 17, .85);
-        color: white;
+        background-color: var(--cr-narrative-background-color-overlay);
+        color: var(--cr-narrative-text-color-overlay);
         padding: 0.3em 0.5em;
-        border-radius: 5px;
+        border-radius: var(--cr-narrative-border-radius);
       }
     }
 
@@ -162,12 +169,13 @@
     grid-column: 1;
     z-index: 1;
     transition: opacity 0.5s ease-in-out;
-    max-width: 527.98px;
+    max-width: var(--cr-narrative-overlay-max-width);
+    min-width: var(--cr-narrative-overlay-min-width);
     
     .narrative {
-      background-color: rgba(17, 17, 17, .85);
-      color: white;
-      border-radius: 5px;
+      background-color: var(--cr-narrative-background-color-overlay);
+      color: var(--cr-narrative-text-color-overlay);
+      border-radius: var(--cr-narrative-border-radius);
     }
   }
 
@@ -180,6 +188,7 @@
 .overlay-left {
   .narrative-col {
     justify-self: start;
+    margin-left: var(--cr-narrative-outer-margin);
   }
 }
 .overlay-center {
@@ -190,20 +199,23 @@
 .overlay-right {
   .narrative-col {
     justify-self: end;
+    margin-right: var(--cr-narrative-outer-margin);
   }
 }
 
 
 // sidebar layouts use two columns
 .sidebar-left {
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: var(--cr-narrative-sidebar-width) 2fr;
 
   .narrative-col {
     grid-column: 1;
     margin-inline: 0;
+    background-color: var(--cr-narrative-background-color-sidebar);
 
     .narrative {
       padding: 0 0.75em;
+      color: var(--cr-narrative-text-color-sidebar);
     }
   }
 
@@ -212,14 +224,16 @@
   }
 }
 .sidebar-right {
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 2fr var(cr-narrative-sidebar-width);
 
   .narrative-col {
     grid-column: 2;
     margin-inline: 0;
-
+    background-color: var(--cr-narrative-background-color-sidebar);
+    
     .narrative {
       padding: 0 0.75em;
+      color: var(--cr-narrative-text-color-sidebar);
     }
   }
 
@@ -249,64 +263,6 @@
   }
 }
 
-
-/* poem styles */
-
-.cr-poem {
-
-  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  
-  /* need large font to stop safari text blurriness, but max-height to stop
-   other stickies from being pushed down by pre-scaled poem size */
-  max-height: 100dvh; 
-  font-size: 300%;
-
-  white-space: pre;
-  line-height: .7em;
-  
-  // transform transition is applied along with all stickies
-  transform-origin: center center;
-
-  // fade the rest of the poem out when there's a highlight active
-  &.cr-hl-within {
-    color: rgba(0, 0, 0, 0.4);
-  }
-
-  .cr-hl {
-    color: rgba(0, 0, 0, 1);
-  }
-}
-
-.cr-poem2 {
-
-  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  
-  // size the poem to fit the screen
-  max-height: 100svh;
-  max-width: 100svh;
-  
-  // maybe this can be overridden with lua
-  font-size: 2.75cqmin;
-
-  white-space: pre;
-  line-height: .6em;
-  
-  // transform transition is applied along with all stickies
-  transform-origin: center center;
-
-  // fade the rest of the poem out when there's a highlight active
-  &.cr-hl-within {
-    color: rgba(0, 0, 0, 0.4);
-    // when there's a highlight, we only want to scale based on width!
-    font-size: 2.75cqi;
-  }
-
-  .cr-hl {
-    color: rgba(0, 0, 0, 1);
-  }
-}
-
-
 /* debug styles */
 
 body.cr-debug {
@@ -327,7 +283,7 @@ body.cr-debug {
     .trigger {
       background: rgba(0, 208, 255, 0.5);
       border: 1px solid orange;
-      border-radius: 5px;
+      border-radius: var(--cr-narrative-border-radius);
       
       &.new-trigger {
         background: lightgreen;
@@ -351,4 +307,23 @@ body.cr-removeheaderspace {
     }
   }
 
-}
\ No newline at end of file
+}
+
+/* configurable style variables. use bootstrap variables where possible */
+
+:root {
+  --cr-narrative-background-color-overlay: #708090e1;
+  --cr-narrative-text-color-overlay: white;
+  --cr-narrative-background-color-sidebar: transparent;
+  --cr-narrative-text-color-sidebar: black;
+  --cr-narrative-border-radius: 1em;
+  --cr-narrative-overlay-max-width: 527.98px;
+  --cr-narrative-overlay-min-width: none;
+  --cr-narrative-outer-margin: 5%;
+  --cr-narrative-font-family: var(--bs-body-font-family);
+  --cr-narrative-font-size: 1.15rem;
+  --cr-poem-font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --cr-narrative-sidebar-width: 1fr;
+  --cr-section-background-color: lightgrey;
+}
+
diff --git a/docs/gallery/demos/highlighting/index.qmd b/docs/gallery/demos/highlighting/index.qmd
index 70a09e7..7530d33 100644
--- a/docs/gallery/demos/highlighting/index.qmd
+++ b/docs/gallery/demos/highlighting/index.qmd
@@ -5,6 +5,11 @@ description: "Highlight lines or spans of code or line blocks."
 format:
   closeread-html:
     code-tools: true
+    cr-style:
+      narrative-background-color-overlay: transparent
+      narrative-background-color-sidebar: transparent
+      section-background-color: transparent
+      narrative-text-color-overlay: black
 ---
 
 Closeread enables the [highlighting](../../../guide/focus-effects.html#highlighting) of both code and text using a similar syntax.
diff --git a/docs/gallery/demos/ojs-variables/index.qmd b/docs/gallery/demos/ojs-variables/index.qmd
index 7316500..0c40a08 100644
--- a/docs/gallery/demos/ojs-variables/index.qmd
+++ b/docs/gallery/demos/ojs-variables/index.qmd
@@ -5,6 +5,11 @@ description: "Smoothly transition interactive OJS graphics."
 format:
   closeread-html:
     code-tools: true
+    cr-style:
+      narrative-background-color-overlay: "#111111dd"
+      narrative-text-color-overlay: white
+      narrative-background-color-sidebar: transparent
+      section-background-color: transparent
 ---
 
 Closeread makes scrolling progress available to users as [Observable JavasScript](https://quarto.org/docs/interactive/ojs) variables, so you can create closeread sections with interactive graphics that change as you scroll.
@@ -198,10 +203,11 @@ Plot.plot({
 
 ::::
 
+Sometimes it can be worth closing your story with some additional text to give the scrollytelling section some room to breathe. So here's some nonsense!
+
 :::{style="color: slategrey; font-style: italic;"}
 Eu in culpa officia cupidatat nostrud laborum do consequat officia Lorem tempor consectetur pariatur sunt. Veniam culpa dolore laborum nostrud ipsum pariatur ipsum dolore consectetur commodo ex. Non culpa deserunt voluptate. Amet excepteur incididunt deserunt pariatur velit labore do sunt occaecat eiusmod. Tempor proident sint exercitation culpa incididunt sunt proident sunt reprehenderit. Sint ipsum qui id nisi quis officia in. Anim velit minim fugiat qui dolor enim occaecat amet excepteur do aliqua ex adipisicing laboris labore.
 
 Culpa aute sint aliquip in aute enim cillum in exercitation cupidatat ex cupidatat mollit dolore ut. Et culpa minim laborum in ipsum laborum velit laboris fugiat ad culpa cillum. Sit nulla eu minim in nulla. Nulla esse sint occaecat eiusmod in irure in dolor veniam pariatur laboris consectetur sunt laboris excepteur. Dolor dolore ad incididunt consequat. Ad elit ullamco veniam cillum reprehenderit pariatur pariatur nisi ea. Pariatur quis ut deserunt eiusmod ipsum magna ullamco.
 
-Amet velit ea ex. Pariatur anim laboris fugiat labore velit ullamco aute aliquip incididunt. Ut labore voluptate exercitation esse aliquip dolor ex magna occaecat ullamco nisi sit non quis nulla. Elit qui do sunt consectetur officia sint veniam incididunt laboris aute eu nisi qui. Et voluptate consequat sunt commodo dolor dolor veniam minim incididunt culpa anim nulla duis est. Excepteur occaecat tempor veniam magna sit sunt enim sint exercitation dolore fugiat nulla consequat proident. Reprehenderit consequat reprehenderit amet dolore cillum elit dolore officia enim dolor.
 :::
\ No newline at end of file
diff --git a/docs/gallery/demos/zooming/index.qmd b/docs/gallery/demos/zooming/index.qmd
index 24c18f0..c8e614f 100644
--- a/docs/gallery/demos/zooming/index.qmd
+++ b/docs/gallery/demos/zooming/index.qmd
@@ -3,6 +3,11 @@ title: Zooming
 format:
   closeread-html:
     code-tools: true
+    cr-style:
+      narrative-background-color-overlay: transparent
+      narrative-background-color-sidebar: transparent
+      section-background-color: transparent
+      narrative-text-color-overlay: black
 ---
 
 Closeread enables the reader to zoom in on particular bits of both code and text using a similar syntax to highlighting
diff --git a/docs/gallery/examples/auden-poem/index.qmd b/docs/gallery/examples/auden-poem/index.qmd
index 884efab..059a95a 100644
--- a/docs/gallery/examples/auden-poem/index.qmd
+++ b/docs/gallery/examples/auden-poem/index.qmd
@@ -4,11 +4,38 @@ image: gabbert.png
 author: Elisa Gabbert
 format:
   closeread-html:
-    css: nytimes.css
     remove-header-space: true
     debug-mode: false
+    cr-style:
+      narrative-text-color-sidebar: white
+      narrative-font-family: 'Georgia, "Times New Roman", Times, serif'
+      narrative-font-size: 1.25rem
+      narrative-sidebar-width: minmax(400px, 1fr)
+      narrative-border-radius: 5px
+      narrative-background-color-overlay: "#111111dd"
+      narrative-background-color-sidebar: "#111111"
+      section-background-color: white
+      poem-font-family: 'Georgia, "Times New Roman", Times, serif'
 ---
 
+```{=html}
+<style>
+  @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
+
+  #quarto-document-content h1 {
+    font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
+    font-weight: 500;
+    font-size: 2.3em;
+    line-height: 1.1;
+    margin-top: 0;
+  }
+
+  .cr-section  .narrative-col  > *:first-child {
+    padding-block-start: 10svh;
+  }
+</style>
+```
+
 :::{.cr-section}
 
 :::{focus-on="cr-musee"}
diff --git a/docs/gallery/examples/auden-poem/nytimes.css b/docs/gallery/examples/auden-poem/nytimes.css
deleted file mode 100644
index 6fe93a6..0000000
--- a/docs/gallery/examples/auden-poem/nytimes.css
+++ /dev/null
@@ -1,53 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
-#quarto-document-content {
-  font-family: Georgia, "Times New Roman", Times, serif;
-  font-size: 15pt;
-}
-#quarto-document-content h1 {
-  font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
-  font-weight: 500;
-  font-size: 2.8em;
-  line-height: 1;
-}
-
-.cr-section .narrative-col {
-  background-color: rgb(17, 17, 17);
-  color: white;
-  min-width: 400px;
-  /* Override the padding for the first block */
-}
-.cr-section .narrative-col > *:first-child {
-  padding-block-start: 10svh;
-}
-
-/* mobile sizing (bootstrap: xs) is always overlay-center */
-@media (max-width: 575.98px) {
-  .cr-section.sidebar-left .narrative-col,
-  .cr-section.sidebar-right .narrative-col,
-  .cr-section.overlay-left .narrative-col,
-  .cr-section.overlay-right .narrative-col,
-  .cr-section.overlay-center .narrative-col {
-    background-color: transparent;
-  }
-  .cr-section.sidebar-left .narrative-col .narrative > *,
-  .cr-section.sidebar-right .narrative-col .narrative > *,
-  .cr-section.overlay-left .narrative-col .narrative > *,
-  .cr-section.overlay-right .narrative-col .narrative > *,
-  .cr-section.overlay-center .narrative-col .narrative > * {
-    background-color: rgba(17, 17, 17, 0.85);
-    padding: 5px;
-    border-radius: 5px;
-  }
-}
-.cr-section.overlay-left .narrative-col,
-.cr-section.overlay-center .narrative-col,
-.cr-section.overlay-right .narrative-col {
-  background-color: transparent;
-}
-.cr-section.overlay-left .narrative-col .narrative,
-.cr-section.overlay-center .narrative-col .narrative,
-.cr-section.overlay-right .narrative-col .narrative {
-  background-color: rgba(17, 17, 17, 0.7);
-}
-
-/*# sourceMappingURL=nytimes.css.map */
diff --git a/docs/gallery/examples/auden-poem/nytimes.css.map b/docs/gallery/examples/auden-poem/nytimes.css.map
deleted file mode 100644
index c290b09..0000000
--- a/docs/gallery/examples/auden-poem/nytimes.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["nytimes.scss"],"names":[],"mappings":"AACQ;AAGR;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;AAEA;;AACA;EACE;;;AAKN;AAEA;EAOI;AAAA;AAAA;AAAA;AAAA;IACE;;EAIE;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;;AAUR;AAAA;AAAA;EACE;;AAEA;AAAA;AAAA;EACE","file":"nytimes.css"}
\ No newline at end of file
diff --git a/docs/gallery/examples/auden-poem/nytimes.scss b/docs/gallery/examples/auden-poem/nytimes.scss
deleted file mode 100644
index 8e4947c..0000000
--- a/docs/gallery/examples/auden-poem/nytimes.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-
-@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
-
-
-#quarto-document-content {
-  font-family: Georgia, "Times New Roman", Times, serif;
-  font-size: 15pt;
-  
-  h1 {
-    font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
-    font-weight: 500;
-    font-size: 2.8em;
-    line-height: 1;
-  }
-}
-
-.cr-section {
-  
-  .narrative-col {
-    background-color: rgba(17, 17, 17, 1);
-    color: white;
-    min-width: 400px;
-    
-    /* Override the padding for the first block */
-    > *:first-child {
-      padding-block-start: 10svh;
-    }
-  }
-}
-
-/* mobile sizing (bootstrap: xs) is always overlay-center */
-//@media (max-width: 575.98px) {
-@media (max-width: 575.98px) {
-  .cr-section.sidebar-left,
-  .cr-section.sidebar-right,
-  .cr-section.overlay-left,
-  .cr-section.overlay-right,
-  .cr-section.overlay-center {
-    
-    .narrative-col {
-      background-color: transparent;
-      
-      .narrative {
-        
-        > * {
-          background-color: rgba(17, 17, 17, .85);
-          padding: 5px;
-          border-radius: 5px;
-        }
-      }
-    }
-  }
-}
-
-.cr-section.overlay-left,
-.cr-section.overlay-center,
-.cr-section.overlay-right {
-  .narrative-col {
-    background-color: transparent;
-    
-    .narrative {
-      background-color: rgba(17, 17, 17, .7);
-    }
-  }
-}
diff --git a/docs/gallery/examples/minards-map/cr-tufte.css b/docs/gallery/examples/minards-map/cr-tufte.css
index da95bc9..9ecf07a 100644
--- a/docs/gallery/examples/minards-map/cr-tufte.css
+++ b/docs/gallery/examples/minards-map/cr-tufte.css
@@ -66,7 +66,6 @@
 /* A small subset of the official Tufte CSS styles */
 
 #quarto-content {
-  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antqua", Georgia, serif;
   background-color: #fffff8;
   color: #111;
   counter-reset: sidenote-counter;
diff --git a/docs/gallery/examples/minards-map/index.qmd b/docs/gallery/examples/minards-map/index.qmd
index aade891..37e76a7 100644
--- a/docs/gallery/examples/minards-map/index.qmd
+++ b/docs/gallery/examples/minards-map/index.qmd
@@ -8,6 +8,13 @@ format:
     code-tools: true
     image: mindard-map.png
     description: Revisiting a classic of data visualization
+    mainfont: 'et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif'
+    cr-style:
+      narrative-background-color-overlay: transparent
+      narrative-background-color-sidebar: transparent
+      section-background-color: transparent
+      narrative-text-color-overlay: black
+      narrative-font-family: 'et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif'
 ---
 
 :::{.epigraph}
diff --git a/docs/index-styles.css b/docs/index-styles.css
deleted file mode 100644
index 63f5155..0000000
--- a/docs/index-styles.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.cr-section {
-  background-color: rgba(39, 128, 227, 1);
-}
-
-.cr-section .narrative-col {
-  font-size: 1.4em;
-}
-
-.cr-section .sticky-col {
-  font-size: 0.6em;
-}
diff --git a/docs/index.qmd b/docs/index.qmd
index b09477a..f5125ec 100644
--- a/docs/index.qmd
+++ b/docs/index.qmd
@@ -3,9 +3,26 @@ title: "Closeread"
 format:
   closeread-html:
     theme: cosmo
-    css: index-styles.css
+    cr-style:
+      narrative-background-color-overlay: "#111111d9"
+      narrative-border-radius: 10px
+      # if you refer to other css variables, escape the double-hyphen
+      section-background-color: "var(\\-\\-bs-primary)"
+      narrative-text-color-overlay: "var(\\-\\-bs-light)"
 ---
 
+```{=html}
+<style>
+  .cr-section .narrative-col {
+    font-size: 1.4em;
+  }
+
+  .cr-section .sticky-col {
+    font-size: 0.6em;
+  }
+</style>
+```
+
 closeread is a custom format for [Quarto](https://quarto.org/) that enables scrollytelling features for html documents.
 
 Install the extension by running the following command in the directory you wish to use it:
@@ -26,7 +43,7 @@ format: closeread-html
 \
 \
 
-::::{.cr-section layout="overlay-center" style="font-size: 1.5em; background-color: rgba(39, 128, 227, 0.2);"}
+::::{.cr-section layout="overlay-center" style="font-size: 1.5em;"}
 
 Get your first closeread doc up and running in four steps. @cr-doc
 
@@ -73,4 +90,3 @@ Draw your readers attention with: @cr-features
 \
 
 For guidance on how to author closeread documents, read the [Guide](guide/index.qmd). For examples of closeread documents alongside their source, see the [Gallery](gallery/index.qmd). For a catalog of the syntax and yaml options used in the closeread extension, see the [Reference](reference/index.qmd).
-