@charset "UTF-8";
/*
Theme Name: Rural Blog
Theme URI: https://owldraft.com/themes/rural-blog
Author: Owl Draft
Author URI: https://owldraft.com
Description: Rural Blog is a minimal blog WordPress theme for blogger, writer, personal website, freelancer, reviewer, traveler, instagram creator, photographer and anybody who wants a simple yet powerful blog site. It focuses on readability, minimalism and loading speed. Theme performance is 99/100 on mobile and desktop. Accessibility tested & passed. The theme requires zero plugins, no Google fonts, only self-hosted built-in WordPress font libs, tiny CSS and Javascript, just your words. Rural is a classic WordPress theme (ie. not FSE theme) with Theme Customizer panel to customize header, footer, typography, layout.. View live demo at: https://rural-blog.owldraft.com/. Support this theme: https://ko-fi.com/owldraft
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.0
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rural-blog
Tags: one-column, two-columns, left-sidebar, right-sidebar, grid-layout, custom-colors, custom-menu, custom-logo, editor-style, featured-images, theme-options, threaded-comments, translation-ready, blog, custom-background
*/
/* ============================================================================
   TABLE OF CONTENTS
   ----------------------------------------------------------------------------
   All SCSS lives in this single file. Compile with:  sass style.scss style.css

   00. Mixins ........ responsive breakpoint mixin + CSS custom properties
   01. Normalize ..... normalize.css v8.0.1
   02. Setup ......... base reset/setup shared across themes
   03. Elements ...... html, body, headings, media, links, blockquote,
                       forms, buttons, code, lists
   04. Blocks ........ WordPress core blocks
   05. Header ........ site header, primary nav, offcanvas menu, hamburger
   06. Footer ........ site footer
   07. Single ........ single post / page content
   08. Archives ...... archive / index layout
   09. Widgets ....... widget area
   10. Reduced motion  honour prefers-reduced-motion
   ========================================================================== */
/* ============================================================================
   00. MIXINS
   ========================================================================== */
/* ============================================================================
   01. NORMALIZE
   ========================================================================== */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration-thickness: 1px;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration-style: dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* ============================================================================
   02. SETUP
   ========================================================================== */
/**
 * Responsive Styles
 */
/**
 * a11y
 */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.skip-link:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* ============================================================================
   03. ELEMENTS
   ========================================================================== */
:root {
  /* Layout */
  --narrow-width: 620px;
  --wide-width: 900px; /* alignwide width, between reading and full */
  --container-width: 94%;
  --container-max-width: 1400px; /* the cap .container never grows past */
  --sidebar-width: 300px; /* the .secondary column on the sidebar layouts */
  --layout-gap: 3.5rem; /* space between .main and .secondary */
  --grid-gap: 2.5rem; /* space between cards in the grid display */
}
@media only screen and (max-width: 821.98px) {
  :root {
    --container-width: 96%;
  }
}
:root {
  /* Font Size */
  --font-size-base: 1rem;
  --font-size-xs: 1rem;
  --font-size-sm: 1.125rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2.25rem;
  --font-size-xxl: 4rem;
  --font-size-xxxl: 5rem;
  --font-size-page-title: var(--font-size-xxl);
  /* Colors */
  --color-accent: rgb(255, 251, 0);
  --color-black: #000;
  --color-gray: #777;
  --color-gray-light: #aaa;
  --color-white: #fff;
  --color-border: #e0e0e0;
  --color-border-hover: #d0d0d0;
  --color-link: #fc0;
  --color-link-hover: #fc0;
  --selection-color: black;
  --selection-bg-color: #ffd;
  --color-light-gray: #f0f0f0;
  --color-light-gray-darker: #e0e0e0;
  /* Body */
  --body-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body-font-size: var(--font-size-base);
  --body-line-height: 1.5;
  --body-font-weight: 400;
  --body-letter-spacing: 0;
  --body-text-transform: none;
  --body-color: var(--color-black);
  --body-background: var(--color-white);
  /* Heading */
  --heading-font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-line-height: 1.25;
  --heading-font-weight: 600;
  --heading-letter-spacing: 0;
  --heading-text-transform: uppercase;
  --heading-font-size-h6: var(--font-size-xs);
  --heading-font-size-h5: var(--font-size-sm);
  --heading-font-size-h4: var(--font-size-lg);
  --heading-font-size-h3: calc(1.1 * var(--font-size-lg));
  --heading-font-size-h2: var(--font-size-xl);
  --heading-font-size-h1: 2.8em;
  --heading-color: var(--color-black);
  /* Nav */
  --nav-font: var(--heading-font);
  --nav-font-size: 11px;
  --nav-line-height: 1.5;
  --nav-letter-spacing: 1px;
  --nav-font-weight: 600;
  --nav-text-transform: uppercase;
  /* Header */
  --color-header-background: var(--body-background);
  --color-header-text: var(--body-color);
  --color-header-border: rgba(0,0,0,.05);
  --header-height: 60px;
  --subheader-height: 48px; /* the second (menu) row on the Nav-below header layout */
  --logo-height: 44px;
  --color-header-link: inherit;
  --color-header-link-hover: #767676;
  --color-nav-dropdown-bg: #f0f0f0;
  --color-nav-dropdown: var(--color-header-link);
  --color-nav-dropdown-hover: #777;
  /* Footer */
  --color-footer-background: var(--body-background);
  --color-footer-text: var(--body-color);
  --footer-padding-top: 6em;
  --footer-padding-bottom: 3em;
  /* Spacing */
  --spacing-unit: 20px;
  --spacing-horizontal: 25px;
  --spacing-vertical: 50px;
}
@media only screen and (max-width: 591.98px) {
  :root {
    --spacing-vertical: 30px;
  }
}
:root {
  --spacing-huge: 100px;
  --spacing-big: 60px;
  --spacing-medium: 40px;
  --spacing-small: 20px;
  /* Content */
  --single-content-font: inherit;
  --single-content-font-size: 1.1em;
  /* Single post title — Design > Single post. Defaults follow the heading role,
     so an untouched site renders exactly as before h1.entry-title carried them. */
  --single-title-font: var(--heading-font);
  --single-title-font-size: 1.4em;
  --single-title-font-weight: 600;
  --single-title-letter-spacing: 0;
  --single-title-text-transform: uppercase;
  --single-title-line-height: 1.25;
  /* Single post subtitle — Design > Single post. Defaults follow the body role. */
  --single-subtitle-font: var(--body-font);
  --single-subtitle-font-size: 1.1em;
  --single-subtitle-font-weight: 400;
  --single-subtitle-letter-spacing: 0;
  --single-subtitle-text-transform: none;
  --single-subtitle-line-height: 1.5;
  /* Forms */
  --form--color-text: var(--color-black);
  --form--spacing-unit: 10px;
  --form--border-color: #767676;
  /* Admin-bar height */
  --admin-bar--height: 0px;
}

@media screen and (max-width: 700px) {
  :root {
    --narrow-width: 100%;
  }
}
@media only screen and (max-width: 1089.98px) {
  :root {
    --footer-padding-top: 4em;
  }
}
@media only screen and (max-width: 591.98px) {
  :root {
    --footer-padding-top: 2em;
    --footer-padding-bottom: 2em;
  }
}
::-moz-selection {
  color: var(--selection-color);
  background-color: var(--selection-bg-color);
}
::selection {
  color: var(--selection-color);
  background-color: var(--selection-bg-color);
}

.admin-bar {
  --admin-bar--height: 32px;
}
@media only screen and (max-width: 782px) {
  .admin-bar {
    --admin-bar--height: 46px;
  }
}

#page {
  overflow: hidden;
}

/* has line top
------------------------------ */
.archive-header {
  position: relative;
  padding-bottom: 2em;
  margin-bottom: 2em;
}
.archive-header::before {
  border-top: 3px solid;
  width: 60px;
  margin-left: -30px;
  position: absolute;
  z-index: 10;
  display: block;
  bottom: 0;
  left: 50%;
  content: "";
}

/* pagination
------------------------------ */
.wp-block-query-pagination-numbers, .page-links, .nav-links {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: center;
}
.wp-block-query-pagination-numbers > a, .page-links > a, .nav-links > a {
  color: inherit;
  display: block;
}
.wp-block-query-pagination-numbers > span, .page-links > span, .nav-links > span {
  opacity: 0.5;
}
.wp-block-query-pagination-numbers > * + *, .page-links > * + *, .nav-links > * + * {
  margin-left: 10px;
}
.wp-block-query-pagination-numbers > *, .page-links > *, .nav-links > * {
  display: block;
  text-align: center;
  line-height: 32px;
  height: 32px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9em;
  text-decoration: none;
}
.wp-block-query-pagination-numbers > *.next, .page-links > *.next, .nav-links > *.next, .wp-block-query-pagination-numbers > *.prev, .page-links > *.prev, .nav-links > *.prev {
  display: flex;
  align-items: center;
  width: auto;
}
.wp-block-query-pagination-numbers > *.next svg, .page-links > *.next svg, .nav-links > *.next svg, .wp-block-query-pagination-numbers > *.prev svg, .page-links > *.prev svg, .nav-links > *.prev svg {
  width: 16px;
  height: 16px;
}
.wp-block-query-pagination-numbers > *.next svg, .page-links > *.next svg, .nav-links > *.next svg {
  margin-left: 4px;
}
.wp-block-query-pagination-numbers > *.prev svg, .page-links > *.prev svg, .nav-links > *.prev svg {
  margin-right: 4px;
}

/* link hover
------------------------------ */
.author-title a, .wp-block-query-pagination-numbers > a, .page-links > a, .nav-links > a {
  color: inherit;
}
.author-title a:hover, .wp-block-query-pagination-numbers > a:hover, .page-links > a:hover, .nav-links > a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* meta
------------------------------ */
.widget_nav_menu nav > ul ul,
.widget_nav_menu nav > ul ol,
.wp-block-archives-list ul,
.wp-block-archives-list ol,
.wp-block-categories-list ul,
.wp-block-categories-list ol,
.wp-block-latest-posts__list ul,
.wp-block-latest-posts__list ol,
.wp-block-page-list ul,
.wp-block-page-list ol,
.wp-block-rss ul,
.wp-block-rss ol,
.widget_rss ul ul,
.widget_rss ul ol,
.widget_archive ul ul,
.widget_archive ul ol,
.widget_nav_menu ul ul,
.widget_nav_menu ul ol,
.widget_meta ul ul,
.widget_meta ul ol,
.widget_recent_comments ul ul,
.widget_recent_comments ul ol,
.widget_recent_entries ul ul,
.widget_recent_entries ul ol,
.widget_pages ul ul,
.widget_pages ul ol,
.widget_categories ul ul,
.widget_categories ul ol,
.widget_product_categories ul ul,
.widget_product_categories ul ol, .widget_nav_menu nav > ul,
.wp-block-archives-list,
.wp-block-categories-list,
.wp-block-latest-posts__list,
.wp-block-page-list,
.wp-block-rss,
.widget_rss ul,
.widget_archive ul,
.widget_nav_menu ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_pages ul,
.widget_categories ul,
.widget_product_categories ul, .wp-block-latest-comments__comment-meta, .entry-meta, #reply-title,
.comments-title, .reply, .comment-metadata, .entry-tags, .offcanvas-close span, blockquote cite,
blockquote footer {
  font-family: var(--heading-font);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: var(--heading-font-weight);
  letter-spacing: 0.3px;
}
.wp-block-archives-list ul a,
.wp-block-archives-list ol a,
.wp-block-categories-list ul a,
.wp-block-categories-list ol a,
.wp-block-latest-posts__list ul a,
.wp-block-latest-posts__list ol a,
.wp-block-page-list ul a,
.wp-block-page-list ol a,
.wp-block-rss ul a,
.wp-block-rss ol a,
.widget_rss ul ul a,
.widget_rss ul ol a,
.widget_archive ul ul a,
.widget_archive ul ol a,
.widget_nav_menu ul ul a,
.widget_nav_menu ul ol a,
.widget_meta ul ul a,
.widget_meta ul ol a,
.widget_recent_comments ul ul a,
.widget_recent_comments ul ol a,
.widget_recent_entries ul ul a,
.widget_recent_entries ul ol a,
.widget_pages ul ul a,
.widget_pages ul ol a,
.widget_categories ul ul a,
.widget_categories ul ol a,
.widget_product_categories ul ul a,
.widget_product_categories ul ol a,
.wp-block-archives-list a,
.wp-block-categories-list a,
.wp-block-latest-posts__list a,
.wp-block-page-list a,
.wp-block-rss a,
.widget_rss ul a,
.widget_archive ul a,
.widget_nav_menu ul a,
.widget_meta ul a,
.widget_recent_comments ul a,
.widget_recent_entries ul a,
.widget_pages ul a,
.widget_categories ul a,
.widget_product_categories ul a, .wp-block-latest-comments__comment-meta a, .entry-meta a, #reply-title a,
.comments-title a, .reply a, .comment-metadata a, .entry-tags a, .offcanvas-close span a, blockquote cite a,
blockquote footer a {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
}
.wp-block-archives-list a:hover,
.wp-block-categories-list a:hover,
.wp-block-latest-posts__list a:hover,
.wp-block-page-list a:hover,
.wp-block-rss a:hover,
.widget_rss ul a:hover,
.widget_archive ul a:hover,
.widget_nav_menu ul a:hover,
.widget_meta ul a:hover,
.widget_recent_comments ul a:hover,
.widget_recent_entries ul a:hover,
.widget_pages ul a:hover,
.widget_categories ul a:hover,
.widget_product_categories ul a:hover, .wp-block-latest-comments__comment-meta a:hover, .entry-meta a:hover, #reply-title a:hover,
.comments-title a:hover, .reply a:hover, .comment-metadata a:hover, .entry-tags a:hover, .offcanvas-close span a:hover, blockquote cite a:hover,
blockquote footer a:hover {
  opacity: 0.6;
  text-decoration: none;
}

/* button
------------------------------ */
.header-button, .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link, button,
input[type=submit],
.button {
  position: relative;
  background: none;
  text-decoration: none;
  text-align: center;
  font-weight: var(--heading-font-weight);
  text-transform: var(--heading-text-transform);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 13px 40px;
  line-height: 24px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  transition: all 0.1s ease-out;
  cursor: pointer;
  font-family: var(--heading-font);
}
.header-button:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button__link:hover, button:hover,
input[type=submit]:hover,
.button:hover {
  background: var(--color-black);
  border-color: var(--color-black);
  color: white;
}

.header-button--outline, .wp-block-button.is-style-outline .wp-block-button__link {
  color: inherit;
  border: 1px solid;
  padding-top: 12px;
  padding-bottom: 12px;
}
.header-button--outline:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: none;
  color: inherit;
  border: 1px solid;
}

.header-button--black, .wp-block-button__link, button,
input[type=submit],
.button {
  color: white;
  background-color: black;
}

.header-button {
  padding: 8px 30px;
}

.header-button--outline {
  padding: 6px 30px;
}

/* box sizing
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
------------------------------------------------- */
html {
  /* Apply border-box across the entire page. */
  box-sizing: border-box;
  font-family: var(--body-font);
  line-height: var(--body-line-height);
}

/**
 * Relax the definition a bit, to allow components to override it manually.
 */
*, *::before, *::after {
  box-sizing: inherit;
}

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* body
------------------------------------------------- */
body {
  background: var(--body-background);
  text-align: left;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
  color: var(--body-color);
}
@media only screen and (max-width: 591.98px) {
  body {
    font-size: 0.9em;
  }
}

/* heading
------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .heading-font, .comment-list .fn {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--heading-line-height);
  text-transform: var(--heading-text-transform);
  color: var(--heading-color);
}

h1 {
  font-size: var(--heading-font-size-h1);
}

h2 {
  font-size: var(--heading-font-size-h2);
}
@media only screen and (max-width: 591.98px) {
  h2 {
    font-size: 1.8em;
  }
}

h3 {
  font-size: var(--heading-font-size-h3);
}

h4 {
  font-size: var(--heading-font-size-h4);
}

h5 {
  font-size: var(--heading-font-size-h5);
}

h6 {
  font-size: var(--heading-font-size-h6);
}

/* misc
------------------------------------------------- */
b,
strong {
  font-weight: bolder;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

pre {
  white-space: pre;
  overflow-x: auto;
}

.entry-content > code {
  display: block;
}

/* helpful classes
------------------------------------------------- */
.rural-blog-warning {
  background: red;
  color: white;
  padding: 10px;
}
.rural-blog-warning p {
  margin: 0;
}
.rural-blog-warning p a {
  color: inherit;
}

.hide {
  display: none;
}

/* link
------------------------------------------------- */
a {
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-link);
}

a:hover {
  text-decoration: none;
}

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
  outline: 2px dotted;
}

/* media
------------------------------------------------- */
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.entry-content img {
  max-width: 100%;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
video {
  max-width: 100%;
}

/* Media captions */
figcaption,
.wp-caption,
.wp-caption-text,
.wp-block-embed figcaption {
  font-size: 1em;
  line-height: var(--heading-line-height);
  margin-top: calc(0.5 * var(--spacing-unit));
  margin-bottom: var(--spacing-unit);
  text-align: center;
  opacity: 0.7;
}
.alignleft figcaption, .alignright figcaption,
.alignleft .wp-caption,
.alignright .wp-caption,
.alignleft .wp-caption-text,
.alignright .wp-caption-text,
.alignleft .wp-block-embed figcaption,
.alignright .wp-block-embed figcaption {
  margin-bottom: 0;
}
figcaption a,
.wp-caption a,
.wp-caption-text a,
.wp-block-embed figcaption a {
  color: var(--color-black);
  text-decoration: none;
  text-transform: uppercase;
}
figcaption a:hover,
.wp-caption a:hover,
.wp-caption-text a:hover,
.wp-block-embed figcaption a:hover {
  text-decoration: underline;
}

/* WP Smiley */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Table
-------------------- */
table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-collapse: collapse;
}

td, th {
  border: 1px solid var(--color-border);
  padding: 0.5em;
  text-align: center;
}

/* classic gallery
------------------------------------------------- */
.gallery {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -4px 24px;
}

.gallery-item {
  display: block;
  text-align: center;
  padding: 4px;
  margin: 0;
}

.gallery-columns-2 .gallery-item {
  width: 50%;
}

.gallery-columns-3 .gallery-item {
  width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  width: 25%;
}

.gallery-columns-5 .gallery-item {
  width: 20%;
}

.gallery-columns-6 .gallery-item {
  width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  width: 11.11%;
}

.gallery-columns-10 .gallery-item {
  width: 10%;
}

/* blockquote
------------------------------------------------- */
blockquote {
  padding: 0;
  position: relative;
  border: 0;
  text-transform: uppercase;
  font-family: var(--heading-font);
  letter-spacing: 1px;
  font-weight: 600;
}
blockquote a {
  color: inherit;
}
blockquote cite,
blockquote footer {
  margin-top: 1em;
  display: block;
}
blockquote cite:before,
blockquote footer:before {
  content: "—";
  margin-right: 10px;
}

blockquote cite {
  font-size: 11px;
}

/* embeds
------------------------------------------------- */
.wp-block-embed-twitter.alignwide {
  margin-left: auto;
  margin-right: auto;
}

/* form
------------------------------------------------- */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
.site textarea {
  border: 0;
  border-radius: 0;
  color: var(--form--color-text);
  max-width: 100%;
  background: rgba(0, 0, 0, 0.07);
  transition: color 0.15s, background 0.15s, border 0.15s;
  font-size: 16px;
  padding: 13px 16px;
  line-height: 24px;
}
@media only screen and (max-width: 591.98px) {
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=tel],
  input[type=date],
  input[type=month],
  input[type=week],
  input[type=time],
  input[type=datetime],
  input[type=datetime-local],
  input[type=color],
  .site textarea {
    padding: 8px 12px;
  }
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
.site textarea {
  font-family: var(--body-font);
  width: 400px;
}
@media only screen and (max-width: 591.98px) {
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=tel],
  input[type=date],
  input[type=month],
  input[type=week],
  input[type=time],
  input[type=datetime],
  input[type=datetime-local],
  input[type=color],
  .site textarea {
    width: 100%;
  }
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
.site textarea:focus {
  color: var(--form--color-text);
  outline: 2px dotted var(--form--border-color);
  outline-offset: 2px;
  background: rgba(0, 0, 0, 0.1);
}
input[type=text]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled,
input[type=date]:disabled,
input[type=month]:disabled,
input[type=week]:disabled,
input[type=time]:disabled,
input[type=datetime]:disabled,
input[type=datetime-local]:disabled,
input[type=color]:disabled,
.site textarea:disabled {
  opacity: 0.7;
}

.site textarea {
  width: 100%;
}

input[type=color] {
  padding: calc(var(--form--spacing-unit) / 2);
  height: calc(4 * var(--form--spacing-unit));
}

input[type=email],
input[type=url] {
  /*rtl:ignore*/
  direction: ltr;
}

select {
  border: 1px solid var(--form--border-color);
  color: var(--form--color-text);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  line-height: var(--body-line-height);
  padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
  background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
  background-position: right var(--form--spacing-unit) top 60%;
}
select:focus {
  outline-offset: 2px;
  outline: 2px dotted var(--form--border-color);
}

textarea {
  width: 100%;
}

label {
  font-family: var(--heading-font);
  font-size: 0.7em;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/**
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
License: MIT.
*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type=checkbox],
  input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 25px;
    height: 25px;
    border: var(--form--border-width) solid var(--form--border-color);
    background: #ddd;
  }
  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    opacity: 0.7;
  }
  input[type=checkbox]:focus {
    outline-offset: 2px;
    outline: 2px dotted var(--form--border-color);
  }
  input[type=checkbox]:after {
    content: "";
    opacity: 0;
    display: block;
    left: 8px;
    top: 4px;
    position: absolute;
    width: 7px;
    height: 13px;
    border: 3px solid var(--form--color-text);
    border-top: 0;
    border-left: 0;
    transform: rotate(30deg);
  }
  input[type=checkbox]:checked {
    color: var(--form--color-text);
  }
  input[type=checkbox]:checked:after {
    opacity: 1;
  }
  input[type=radio] {
    border-radius: 50%;
  }
  input[type=radio]:focus {
    outline-offset: 2px;
    outline: 2px dotted var(--form--border-color);
  }
  input[type=radio]:after {
    content: "";
    opacity: 0;
    display: block;
    left: 3px;
    top: 3px;
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--form--color-text);
  }
  input[type=radio]:checked {
    border: 4px solid var(--form--border-color);
  }
  input[type=radio]:checked:after {
    opacity: 1;
  }
  input[type=radio]:checked:focus {
    outline-offset: 4px;
    outline: 2px dotted var(--form--border-color);
  }
}
input[type=checkbox] + label,
input[type=radio] + label {
  display: inline;
  padding-left: 10px;
  vertical-align: top;
}

fieldset {
  display: grid;
  border-color: var(--color-secondary);
  padding: var(--spacing-horizontal);
}
fieldset legend {
  font-size: var(--font-size-lg);
}
fieldset input[type=submit] {
  max-width: -moz-max-content;
  max-width: max-content;
}
fieldset input:not([type=submit]) {
  margin-bottom: var(--spacing-unit);
}
fieldset input[type=radio], fieldset input[type=checkbox] {
  margin-bottom: 0;
}
fieldset input[type=radio] + label, fieldset input[type=checkbox] + label {
  font-size: var(--form--font-size);
  padding-left: 0;
  margin-bottom: var(--spacing-unit);
}

::-moz-placeholder {
  opacity: 1;
}

.post-password-message {
  font-size: var(--font-size-xs);
}

.post-password-form {
  display: flex;
  flex-wrap: wrap;
}
.post-password-form__label {
  width: 100%;
  margin-bottom: 0;
}
.post-password-form input[type=password] {
  flex-grow: 1;
  margin-top: calc(var(--spacing-vertical) / 3);
  margin-right: calc(0.66 * var(--spacing-horizontal));
}
.post-password-form__submit {
  margin-top: calc(var(--spacing-vertical) / 3);
}
@media only screen and (max-width: 821.98px) {
  .post-password-form__submit {
    margin-left: calc(0.4 * var(--spacing-horizontal));
  }
}

/* button
------------------------------------------------- */
button,
input[type=submit],
.button {
  cursor: pointer;
}

/* pre
------------------------------------------------- */
code,
kbd,
tt,
var,
samp,
pre {
  font-family: Inconsolata, monospace;
  hyphens: none;
}

pre {
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0.07);
  background-color: whitesmoke;
  border: 1px dashed #bababa;
  font-size: 14px;
  border: 0;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.2em;
  border-radius: 0;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.wp-block-code,
.wp-block-preformatted {
  border: 0;
  border-radius: 0;
}

mark {
  background: #ffd;
  padding: 0 5px;
}

/* list
------------------------------------------------- */
ul,
ol {
  margin: 0;
  padding-left: 1.5em;
  line-height: 1.45;
}
ul.aligncenter,
ol.aligncenter {
  list-style-position: inside;
  padding: 0;
}
ul.alignright,
ol.alignright {
  list-style-position: inside;
  text-align: right;
  padding: 0;
}

li {
  margin-bottom: 0.3em;
}

ul ul,
ul ol,
ol ul,
ol ol {
  padding-left: 2em;
  margin-top: 0.2em;
}
ul ul li,
ul ol li,
ol ul li,
ol ol li {
  margin-bottom: 0;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: decimal;
}
ol ul {
  list-style-type: circle;
}

dt {
  font-family: var(--definition-term--font-family);
  font-weight: bold;
}

dd {
  margin: 0;
  padding-left: calc(2 * var(--spacing-horizontal));
}

/* clearing
------------------------------------------------- */
.container:before,
.container:after,
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.container:after,
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/* site layout
------------------------------------------------- */
.container {
  width: var(--container-width);
  display: block;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* spacing
------------------------------------------------- */
.site-main > article > *,
.site-main > .not-found > *,
.entry-content > *,
[class*=inner-container] > *,
.wp-block-template-part > *,
.wp-block-post-template :where(li > *) {
  margin-top: calc(0.666 * var(--spacing-vertical));
  margin-bottom: calc(0.666 * var(--spacing-vertical));
}
@media only screen and (max-width: 591.98px) {
  .site-main > article > *,
  .site-main > .not-found > *,
  .entry-content > *,
  [class*=inner-container] > *,
  .wp-block-template-part > *,
  .wp-block-post-template :where(li > *) {
    margin-top: var(--spacing-vertical);
    margin-bottom: var(--spacing-vertical);
  }
}
.site-main > article > *:first-child,
.site-main > .not-found > *:first-child,
.entry-content > *:first-child,
[class*=inner-container] > *:first-child,
.wp-block-template-part > *:first-child,
.wp-block-post-template :where(li > *):first-child {
  margin-top: 0;
}
.site-main > article > *:last-child,
.site-main > .not-found > *:last-child,
.entry-content > *:last-child,
[class*=inner-container] > *:last-child,
.wp-block-template-part > *:last-child,
.wp-block-post-template :where(li > *):last-child {
  margin-bottom: 0;
}

/* ============================================================================
   04. BLOCKS
   ========================================================================== */
/* ---------------------------- general align */
@media only screen and (min-width: 482px) {
  .entry-content > .alignright,
  .entry-content > .alignleft,
  .entry-content > .blocks-gallery-grid:not(.has-nested-images).alignleft,
  .entry-content > .blocks-gallery-grid:not(.has-nested-images).alignright,
  .entry-content > .wp-block-gallery:not(.has-nested-images).alignleft,
  .entry-content > .wp-block-gallery:not(.has-nested-images).alignright {
    max-width: 50%;
  }
  .alignright,
  .blocks-gallery-grid:not(.has-nested-images).alignright,
  .wp-block-gallery:not(.has-nested-images).alignright {
    float: right;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: 1em;
  }
  .alignleft,
  .blocks-gallery-grid:not(.has-nested-images).alignleft,
  .wp-block-gallery:not(.has-nested-images).alignleft {
    float: left;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-right: 1em;
  }
}
/* ---------------------------- gallery */
.wp-block-gallery:not(.has-nested-images) {
  margin: 2em 0;
}

/* ---------------------------- blockquote */
blockquote.wp-block-quote {
  position: relative;
  font-size: 1em;
  border: 0;
}
blockquote.wp-block-quote:before {
  content: "“";
  font-size: 2em;
  font-family: serif;
}
blockquote.wp-block-quote cite {
  font-size: 11px;
  font-style: normal;
}
blockquote.wp-block-quote p {
  font-size: 1.1em;
}

/* ---------------------------- pull quote */
.wp-block-pullquote {
  font-size: 1em;
  padding-top: 2em;
  padding-bottom: 2em;
}

/* ---------------------------- separator */
/* ---------------------------- button */
/* ---------------------------- gallery */
.gallery-caption {
  font-size: 0.8em;
  text-align: left;
}

.blocks-gallery-caption {
  color: inherit;
}

/* ---------------------------- image */
.entry-content > figure:not(.alignwide):not(.alignfull) {
  max-width: 100%;
}

.wp-block-image {
  text-align: center;
}
.wp-block-image .alignright {
  margin-left: calc(var(--spacing-horizontal));
}
.wp-block-image .alignleft {
  margin-right: calc(var(--spacing-horizontal));
}
.wp-block-image a:focus img {
  outline-offset: 2px;
}

.entry-content > *[class=wp-block-image],
.entry-content [class*=inner-container] > *[class=wp-block-image] {
  margin-top: 0;
}
.entry-content > *[class=wp-block-image] + *,
.entry-content [class*=inner-container] > *[class=wp-block-image] + * {
  margin-top: 0;
}

/* alignwide / alignfull - centered breakout, only when the screen is wide enough */
@media only screen and (min-width: 822px) {
  .alignwide,
  .wp-block-gallery:not(.has-nested-images).alignwide {
    width: var(--wide-width);
    max-width: 90vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .alignwide figcaption,
  .alignwide .wp-element-caption,
  .wp-block-gallery:not(.has-nested-images).alignwide figcaption,
  .wp-block-gallery:not(.has-nested-images).alignwide .wp-element-caption {
    max-width: var(--narrow-width);
    margin-inline: auto;
  }
}

/* alignfull */
@media only screen and (min-width: 822px) {
  .alignfull,
  .wp-block-gallery:not(.has-nested-images).alignfull {
    width: 96vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .alignfull figcaption,
  .alignfull .wp-element-caption,
  .wp-block-gallery:not(.has-nested-images).alignfull figcaption,
  .wp-block-gallery:not(.has-nested-images).alignfull .wp-element-caption {
    max-width: var(--narrow-width);
    margin-inline: auto;
  }
}

.alignleft figcaption {
  text-align: left;
}

.alignright figcaption {
  text-align: left;
}

.entry-content .wp-block-image figcaption {
  font-size: 0.8em;
}
.entry-content .wp-block-image figure.alignleft {
  max-width: 50%;
}

@media only screen and (max-width: 591.98px) {
  .entry-content > .wp-block-image > .alignleft,
  .entry-content > .wp-block-image > .alignright {
    max-width: 50%;
  }
}

/* ---------------------------- drop cap */
.has-drop-cap:not(:focus):first-letter {
  float: left;
  font-size: 4em;
  font-style: normal;
  font-weight: var(--heading-font-weight);
  line-height: 0.7;
  margin: 0.2em 0.2em 0 0;
}

/* ---------------------------- cover */
.wp-block-cover .wp-block-cover__inner-container .wp-block-heading {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wp-block-cover > img {
  transition: all 0.2s;
}
.wp-block-cover:hover > img {
  transform: scale(1.02);
}

/* ---------------------------- details */
.wp-block-details summary {
  font-family: var(--heading-font);
  text-transform: uppercase;
}

/* ---------------------------- media text */
@media only screen and (max-width: 591.98px) {
  .wp-block-media-text > .wp-block-media-text__content {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
  }
}

.wp-block-media-text__content .wp-block-heading {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wp-block-media-text__content p {
  margin: 1em 0;
}
.wp-block-media-text__content .wp-block-buttons {
  margin-top: 2em;
}

/* ============================================================================
   05. HEADER
   ========================================================================== */
/* ---------------------------- header layout */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--color-header-background);
  border-bottom: 1px solid var(--color-header-border);
  color: var(--color-header-text);
}
.site-header .container {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--header-height);
  /* The bar is flex, never floated, so it wants none of the global
     clearfix. Its :before/:after would otherwise blockify into two stray
     flex items — which is exactly why the default bar leans on auto margins
     instead of gap. Dropping them here lets the layouts below use `gap` and
     absolute side-runs cleanly. */
}
.site-header .container:before, .site-header .container:after {
  content: none;
}
.site-header svg path {
  fill: currentColor;
}

.admin-bar .site-header {
  top: 32px;
}

body {
  padding-top: var(--header-height);
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}
/* ---------------------------- branding */
@media only screen and (min-width: 1090px) {
  .site-branding {
    display: block;
    display: flex;
    align-items: center;
  }
}
.site-branding {
  max-width: 50%;
  max-height: 100%;
  overflow: hidden;
}
.site-branding img {
  height: var(--logo-height);
  max-height: 400px;
  width: auto;
  display: block;
}

.site-title {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  text-transform: uppercase;
  font-size: 1.2em;
  letter-spacing: 1px;
  margin: 0;
  color: inherit;
  line-height: 1.1;
}
@media only screen and (max-width: 591.98px) {
  .site-title {
    letter-spacing: 0;
  }
}
.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-description {
  margin: 0;
  line-height: 1.2;
  font-size: 0.8em;
}
@media only screen and (min-width: 1090px) {
  .site-description {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (max-width: 591.98px) {
  .site-description {
    font-size: 0.7em;
  }
}

/* ---------------------------- primary navigation */
/* ---------------------------- header actions (menu + social + search + button) */
/* The right-hand half of the bar. One flex row, so `gap` owns the spacing between
   the four pieces and each of them can stay ignorant of what sits next to it. */
.header-actions {
  display: flex;
  align-items: center;
  /* Full bar height, so .header-search can stretch through it and hang its
     panel off the header's bottom edge rather than the icon's. */
  align-self: stretch;
  gap: 20px;
  /* Where the group sits is the layout's call, not the base's — the default
     bar pushes branding's margin instead (see the header-layout rules below),
     Logo-center pins the group absolute-right, Nav-below spreads it across the
     top row. So no auto margin here anymore. */
  /* Every piece hides at this breakpoint anyway — dropping the group instead
     leaves the mobile bar as just branding + hamburger. */
}
@media only screen and (max-width: 821.98px) {
  .header-actions {
    display: none;
  }
}

/* ---------------------------- header layouts
   Three arrangements of the same five pieces (branding, primary nav, social,
   search, button), chosen in Header and hung on .site-header as
   .header-layout-{default|logo-center|nav-below}. The bar is one flex .container
   whose clearfix pseudos are dropped above, so the side layouts can absolutely
   position their left/right runs and leave the logo genuinely centred.

   The SAME class is also mirrored onto <body> — but purely so the Nav-below rule
   can grow the page's padding-top from above the header (see the body rule below).
   That is why every arrangement rule here is scoped .site-header.header-layout-*
   (both classes on ONE element), NOT the bare .header-layout-* the class name
   suggests: .container / .site-branding are generic — the bare descendant selector
   would match through the <body> copy and restyle the content and footer
   containers site-wide. Compound-scoping keeps these rules inside the bar.

   Everything here is desktop-only: below the tablet breakpoint every layout
   collapses to the same branding + hamburger bar (the actions/nav/social all
   hide), so the two-row and centred rules never reach a phone. */
/* Default — logo left, then nav + actions pushed hard right. branding's auto
   margin does the split (an auto margin on the group would strand the nav in the
   middle when both are present), and the container gap spaces nav from actions. */
.site-header.header-layout-default .container {
  -moz-column-gap: 20px;
       column-gap: 20px;
}
.site-header.header-layout-default .site-branding {
  margin-right: auto;
}

/* Logo center — nav on the left, the actions trio on the right, logo centred
   between them. Both side runs are absolute (per the brief) so neither one's
   width can shove the logo off centre; the branding centres itself in the
   remaining flow. The primary nav can't stay display:flex once absolute or it
   collapses to its content width mid-bar, which is fine — it hugs the left edge. */
.site-header.header-layout-logo-center .container {
  justify-content: center;
}
.site-header.header-layout-logo-center {
  /* Logo over tagline, both centred — the base bar sits them side by side with
     a divider, which reads wrong under a centred logo. display:flex is set here,
     not left to the base rule: the base only turns branding into a flex box at
     ≥1090px, so between the tablet breakpoint (822px) and there the column
     stacking would silently fall back to left-aligned blocks. */
}
.site-header.header-layout-logo-center .site-branding {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.site-header.header-layout-logo-center .primary-navigation {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.site-header.header-layout-logo-center .header-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Nav below — two rows. Top row: social left, logo centred, search + button
   right (the two side runs absolute again). Bottom row: the primary nav, full
   width and centred. The container grows to hold both rows, so --header-height
   sizes the top row via min-height and body.header-layout-nav-below (below) pads
   the page for the whole thing. */
.site-header.header-layout-nav-below .container {
  flex-wrap: wrap;
  height: auto;
  min-height: var(--header-height);
  justify-content: center;
}
.site-header.header-layout-nav-below {
  /* Logo over tagline, both centred and vertically centred in the top row —
     same reasoning as Logo-center. */
}
.site-header.header-layout-nav-below .site-branding {
  max-width: none;
  min-height: var(--header-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.site-header.header-layout-nav-below {
  /* The actions group spans the top row so its own margin can split it: social
     to the left of the logo, search + button to the right. */
}
.site-header.header-layout-nav-below .header-actions {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-height);
}
.site-header.header-layout-nav-below .header-actions .social-navigation {
  margin-right: auto;
}
.site-header.header-layout-nav-below {
  /* Second row: the menu, centred, on its own strip under the top row. */
}
.site-header.header-layout-nav-below .primary-navigation {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-header-border);
}
.site-header.header-layout-nav-below .primary-navigation ul.menu-wrapper {
  justify-content: center;
  min-height: var(--subheader-height);
}

/* Pad the page for the extra menu row so the fixed two-row bar never covers the
   top of the content. Mirrors --header-height's job for the single-row bars. This
   is the ONE rule that genuinely wants the <body> class — the page box is above
   the header in the tree, so it can't read the header's own class. */
body.header-layout-nav-below {
  padding-top: calc(var(--header-height) + var(--subheader-height));
  /* Below the breakpoint the menu row is gone (nav hides with the rest), so the
     bar is a single row again and only needs --header-height of clearance. */
}
@media only screen and (max-width: 821.98px) {
  body.header-layout-nav-below {
    padding-top: var(--header-height);
  }
}

/* Stacked branding: drop the tagline's side divider and left padding (a
   horizontal-row treatment) and let it sit centred under the logo instead. */
.site-header.header-layout-logo-center .site-description,
.site-header.header-layout-nav-below .site-description {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* Mobile: every layout is the same plain bar — branding on the left, hamburger
   on the right, and nothing else. Undo the desktop nav/branding placement so a
   centred or two-row layout doesn't leak onto small screens. */
@media only screen and (max-width: 821.98px) {
  .site-header .primary-navigation {
    display: none;
  }
  .site-header.header-layout-logo-center .container,
  .site-header.header-layout-nav-below .container {
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: var(--header-height);
    min-height: 0;
  }
  .site-header.header-layout-logo-center,
  .site-header.header-layout-nav-below {
    /* Back to the default bar's block branding — logo then tagline, left
       aligned — so the stacked/centred desktop treatment doesn't leak down. */
  }
  .site-header.header-layout-logo-center .site-branding,
  .site-header.header-layout-nav-below .site-branding {
    display: block;
    min-height: 0;
    text-align: left;
  }
}
.primary-navigation {
  font-family: var(--nav-font);
}

.primary-navigation ul.menu-wrapper {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-navigation ul.menu-wrapper a {
  transition: all 0.1s ease-out;
}
.primary-navigation ul.menu-wrapper li {
  margin: 0;
}
.primary-navigation ul.menu-wrapper > li {
  display: flex;
  align-items: center;
  position: relative;
}
.primary-navigation ul.menu-wrapper > li + li {
  margin-left: 20px;
}
.primary-navigation ul.menu-wrapper > li a {
  display: block;
  color: var(--color-header-link);
  text-decoration: none;
  text-transform: var(--nav-text-transform);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  font-weight: var(--nav-font-weight);
  line-height: var(--nav-line-height);
  padding: 5px 0;
  transition: all 0.1s;
}
.primary-navigation ul.menu-wrapper > li a:hover {
  color: var(--color-header-link-hover);
}
.primary-navigation ul.menu-wrapper > li ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  width: 180px;
  z-index: 20;
  background: var(--color-nav-dropdown-bg);
  list-style: none;
  margin: 0;
  padding: 18px 0;
}
.primary-navigation ul.menu-wrapper > li ul > li {
  position: relative;
}
.primary-navigation ul.menu-wrapper > li ul .sub-menu-toggle {
  display: none;
}
.primary-navigation ul.menu-wrapper > li ul a {
  transition: all 0.1s;
  padding: 3px 18px;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.05s;
  color: var(--color-nav-dropdown);
}
.primary-navigation ul.menu-wrapper > li ul a:hover {
  color: var(--color-nav-dropdown-hover);
}
.primary-navigation ul.menu-wrapper > li ul ul {
  top: 0;
  left: 100%;
}
.primary-navigation ul.menu-wrapper > li:hover > ul, .primary-navigation ul.menu-wrapper > li:focus-within > ul, .primary-navigation ul.menu-wrapper > li.is-open > ul,
.primary-navigation ul.menu-wrapper > li li:hover > ul,
.primary-navigation ul.menu-wrapper > li li:focus-within > ul,
.primary-navigation ul.menu-wrapper > li li.is-open > ul {
  opacity: 1;
  visibility: visible;
}
.primary-navigation ul.menu-wrapper > li:hover > ul a, .primary-navigation ul.menu-wrapper > li:focus-within > ul a, .primary-navigation ul.menu-wrapper > li.is-open > ul a,
.primary-navigation ul.menu-wrapper > li li:hover > ul a,
.primary-navigation ul.menu-wrapper > li li:focus-within > ul a,
.primary-navigation ul.menu-wrapper > li li.is-open > ul a {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}

.sub-menu-toggle {
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  background: none;
  color: var(--color-header-link);
  padding-left: 5px;
  display: block;
  opacity: 0.4;
  background: none;
}
.sub-menu-toggle:hover {
  color: currentColor;
  background: none;
  border: 0;
}
.sub-menu-toggle:focus {
  outline: 2px dotted;
}
.sub-menu-toggle span {
  display: block;
}
.sub-menu-toggle svg {
  width: 12px;
  height: 12px;
}

.sub-menu-toggle .iconup {
  display: none;
}

.primary-navigation ul.menu-wrapper > li:hover > .sub-menu-toggle .iconup,
.primary-navigation ul.menu-wrapper > li:focus-within > .sub-menu-toggle .iconup,
.primary-navigation ul.menu-wrapper > li.is-open > .sub-menu-toggle .iconup {
  display: block;
}
.primary-navigation ul.menu-wrapper > li:hover > .sub-menu-toggle .icondown,
.primary-navigation ul.menu-wrapper > li:focus-within > .sub-menu-toggle .icondown,
.primary-navigation ul.menu-wrapper > li.is-open > .sub-menu-toggle .icondown {
  display: none;
}

/* ---------------------------- social */
.social-navigation {
  margin-left: auto;
}
.social-navigation svg path {
  fill: currentColor;
}

/* In the bar it's one item in the .header-actions row — the gap spaces it, and
   the auto margin above (which the footer still wants) would fight that. */
.header-actions .social-navigation {
  margin-left: 0;
}

.social-navigation .social-navigation-wrapper {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-navigation .social-navigation-wrapper > li {
  display: block;
  margin: 0;
}
.social-navigation .social-navigation-wrapper > li > a {
  display: block;
  height: 20px;
  line-height: 20px;
  text-decoration: none;
  padding: 0 8px;
  transition: all 0.2s;
}
.social-navigation .social-navigation-wrapper > li > a svg {
  width: 14px;
  height: 14px;
}

.social-navigation a {
  color: inherit;
}

.site-header .social-navigation a {
  color: var(--color-header-link);
}
.site-header .social-navigation a:hover {
  color: var(--color-header-link-hover);
}

/* ---------------------------- header search */
/* The wrapper is the positioning context; main.js flips .is-open on it. It sits
   at the right end of the header bar — margin-left:auto when it's the only thing
   on that side, a plain gap when the social nav already claimed the space. */
.header-search {
  position: relative;
  /* Full bar height, so the panel's top:100% lands on the header's bottom
     edge instead of the icon's — and the icon gets a comfortable hit area. */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  flex: none;
  /* No room on the mobile bar — the hamburger takes the right end and the
     off-canvas panel carries the search form instead. */
}
@media only screen and (max-width: 821.98px) {
  .header-search {
    display: none;
  }
}

/* The toggle pads itself 8px a side to keep a comfortable hit area. Pull that
   padding back out of the row so the icon lands on the group's 20px rhythm
   rather than 28px, and sits flush with the container edge when it's last. */
.header-actions .header-search {
  margin-left: -8px;
  margin-right: -8px;
}

/* Toggle holds both icons stacked; .is-open swaps the magnifier for a close. */
button.header-search-toggle {
  background: none;
  outline: 0;
  padding: 0 8px;
  border: 0;
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-header-link);
  transition: color 0.2s;
}
button.header-search-toggle:hover {
  color: var(--color-header-link-hover);
}
button.header-search-toggle:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}
button.header-search-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

.header-search-close-icon {
  display: none;
}

.header-search.is-open .header-search-toggle .header-search-icon {
  display: none;
}
.header-search.is-open .header-search-toggle .header-search-close-icon {
  display: block;
}

/* Panel — drops directly under the icon, anchored to the toggle's right edge
   (the search sits at the right end of the bar), so it extends leftward and
   never runs off-screen. */
.header-search-panel {
  position: absolute;
  z-index: 200;
  top: 100%;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 2rem);
  padding: 16px;
  background-color: var(--color-header-background);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.header-search-panel[hidden] {
  display: none;
}
.header-search-panel input[type=search] {
  min-width: 0;
}

/* ---------------------------- header button */
/* The optional call-to-action from the customizer Header section. This rule is
   the look only — it's shared with the off-canvas copy, which is laid out by the
   panel, not by the bar. */
.header-button {
  /* No room on the mobile bar — the off-canvas panel carries the button
     instead (see .header-button--block), so the CTA survives the breakpoint
     rather than disappearing. */
}
@media only screen and (max-width: 821.98px) {
  .header-button {
    display: none;
  }
}

/* Bar placement: last item in the .header-actions row, spaced by its gap. */
.header-actions .header-button {
  flex: none;
}

/* Every variant keeps the padding %_button_small set, so switching style never
   resizes the button — only the outline one trades its fill for a border. */
.header-button--primary {
  color: var(--body-color);
  background-color: var(--color-accent);
}

.header-button--white {
  color: var(--color-black);
  background-color: var(--color-white);
}

/* Outline follows the header text rather than naming a color, so it stays
   legible on the light skin, the dark skin, and any custom header color. */
.header-button--outline {
  background: none;
}

/* The off-canvas copy — full width under the stacked menu, and exempt from the
   mobile hide above (the panel only ever opens on mobile). */
.header-button--block {
  display: block;
  width: 100%;
  white-space: normal;
}
@media only screen and (max-width: 821.98px) {
  .header-button--block {
    display: block;
  }
}

/* ---------------------------- hamburger */
button.offcanvas-open-btn {
  background: none;
  outline: 0;
  padding: 0;
  border: 0;
  margin: 0;
  display: block;
  width: 40px;
  height: 32px;
  text-align: right;
  cursor: pointer;
  display: none;
  color: inherit;
  margin-left: auto;
  flex: none;
}
@media only screen and (max-width: 821.98px) {
  button.offcanvas-open-btn {
    display: block;
  }
}
button.offcanvas-open-btn:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}

/* ---------------------------- offcanvas */
.offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  width: 90%;
  max-width: 320px;
  height: 100vh;
  min-height: 100%;
  z-index: 999;
  background: inherit;
  padding: 0 32px;
  padding-top: 60px;
  padding-bottom: 60px;
  overflow-y: scroll;
  display: block;
  transition: all 0.2s ease-out;
  transform: translate(102%, 0);
  visibility: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.admin-bar .offcanvas {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .offcanvas {
    top: 46px;
  }
}
.offcanvas::-webkit-scrollbar {
  display: none;
}

.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  z-index: 990;
  transition: all 0.2s ease-out;
  opacity: 0;
  visibility: hidden;
}

.html-offcanvas-open .offcanvas {
  transform: translate(0, 0);
  visibility: visible;
}
.html-offcanvas-open .offcanvas-overlay {
  opacity: 1;
  visibility: visible;
}

.offcanvas-close {
  background: none;
  color: inherit;
  padding: 0;
  border: 0;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 48px;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
}
.offcanvas-close:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}
.offcanvas-close span {
  margin-right: 4px;
  font-size: 14px;
}
.offcanvas-close svg {
  width: 18px;
  height: 18px;
}
.offcanvas-close:hover {
  background: none;
  color: inherit;
}

.offcanvas-element + .offcanvas-element {
  margin-top: 2em;
}

/* The mobile stand-in for the header search icon — no reveal, the form is just
   there at the top of the panel. */
.offcanvas-search .search-form input[type=search] {
  min-width: 0;
  font-size: 16px;
}

.offcanvas-primary-navigation {
  font-family: var(--nav-font);
  font-weight: var(--nav-font-weight);
  text-transform: var(--nav-text-transform);
  letter-spacing: var(--nav-letter-spacing);
  font-size: calc(var(--nav-font-size) + 1px);
}

.offcanvas-primary-navigation > div > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offcanvas-primary-navigation > div > ul a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 10px 0;
  line-height: 24px;
}
.offcanvas-primary-navigation > div > ul li {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  margin-bottom: 0;
}
.offcanvas-primary-navigation > div > ul li a {
  width: 100%;
}
.offcanvas-primary-navigation > div > ul li ul {
  width: 100%;
}
.offcanvas-primary-navigation > div > ul li.menu-item-has-children > .sub-menu-toggle {
  display: none;
}
.offcanvas-primary-navigation > div > ul ul > li {
  padding-left: 20px;
}
.offcanvas-primary-navigation > div > ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all 0.2s ease-out;
}

.offcanvas .social-navigation-wrapper > li + li {
  margin-left: 4px;
}
.offcanvas .social-navigation .social-navigation-wrapper > li > a svg {
  width: 20px;
  height: 20px;
}

/* ============================================================================
   06. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--color-footer-background);
  color: var(--color-footer-text);
}

.site-footer .container {
  padding: var(--footer-padding-top) 0 var(--footer-padding-bottom);
}

/* copyright
-------------------------------- */
.copyright {
  font-size: 0.9em;
  text-align: center;
  margin: 0 auto 1em;
  max-width: var(--narrow-width);
}
@media only screen and (max-width: 591.98px) {
  .copyright {
    margin-bottom: 20px;
    text-align: center;
  }
}
.copyright a {
  color: inherit;
}

/* footer menu
-------------------------------- */
.footer-navigation {
  font-family: var(--nav-font);
  margin: 0 auto 1em;
}
@media only screen and (max-width: 591.98px) {
  .footer-navigation {
    margin-bottom: 20px;
  }
}
.footer-navigation .menu-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-navigation li {
  margin: 0;
}
.footer-navigation a {
  display: block;
  color: inherit;
  text-decoration: none;
  text-transform: var(--nav-text-transform);
  font-size: 0.9em;
  letter-spacing: var(--nav-letter-spacing);
  font-weight: var(--nav-font-weight);
  line-height: var(--nav-line-height);
  padding: 5px 0;
  transition: all 0.1s;
}
.footer-navigation a:hover, .footer-navigation a:focus {
  color: var(--color-header-link-hover);
}

/* social
-------------------------------- */
.site-footer .social-navigation {
  flex: none;
}
.site-footer .social-navigation .social-navigation-wrapper {
  justify-content: center;
}
.site-footer .social-navigation .social-navigation-wrapper > li > a svg {
  margin-top: 3px;
  width: 14px;
  height: 14px;
}

/* ============================================================================
   07. SINGLE
   ========================================================================== */
h1.entry-title {
  margin-bottom: 0;
  /* The single-post title's own typography — Design > Single post. Defaults match
     the heading role, so this is a no-op until someone changes it. */
  font-family: var(--single-title-font);
  font-size: var(--single-title-font-size);
  font-weight: var(--single-title-font-weight);
  letter-spacing: var(--single-title-letter-spacing);
  text-transform: var(--single-title-text-transform);
  line-height: var(--single-title-line-height);
}

.entry-content {
  margin-top: 2em;
  font-family: var(--single-content-font);
  font-size: var(--single-content-font-size);
  counter-reset: footnotes;
}
.entry-content p > a,
.entry-content li > a,
.entry-content figcaption > a,
.entry-content td > a,
.entry-content th > a,
.entry-content dd > a {
  text-underline-offset: 3px;
  color: inherit;
  transition: all 0.1s;
}
.entry-content p > a:hover,
.entry-content li > a:hover,
.entry-content figcaption > a:hover,
.entry-content td > a:hover,
.entry-content th > a:hover,
.entry-content dd > a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
}

/* Pages link
---------------------------------------- */
.page-links-label {
  display: block;
  margin-right: 20px;
}

/* author bio
---------------------------------------- */
.author-bio {
  background: rgba(0, 0, 0, 0.05);
  padding: 30px;
  margin-top: 2em;
}
@media only screen and (max-width: 591.98px) {
  .author-bio {
    padding: 10px;
  }
}
.author-bio {
  display: flex;
  align-items: flex-start;
}
.author-bio > img.avatar {
  width: 80px;
}
@media only screen and (max-width: 591.98px) {
  .author-bio > img.avatar {
    width: 60px;
  }
}
.author-bio > img.avatar {
  display: block;
  flex: none;
  margin: 0 1em 0 0;
}
@media only screen and (max-width: 591.98px) {
  .author-bio > img.avatar {
    width: 60px;
    margin-right: 10px;
  }
}

.author-title {
  font-size: 1em;
  margin: 0;
}
.author-title a {
  text-decoration: none;
  color: inherit;
}

.author-description {
  line-height: 1.4;
  margin-top: 0.5em;
}

/* tags
---------------------------------------- */
.entry-tags {
  margin-top: 3em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.entry-tags a {
  display: block;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
}

.tags-label {
  display: block;
  margin-right: 20px;
}
@media only screen and (max-width: 591.98px) {
  .tags-label {
    margin-right: 10px;
  }
}

/* Comments
---------------------------------------- */
:root {
  --comment-avatar-width: 56px;
  --comment-avatar-text-spacing: 16px;
}
@media only screen and (max-width: 821.98px) {
  :root {
    --comment-avatar-width: 48px;
  }
}
@media only screen and (max-width: 591.98px) {
  :root {
    --comment-avatar-width: 30px;
    --comment-avatar-text-spacing: 8px;
  }
}

.comments-area {
  margin-top: 3em;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.comment-body {
  position: relative;
}
.comment-body > a,
.comment-body .edit-link > a {
  color: inherit;
}

li.parent > .comment-body:before {
  content: "";
}

.comment-list .children {
  position: relative;
  padding-left: var(--comment-avatar-width);
}

/* Commentlist
--------------------------------------------- */
.no-comments {
  margin-top: 2em;
  border: 1px dashed;
  padding: 10px;
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.comment-list li.comment {
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: var(--spacing-medium);
  margin-top: var(--spacing-medium);
}
@media only screen and (max-width: 591.98px) {
  .comment-list li.comment {
    padding-top: var(--spacing-small);
    margin-top: var(--spacing-small);
  }
}
.comment-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.comment-list {
  /* main body */
}
.comment-list li + li > .comment-body {
  padding: 0;
  display: block;
  position: relative;
}
.comment-list {
  /* author */
}
.comment-list .comment-author img {
  float: left;
  margin-right: var(--comment-avatar-text-spacing);
  width: var(--comment-avatar-width);
  display: block;
  margin-top: 3px;
}
.comment-list .fn {
  font-size: 0.8em;
  line-height: 1.1;
  position: relative;
  display: table;
  margin-bottom: 4px;
}
.comment-list .fn a {
  color: inherit;
  text-decoration: none;
}
.comment-list {
  /* by post author */
}
.comment-list li.bypostauthor .fn:after {
  color: green;
  margin-left: 6px;
  font-size: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  text-align: center;
  line-height: 11px;
  background: #08c;
  color: white;
  display: block;
  position: absolute;
  top: 50%;
  right: -20px;
  margin-top: -5px;
}
.comment-list {
  /* nested */
}
.comment-list ul.children {
  margin: 0;
  list-style: none;
}
.comment-metadata .edit-link {
  margin-left: 16px;
}

.reply {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
}

.reply a {
  text-decoration: none;
  font-style: normal;
}
.comment-metadata,
.comment .reply,
.comment-content,
.comment .comment-respond {
  padding-left: calc(var(--comment-avatar-width) + var(--comment-avatar-text-spacing));
}

.comment-content {
  padding-top: 0.7em;
}
@media only screen and (max-width: 591.98px) {
  .comment-content {
    font-size: 0.9em;
  }
}
.comment-content > * {
  margin: 1.2rem 0;
}
.comment-content > *:first-child {
  margin-top: 0;
}
.comment-content > *:last-child {
  margin-bottom: 0;
}
.comment-content p > a,
.comment-content li > a,
.comment-content figcaption > a,
.comment-content td > a,
.comment-content th > a,
.comment-content dd > a {
  text-underline-offset: 3px;
  color: inherit;
  transition: all 0.1s;
}
.comment-content p > a:hover,
.comment-content li > a:hover,
.comment-content figcaption > a:hover,
.comment-content td > a:hover,
.comment-content th > a:hover,
.comment-content dd > a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
}

.says {
  display: none;
}

.comment-awaiting-moderation {
  color: red;
}

.comments-pagination {
  margin-top: var(--spacing-medium);
}

/* Comment Form
---------------------------------------- */
#reply-title,
.comments-title {
  font-size: 1.2em;
  margin-bottom: var(--spacing-small);
  margin-top: 2em;
}

#reply-title small {
  display: block;
  font-size: 12px;
  margin-top: 12px;
}
#reply-title small a {
  text-decoration: underline;
}

.comment #respond:before {
  left: calc(var(--comment-avatar-width) + var(--comment-avatar-text-spacing));
}

.logged-in-as,
.comment-notes {
  font-size: 0.8125em;
}
.logged-in-as a,
.comment-notes a {
  color: inherit;
}

#commentform .logged-in-as,
#commentform .comment-notes {
  margin-bottom: 1.5em;
}

#commentform p {
  margin: 0 0 1em;
}
#commentform p input[type=text],
#commentform p input[type=url],
#commentform p input[type=email],
#commentform p input[type=password],
#commentform p input[type=number] {
  width: 100%;
}

label[for=comment],
label[for=email] label[for=author],
label[for=url] {
  display: block;
  margin: 0 0 0.2em;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: center;
}
.comment-form-cookies-consent input[type=checkbox] {
  flex: none;
}

#commentform .form-submit {
  margin-top: 2em;
}
#commentform .form-submit #submit {
  background-color: #e0e0e0;
  background: black;
  color: white;
  border: 0;
  display: block;
}
#commentform .form-submit #submit:hover {
  opacity: 0.9;
}

/* ============================================================================
   08. ARCHIVES
   ========================================================================== */
/* ---------------------------- layout */
.main {
  padding: var(--spacing-big) 0;
  margin: 0 auto;
  width: var(--narrow-width);
  max-width: 100%;
}
@media only screen and (max-width: 821.98px) {
  .main {
    padding: var(--spacing-medium) 0;
  }
}

/* .content-layout wraps .main and the optional .secondary column. The narrow
   layout needs no rules of its own — .main above already centres itself at
   reading width, which is what the theme has always done.

   Every rule is scoped to .content-layout on purpose. <body> carries the same
   information as has-layout-* / has-display-*, and an unscoped .layout-* here
   would turn the body into the two-column grid along with the wrapper. */
.content-layout.layout-fullwidth > .main, .content-layout.layout-sidebar-left > .main, .content-layout.layout-sidebar-right > .main {
  width: 100%;
}
.content-layout {
  /* Below this the two columns stack, which is why the grid only starts here. */
}
@media only screen and (min-width: 822px) {
  .content-layout.layout-sidebar-left, .content-layout.layout-sidebar-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
    gap: var(--layout-gap);
    align-items: start;
  }
}
.content-layout {
  /* Source order is always content-then-sidebar, so a left sidebar is a
     reorder rather than a second markup path. */
}
@media only screen and (min-width: 822px) {
  .content-layout.layout-sidebar-left {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
  .content-layout.layout-sidebar-left > .main {
    order: 2;
  }
  .content-layout.layout-sidebar-left > .secondary {
    order: 1;
  }
}

.rural-blog-post {
  margin-bottom: var(--spacing-huge);
}
@media only screen and (max-width: 821.98px) {
  .rural-blog-post {
    margin-bottom: var(--spacing-big);
  }
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-post {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    margin-bottom: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
  }
}

/* ---------------------------- display: list + grid, shared */
/* The stacked listing centres its meta and titles, which works when each post
   owns the full reading column. Beside or under a fixed-ratio image the same
   centring reads as ragged, so both card displays go left-aligned. */
@media only screen and (min-width: 592px) {
  .rural-blog-blog.display-list .entry-title,
  .rural-blog-blog.display-list .entry-subtitle,
  .rural-blog-blog.display-grid .entry-title,
  .rural-blog-blog.display-grid .entry-subtitle {
    text-align: left;
  }
  .rural-blog-blog.display-list .entry-meta,
  .rural-blog-blog.display-grid .entry-meta {
    justify-content: flex-start;
  }
}
.rural-blog-blog.display-list .post-thumbnail,
.rural-blog-blog.display-grid .post-thumbnail {
  text-align: left;
}

/* ---------------------------- display: list */
/* Image left, text beside it. Flex rather than grid so a post with no featured
   image — or one hidden by the "Display post thumbnail" toggle — lets .entry-body
   take the whole row instead of leaving an empty column behind. */
.rural-blog-blog.display-list .rural-blog-post {
  margin-bottom: var(--spacing-big);
}
@media only screen and (min-width: 592px) {
  .rural-blog-blog.display-list .rural-blog-post {
    display: flex;
    gap: var(--grid-gap);
    align-items: center;
  }
}
.rural-blog-blog.display-list .post-thumbnail {
  margin: 0 0 1em;
}
@media only screen and (min-width: 592px) {
  .rural-blog-blog.display-list .post-thumbnail {
    flex: 0 0 38%;
    margin: 0;
  }
}
.rural-blog-blog.display-list .post-thumbnail img {
  width: 100%;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
}
.rural-blog-blog.display-list .entry-body {
  flex: 1 1 auto;
  min-width: 0;
}
.rural-blog-blog.display-list .entry-excerpt {
  margin-bottom: 0;
}

/* ---------------------------- display: grid */
.rural-blog-blog.display-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rural-blog-blog.display-grid.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rural-blog-blog.display-grid.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rural-blog-blog.display-grid {
  /* Step down a column at a time rather than jumping straight to one. */
}
@media only screen and (max-width: 1089.98px) {
  .rural-blog-blog.display-grid.grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 821.98px) {
  .rural-blog-blog.display-grid.grid-cols-3, .rural-blog-blog.display-grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-blog.display-grid, .rural-blog-blog.display-grid.grid-cols-2, .rural-blog-blog.display-grid.grid-cols-3, .rural-blog-blog.display-grid.grid-cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rural-blog-blog.display-grid {
  /* The gap does the separating here, so the stacked spacing and the mobile
     rule underneath every post would both double up. */
}
.rural-blog-blog.display-grid .rural-blog-post {
  margin-bottom: 0;
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-blog.display-grid .rural-blog-post {
    border-bottom: 0;
    padding-bottom: 0;
  }
}
.rural-blog-blog.display-grid {
  /* A fixed ratio is what keeps the rows level when the featured images are
     all different shapes. */
}
.rural-blog-blog.display-grid .post-thumbnail {
  margin: 0 0 1em;
}
.rural-blog-blog.display-grid .post-thumbnail img {
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
}
.rural-blog-blog.display-grid .entry-title {
  font-size: 1.15em;
}
.rural-blog-blog.display-grid .entry-excerpt {
  margin-bottom: 0;
}

.sticky-label {
  display: none;
  margin-bottom: 0.8em;
  line-height: 1;
  padding: 4px 10px;
  background: rgb(246, 148, 12);
  color: white;
  font-size: 0.6em;
}
@media only screen and (min-width: 592px) {
  .sticky-label {
    margin-left: auto;
    margin-right: auto;
  }
}

.sticky .sticky-label {
  display: table;
}

/* ---------------------------- thumbnail */
.post-thumbnail {
  margin: 1.5em auto 1em;
  position: relative;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}
.post-thumbnail > figcaption {
  font-size: 0.85em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  text-align: left;
  line-height: 1.3;
  transition: all 0.3s;
}
@media only screen and (min-width: 822px) {
  .post-thumbnail > figcaption {
    transform: translate(0, 32%);
    opacity: 0;
    visibility: hidden;
  }
}
@media only screen and (max-width: 591.98px) {
  .post-thumbnail > figcaption {
    line-height: 1.3;
    padding: 2px 4px;
  }
}
.post-thumbnail > figcaption a {
  color: inherit;
}
.post-thumbnail:hover > figcaption {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}

.post-thumbnail > a {
  display: block;
  margin: 0;
  position: relative;
}

@media only screen and (min-width: 822px) {
  .post-has-thumbnail-vertical .post-thumbnail {
    width: 360px;
  }
  .post-has-thumbnail-vertical .post-thumbnail > a {
    display: inline;
  }
}

/* ---------------------------- title */
.entry-title {
  font-size: 1.4em;
  margin: 0 0 1em;
  position: relative;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 592px) {
  .entry-title {
    text-align: center;
  }
}
.entry-title a {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
}
.entry-title a:hover {
  opacity: 0.6;
  text-decoration: none;
}
@media only screen and (max-width: 591.98px) {
  .entry-title {
    font-size: 1.2em;
  }
}

.entry-meta + .entry-title {
  margin-top: 0.5em;
}

/* ---------------------------- subtitle */
.entry-subtitle {
  /* The post subtitle's own typography — Design > Single post. Defaults match the
     body role, so this stays a no-op until someone changes it. */
  font-family: var(--single-subtitle-font);
  font-size: var(--single-subtitle-font-size);
  font-weight: var(--single-subtitle-font-weight);
  letter-spacing: var(--single-subtitle-letter-spacing);
  text-transform: var(--single-subtitle-text-transform);
  line-height: var(--single-subtitle-line-height);
  margin: 0.2em 0 1.5em;
  opacity: 0.55;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 592px) {
  .entry-subtitle {
    text-align: center;
  }
}

/* ---------------------------- excerpt */
.entry-excerpt p {
  margin: 0;
}

.continue-reading-link {
  color: inherit;
}
.continue-reading-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* ---------------------------- meta */
.entry-meta {
  position: relative;
  display: flex;
  flex-flow: row wrap;
}
@media only screen and (min-width: 592px) {
  .entry-meta {
    justify-content: center;
  }
}
.entry-meta > * {
  display: block;
}
.entry-meta > *:before {
  margin: 0 10px;
}
@media only screen and (max-width: 591.98px) {
  .entry-meta > *:before {
    margin: 0 5px;
  }
}
.entry-meta > * + *:before {
  content: "·";
}

/* ---------------------------- pagination */
.wp-block-query-pagination {
  margin-top: 2em;
}

.wp-block-query-pagination-next {
  color: inherit;
}

/* ===================================================================================== archive */
.archive-header {
  padding: 2em 0;
  text-align: center;
}
.archive-header h1 {
  font-size: 1.8em;
  margin: 0;
}
@media only screen and (max-width: 591.98px) {
  .archive-header h1 {
    font-size: 1.4em;
  }
}

/* The archive header spans the full width above the columns, so on a listing the
   content wrapper — not .main — is what follows it. */
@media only screen and (max-width: 821.98px) {
  .archive-header + .main,
  .archive-header + .content-layout > .main {
    padding-top: 1em;
  }
}

.archive-description {
  margin: 0.4em auto 0;
  line-height: 1.4;
  opacity: 0.6;
}
@media only screen and (min-width: 822px) {
  .archive-description {
    max-width: 500px;
  }
}
@media only screen and (max-width: 591.98px) {
  .archive-description {
    font-size: 0.8125em;
  }
}
.archive-description p {
  margin: 0;
  line-height: 1.4;
}

/* search
--------------------------------------------- */
body.search .main {
  padding-top: 0;
}

.search-page-title {
  margin: 0;
  font-size: 1.2em;
  letter-spacing: 0;
  text-transform: uppercase;
}

.search-result-count {
  margin: 0.2em 0 0;
  font-size: 0.95em;
  opacity: 0.7;
}
.search-result-count p {
  margin: 0;
}

.search-header {
  margin-bottom: var(--spacing-medium);
}
@media only screen and (max-width: 591.98px) {
  .search-header {
    padding-top: 2em;
  }
}
.search-header .search-form {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  max-width: 100%;
}
@media only screen and (min-width: 592px) {
  .search-header .search-form {
    width: 300px;
  }
}

.rural-blog-search {
  margin: 0 0 4em;
}

.rural-blog-post-search + .rural-blog-post-search {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid var(--color-border);
}

.rural-blog-post-search {
  overflow: hidden;
}
.rural-blog-post-search .entry-title {
  font-size: 1.1em;
  text-align: left;
}
.rural-blog-post-search .entry-excerpt {
  margin-top: 0.5em;
  font-size: 0.9em;
  opacity: 0.6;
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-post-search .entry-excerpt {
    line-height: 1.3;
  }
}

.rural-blog-post-search-thumbnail {
  margin: 0 0 0 10px;
  width: 92px;
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-post-search-thumbnail {
    width: 60px;
  }
}
.rural-blog-post-search-thumbnail {
  float: right;
}
.rural-blog-post-search-thumbnail a {
  display: block;
}
.rural-blog-post-search-thumbnail img {
  width: 100%;
  display: block;
}

.rural-blog-post-search-text {
  overflow: hidden;
}

strong.matched {
  font-weight: inherit;
  background: #ffc;
}

/* page 404
--------------------------------------------- */
.page-content-404 {
  width: var(--narrow-width);
  max-width: 100%;
  margin: 6em auto;
  text-align: center;
}
.page-content-404 .search-form {
  margin-top: 10px;
}
.page-content-404 input[type=search] {
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
}
.page-content-404 p a {
  color: inherit;
  text-decoration: underline;
}
.page-content-404 p a:hover {
  text-decoration: none;
}

.error404 .archive-header h1 {
  width: 100%;
  text-align: center;
  max-width: none;
}

/* ============================================================================
   09. WIDGETS
   ========================================================================== */
/* ---------------------------- sidebar column */
/* The .secondary column on the sidebar layouts. Above the stacking breakpoint it
   sits in the .content-layout grid, so it only needs to match the top padding
   .main gives itself; below it, it's a block under the content and takes a rule
   to separate the two. */
.secondary {
  font-size: 0.95em;
}
@media only screen and (min-width: 822px) {
  .secondary {
    padding-top: var(--spacing-big);
  }
}
@media only screen and (max-width: 821.98px) {
  .secondary {
    margin-top: var(--spacing-medium);
    padding-top: var(--spacing-medium);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }
}
.secondary .widget {
  margin-bottom: var(--spacing-big);
}
.secondary .widget:last-child {
  margin-bottom: 0;
}
.secondary img {
  max-width: 100%;
  height: auto;
}

/* Shown in place of an empty sidebar, and only to a user who can fill it. */
.sidebar-placeholder {
  border: 1px dashed rgba(0, 0, 0, 0.25);
  padding: 1.5em;
  font-size: 0.9em;
  opacity: 0.75;
}
.sidebar-placeholder > p:first-child {
  margin-top: 0;
}
.sidebar-placeholder > p:last-child {
  margin-bottom: 0;
}

/* ---------------------------- general */
.widget-area .wp-block-heading,
.widget-area .widgettitle,
.widget-area .widget-title {
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 1px;
  margin-bottom: 1em;
}
.widget-area .wp-block-heading a,
.widget-area .widgettitle a,
.widget-area .widget-title a {
  color: inherit;
}

/* ---------------------------- about */
.widget_block .wp-block-group .wp-block-image {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* ---------------------------- tagcloud */
.widget_tag_cloud a,
.tagcloud a {
  text-decoration: none;
  color: inherit;
}
.widget_tag_cloud a:hover,
.tagcloud a:hover {
  text-decoration: underline;
}

/* ---------------------------- calendar */
.wp-calendar-table a,
#wp-calendar a {
  color: inherit;
}

.wp-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5em;
}

.wp-calendar-nav a {
  align-items: center;
  display: flex;
  align-content: center;
  color: inherit;
  text-decoration: none;
}

/* ---------------------------- search form */
.wp-block-search .wp-block-search__label {
  font-weight: var(--heading-font-weight);
}

.wp-block-search__button {
  border: 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 13px;
  padding-bottom: 13px;
  margin-left: 5px;
}

.search-form {
  display: block;
  position: relative;
}
.search-form input[type=search] {
  display: block;
  border: 0;
  padding-right: 40px;
  width: 100%;
  min-width: 200px;
}
.search-form button {
  background: none;
  color: inherit;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------- comments */
.wp-block-latest-comments {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-latest-comments__comment,
.widget_recent_comments li {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.wp-block-latest-comments__comment:last-child,
.widget_recent_comments li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.wp-block-latest-comments__comment-excerpt > *:last-child {
  margin-bottom: 0;
}

/* ---------------------------- latest posts */
.wp-block-latest-posts.wp-block-latest-posts__list li {
  margin-bottom: 1.5em;
  overflow: hidden;
  padding-bottom: 1.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.wp-block-latest-posts.wp-block-latest-posts__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ---------------------------- widget menu */
.widget_nav_menu nav > ul,
.wp-block-archives-list,
.wp-block-categories-list,
.wp-block-latest-posts__list,
.wp-block-page-list,
.wp-block-rss,
.widget_rss ul,
.widget_archive ul,
.widget_nav_menu ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_pages ul,
.widget_categories ul,
.widget_product_categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget_nav_menu nav > ul ul,
.wp-block-archives-list ul,
.wp-block-categories-list ul,
.wp-block-latest-posts__list ul,
.wp-block-page-list ul,
.wp-block-rss ul,
.widget_rss ul ul,
.widget_archive ul ul,
.widget_nav_menu ul ul,
.widget_meta ul ul,
.widget_recent_comments ul ul,
.widget_recent_entries ul ul,
.widget_pages ul ul,
.widget_categories ul ul,
.widget_product_categories ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 20px;
}
/* ---------------------------- rss */
.wp-block-rss > li,
.widget_rss ul > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.wp-block-rss > li .rssSummary,
.widget_rss ul > li .rssSummary {
  font-family: var(--body-font);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------------------------- widget in .secondary */
.secondary .widget_block + .widget_block, .secondary .widget_block + .widget,
.secondary .widget + .widget_block,
.secondary .widget + .widget {
  margin-top: 2.5em;
}
.secondary p {
  font-size: 0.9em;
  margin: 0.2em 0;
}
.secondary p a {
  color: inherit;
}

/* ============================================================================
   10. REDUCED MOTION
   ----------------------------------------------------------------------------
   Respect users who ask for less motion (WCAG 2.3.3): drop transitions,
   animations and smooth scrolling. The off-canvas still opens/closes — it
   just snaps instead of sliding.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/*# sourceMappingURL=style.css.map */