1 files changed, 58 insertions, 0 deletions

diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
new file mode 100644
index 0000000..6b28e9c
--- /dev/null
+++ b/assets/css/scopes/_headlines.scss
@@ -0,0 +1,58 @@
+@include namespace('headlines') {
+    @include store((
+        --colors: (
+            --emph: (
+                --bg: prop(--colors --bg-hi, $global: true),
+            )
+        )
+    ));
+
+    @include scope(namespace()) {
+        h1,
+        h2,
+        h3,
+        h4 {
+            transform: translateX(-.06em);
+        }
+
+        h1 {
+            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
+        }
+
+        h2 {
+            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
+        }
+
+        h3 {
+            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
+
+            letter-spacing: .05em;
+            text-transform: uppercase;
+        }
+
+        h4,
+        h5,
+        h6 {
+            @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
+
+            letter-spacing: .1em;
+            text-transform: uppercase;
+        }
+
+        h5,
+        h6 {
+            color:       currentColor;
+            font-weight: 400;
+        }
+
+        @include element('title-inner') {
+            background-image: linear-gradient(
+                to top,
+                transparent .15em,
+                #{prop(--colors --emph --bg)} .15em,
+                #{prop(--colors --emph --bg)} .6em,
+                transparent .6em
+            );
+        }
+    }
+}