1 files changed, 106 insertions, 0 deletions
diff --git a/sass/_layout.scss b/sass/_layout.scss
new file mode 100644
index 0000000..126fa96
--- /dev/null
+++ b/sass/_layout.scss
@@ -0,0 +1,106 @@
+.site-container {
+  width: min(calc(100% - 2rem), var(--site-max));
+  max-width: calc(100% - 2rem);
+  margin-inline: auto;
+}
+
+.site-main {
+  min-height: 65vh;
+}
+
+.narrow,
+.prose,
+.related-content {
+  width: min(100%, var(--content-max));
+  margin-inline: auto;
+}
+
+.home-intro {
+  padding-block: clamp(4rem, 10vw, 7rem);
+  border-bottom: var(--rule);
+}
+
+.home-intro h1 {
+  margin-bottom: 1rem;
+}
+
+.home-intro p {
+  max-width: 38rem;
+}
+
+.home-sections,
+.listing-page,
+.editorial-page,
+.article-page {
+  padding-block: clamp(3.5rem, 8vw, 6rem);
+}
+
+.home-sections {
+  display: grid;
+  gap: clamp(4rem, 9vw, 7rem);
+}
+
+.section-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: var(--rule);
+}
+
+.section-heading a {
+  white-space: nowrap;
+}
+
+.home-about {
+  width: min(100%, var(--content-max));
+  padding-top: 2rem;
+  border-top: var(--rule);
+}
+
+.home-about h2,
+.home-about p {
+  margin-bottom: 0.8rem;
+}
+
+.page-header {
+  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
+}
+
+.page-header h1 {
+  margin-bottom: 0.8rem;
+}
+
+.editorial-page .page-header {
+  margin-bottom: 2.5rem;
+}
+
+.error-page {
+  padding-block: clamp(5rem, 14vw, 10rem);
+}
+
+.error-page .error-code {
+  margin-bottom: 1rem;
+  color: var(--color-muted);
+  font-size: 0.9rem;
+}
+
+.error-page h1,
+.error-page > p {
+  margin-bottom: 1rem;
+}
+
+.error-page nav {
+  display: flex;
+  gap: 1.25rem;
+  margin-top: 2rem;
+}
+
+@media (max-width: 38rem) {
+  .section-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}