/**
 * 1Achterhoek Optimized v1.3.3 - Main Stylesheet
 * Ultra-minimal CSS maintaining v4 visual appearance
 * No slider, animation, or marquee styles needed
 */

/* CSS Variables - Theme Colors */
:root {
   /* Primary Colors - matching v4 */
   --accent-color: #e9551c;
   --accent-hover: #d14a16;
   --text-primary: #333333;
   --text-secondary: #666666;
   --text-muted: #888888;
   --bg-primary: #ffffff;
   --bg-secondary: #f8f9fa;
   --bg-tertiary: #f0f1f2;
   --border-color: #e8e8e8;
   --shadow-color: rgba(0, 0, 0, 0.08);

   /* Dark Mode Colors */
   --dm-bg-primary: #1a1a2e;
   --dm-bg-secondary: #16213e;
   --dm-bg-tertiary: #0f3460;
   --dm-text-primary: #e8e8e8;
   --dm-text-secondary: #b8b8b8;
   --dm-border-color: #2a2a4a;

   /* Typography */
   --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   /* Spacing */
   --container-width: 1200px;
   --spacing-xs: 0.5rem;
   --spacing-sm: 1rem;
   --spacing-md: 1.5rem;
   --spacing-lg: 2rem;
   --spacing-xl: 3rem;

   /* Border Radius */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
}

/* Reset & Base */
*,
*::before,
*::after {
   box-sizing: border-box
}

html {
   -webkit-text-size-adjust: 100%;
   line-height: 1.15
}

body {
   margin: 0;
   font-family: var(--font-primary);
   font-size: 16px;
   line-height: 1.7;
   color: var(--text-primary);
   background: var(--bg-secondary)
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   font-weight: 700;
   line-height: 1.3;
   margin: 0 0 var(--spacing-sm)
}

h1 {
   font-size: 2.25rem
}

h2 {
   font-size: 1.75rem
}

h3 {
   font-size: 1.375rem
}

h4 {
   font-size: 1.125rem
}

p {
   margin: 0 0 var(--spacing-sm)
}

a {
   color: var(--accent-color);
   text-decoration: none;
   transition: color 0.2s
}

a:hover {
   color: var(--accent-hover)
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

ul,
ol {
   margin: 0;
   padding: 0;
   list-style: none
}

button {
   font-family: inherit;
   cursor: pointer;
   border: none;
   background: none;
   padding: 0
}

/* Screen Reader */
.screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden
}

.skip-link {
   position: absolute;
   top: -100px;
   left: 0;
   z-index: 9999;
   padding: var(--spacing-sm);
   background: var(--accent-color);
   color: #fff
}

.skip-link:focus {
   top: 0
}

/* Container */
.container {
   max-width: var(--container-width);
   margin: 0 auto;
   padding: 0 var(--spacing-md)
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
   background: var(--bg-primary);
   box-shadow: 0 2px 4px var(--shadow-color);
   position: sticky;
   top: 0;
   z-index: 100
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-md);
   padding: var(--spacing-md) 0
}

.site-branding {
   flex-shrink: 0
}

.site-branding .custom-logo-link {
   display: block
}

.site-branding .custom-logo {
   max-height: 60px;
   width: auto
}

.site-title {
   font-size: 1.75rem;
   margin: 0
}

.site-title a {
   color: var(--text-primary)
}

.site-title a:hover {
   color: var(--accent-color)
}

.site-description {
   margin: 0;
   font-size: 0.875rem;
   color: var(--text-muted)
}

/* Navigation */
.main-navigation {
   flex: 1;
   display: flex;
   justify-content: center
}

.primary-menu {
   display: flex;
   gap: var(--spacing-sm)
}

.primary-menu li {
   position: relative
}

.primary-menu>li>a {
   display: block;
   padding: var(--spacing-xs) var(--spacing-sm);
   font-weight: 600;
   font-size: 0.9375rem;
   color: var(--text-primary);
   text-transform: uppercase;
   letter-spacing: 0.02em
}

.primary-menu>li>a:hover,
.primary-menu>li.current-menu-item>a {
   color: var(--accent-color)
}

.primary-menu .sub-menu {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 200px;
   background: var(--bg-primary);
   box-shadow: 0 4px 12px var(--shadow-color);
   border-radius: var(--radius-sm);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: all 0.2s
}

.primary-menu li:hover>.sub-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
}

.primary-menu .sub-menu a {
   display: block;
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: 0.875rem;
   font-weight: 500;
   border-bottom: 1px solid var(--border-color)
}

.primary-menu .sub-menu li:last-child a {
   border-bottom: none
}

/* Menu Toggle (Mobile) */
.menu-toggle {
   display: none;
   width: 40px;
   height: 40px;
   position: relative
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--text-primary);
   position: absolute;
   left: 8px;
   transition: all 0.3s
}

.menu-icon {
   top: 19px
}

.menu-icon::before {
   content: '';
   top: -7px
}

.menu-icon::after {
   content: '';
   top: 7px
}

.menu-toggle.active .menu-icon {
   background: transparent
}

.menu-toggle.active .menu-icon::before {
   transform: rotate(45deg);
   top: 0
}

.menu-toggle.active .menu-icon::after {
   transform: rotate(-45deg);
   top: 0
}

/* Header Actions */
.header-actions {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm)
}

.search-toggle,
.dark-mode-toggle {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-sm);
   color: var(--text-primary);
   transition: all 0.2s
}

.search-toggle:hover,
.dark-mode-toggle:hover {
   background: var(--bg-secondary);
   color: var(--accent-color)
}

/* Search Overlay */
.search-overlay {
   background: var(--bg-primary);
   border-top: 1px solid var(--border-color);
   padding: var(--spacing-md) 0
}

.search-overlay[hidden] {
   display: none
}

.search-form {
   display: flex;
   gap: var(--spacing-xs);
   max-width: 600px;
   margin: 0 auto
}

.search-field {
   flex: 1;
   padding: var(--spacing-sm);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   font-size: 1rem
}

.search-submit {
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--accent-color);
   color: #fff;
   border-radius: var(--radius-sm)
}

.search-submit:hover {
   background: var(--accent-hover)
}

.search-close {
   color: var(--text-muted)
}

/* ============================================
   DARK MODE
   ============================================ */
.dark-mode-toggle .icon-moon {
   display: none
}

body.dark-mode .dark-mode-toggle .icon-sun {
   display: none
}

body.dark-mode .dark-mode-toggle .icon-moon {
   display: block
}

body.dark-mode {
   background: var(--dm-bg-secondary);
   color: var(--dm-text-primary)
}

body.dark-mode .site-header {
   background: var(--dm-bg-primary);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
}

body.dark-mode .site-title a,
body.dark-mode .primary-menu>li>a {
   color: var(--dm-text-primary)
}

body.dark-mode .primary-menu .sub-menu {
   background: var(--dm-bg-primary)
}

body.dark-mode .primary-menu .sub-menu a {
   border-color: var(--dm-border-color)
}

body.dark-mode .search-toggle,
body.dark-mode .dark-mode-toggle {
   color: var(--dm-text-primary)
}

body.dark-mode .search-toggle:hover,
body.dark-mode .dark-mode-toggle:hover {
   background: var(--dm-bg-tertiary)
}

body.dark-mode .search-overlay {
   background: var(--dm-bg-primary);
   border-color: var(--dm-border-color)
}

body.dark-mode .search-field {
   background: var(--dm-bg-secondary);
   border-color: var(--dm-border-color);
   color: var(--dm-text-primary)
}

body.dark-mode .menu-icon,
body.dark-mode .menu-icon::before,
body.dark-mode .menu-icon::after {
   background: var(--dm-text-primary)
}

body.dark-mode .post-card,
body.dark-mode .featured-post,
body.dark-mode article.single-post,
body.dark-mode .page-content {
   background: var(--dm-bg-primary)
}

body.dark-mode .post-title a,
body.dark-mode .featured-title,
body.dark-mode .entry-title {
   color: var(--dm-text-primary)
}

body.dark-mode .post-excerpt,
body.dark-mode .entry-content {
   color: var(--dm-text-secondary)
}

body.dark-mode .widget {
   background: var(--dm-bg-primary)
}

body.dark-mode .widget-title {
   color: var(--dm-text-primary)
}

body.dark-mode .site-footer {
   background: var(--dm-bg-primary);
   color: var(--dm-text-secondary)
}

/* ============================================
   MAIN CONTENT LAYOUT
   ============================================ */
.site-main {
   padding: var(--spacing-lg) 0
}

body.single .site-main,
body.page .site-main {
   padding-top: 0
}

body.single article.single-post,
body.page .page-content {
   padding-top: var(--spacing-sm)
}

.content-sidebar-wrap {
   display: grid;
   grid-template-columns: 1fr 320px;
   gap: var(--spacing-lg)
}

.content-area {
   min-width: 0
}

/* ============================================
   FEATURED POSTS SECTION
   ============================================ */
.featured-posts-section {
   margin-bottom: var(--spacing-xl)
}

.section-title {
   font-size: 1.5rem;
   margin-bottom: var(--spacing-md);
   padding-bottom: var(--spacing-xs);
   border-bottom: 3px solid var(--accent-color);
   display: inline-block
}

.featured-posts-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--spacing-md)
}

.featured-post {
   background: var(--bg-primary);
   border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: 0 2px 8px var(--shadow-color);
   transition: transform 0.2s, box-shadow 0.2s
}

.featured-post:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 24px var(--shadow-color)
}

.featured-link {
   display: block;
   color: inherit
}

.featured-thumb {
   aspect-ratio: 16/10;
   overflow: hidden;
   background: var(--bg-tertiary)
}

.featured-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s
}

.featured-post:hover .featured-thumb img {
   transform: scale(1.05)
}

.featured-content {
   padding: var(--spacing-sm)
}

.featured-title {
   font-size: 1rem;
   margin: var(--spacing-xs) 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.featured-content time {
   font-size: 0.8125rem;
   color: var(--text-muted)
}

/* ============================================
   POST CARDS
   ============================================ */
.posts-list {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md)
}

.post-card {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: var(--spacing-md);
   background: var(--bg-primary);
   border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: 0 2px 8px var(--shadow-color)
}

.post-thumb {
   aspect-ratio: 16/10;
   overflow: hidden;
   background: var(--bg-tertiary)
}

.post-thumb.no-thumb {
   display: flex;
   align-items: center;
   justify-content: center
}

.post-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s
}

.post-card:hover .post-thumb img {
   transform: scale(1.05)
}

.post-content {
   padding: var(--spacing-md);
   display: flex;
   flex-direction: column
}

.post-cat a {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   color: var(--accent-color);
   margin-bottom: var(--spacing-xs)
}

.post-title {
   font-size: 1.25rem;
   margin: 0 0 var(--spacing-xs)
}

.post-title a {
   color: var(--text-primary)
}

.post-title a:hover {
   color: var(--accent-color)
}

.post-body-link {
   display: block;
   color: inherit;
   text-decoration: none
}

.post-body-link:hover .post-meta,
.post-body-link:hover .post-excerpt {
   color: var(--accent-color)
}

.post-meta {
   display: flex;
   gap: var(--spacing-sm);
   font-size: 0.8125rem;
   color: var(--text-muted);
   margin-bottom: var(--spacing-xs)
}

.post-meta span,
.post-meta time {
   display: flex;
   align-items: center;
   gap: 4px
}

.post-excerpt {
   color: var(--text-secondary);
   font-size: 0.9375rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   margin-top: auto
}

/* ============================================
   SINGLE POST
   ============================================ */
article.single-post,
.page-content {
   background: var(--bg-primary);
   border-radius: var(--radius-md);
   padding: var(--spacing-lg);
   box-shadow: 0 2px 8px var(--shadow-color)
}

.entry-header {
   margin-bottom: var(--spacing-md)
}

.entry-title {
   font-size: 1.5rem;
   margin-top: 0;
   margin-bottom: var(--spacing-sm)
}

.entry-thumbnail {
   margin: -var(--spacing-lg);
   margin-bottom: var(--spacing-lg);
   margin-top: var(--spacing-md)
}

.entry-thumbnail img {
   width: 100%;
   border-radius: 0
}

.entry-content {
   font-size: 1.0625rem;
   line-height: 1.8
}

.entry-content p {
   margin-bottom: var(--spacing-md)
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
   margin-top: var(--spacing-lg);
   margin-bottom: var(--spacing-sm)
}

.entry-content h2 {
   font-size: 1.25rem
}

.entry-content h3 {
   font-size: 1.125rem
}

.entry-content h4 {
   font-size: 1rem
}

.entry-content h5 {
   font-size: 0.9375rem
}

.entry-content h6 {
   font-size: 0.875rem
}

.entry-content img {
   display: block;
   border-radius: var(--radius-sm);
   margin-top: var(--spacing-md);
   margin-bottom: 0
}

.entry-content img+br {
   display: none
}

.entry-content img+br+em,
.entry-content img+em {
   display: block;
   font-size: 0.9rem;
   line-height: 1.4;
   margin-top: 4px;
   margin-bottom: var(--spacing-md)
}

.entry-content blockquote {
   margin: var(--spacing-md) 0;
   padding: var(--spacing-md);
   background: var(--bg-secondary);
   border-left: 4px solid var(--accent-color);
   font-style: italic
}

.entry-footer {
   margin-top: var(--spacing-lg);
   padding-top: var(--spacing-md);
   border-top: 1px solid var(--border-color)
}

.post-tags {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-xs)
}

.post-tags a {
   display: inline-block;
   padding: 4px 12px;
   background: var(--bg-secondary);
   border-radius: var(--radius-sm);
   font-size: 0.8125rem
}

/* Post Navigation */
.post-navigation {
   margin-top: var(--spacing-lg)
}

.post-navigation .nav-links {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-md)
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
   background: var(--bg-primary);
   padding: var(--spacing-md);
   border-radius: var(--radius-md);
   box-shadow: 0 2px 8px var(--shadow-color)
}

.post-navigation .nav-label {
   display: block;
   font-size: 0.75rem;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 4px
}

.post-navigation .nav-title {
   font-weight: 600;
   color: var(--text-primary)
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md)
}

.widget {
   background: var(--bg-primary);
   border-radius: var(--radius-md);
   padding: var(--spacing-md);
   box-shadow: 0 2px 8px var(--shadow-color)
}

.widget-title {
   font-size: 1.125rem;
   margin-bottom: var(--spacing-md);
   padding-bottom: var(--spacing-xs);
   border-bottom: 2px solid var(--accent-color)
}

.widget ul {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs)
}

.widget ul li a {
   color: var(--text-primary);
   display: block;
   padding: var(--spacing-xs) 0;
   border-bottom: 1px solid var(--border-color)
}

.widget ul li:last-child a {
   border-bottom: none
}

/* ============================================
   ARCHIVE
   ============================================ */
.archive-header,
.search-header {
   margin-bottom: var(--spacing-lg)
}

.archive-title,
.search-title {
   font-size: 1.75rem;
   margin-bottom: var(--spacing-xs)
}

.archive-description {
   color: var(--text-secondary)
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination,
.nav-links {
   display: flex;
   justify-content: center;
   gap: var(--spacing-xs);
   margin-top: var(--spacing-lg)
}

.pagination .page-numbers,
.nav-links a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 40px;
   height: 40px;
   padding: 0 var(--spacing-sm);
   background: var(--bg-primary);
   border-radius: var(--radius-sm);
   font-weight: 600;
   color: var(--text-primary);
   box-shadow: 0 2px 4px var(--shadow-color)
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
   background: var(--accent-color);
   color: #fff
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
   background: var(--bg-primary);
   margin-top: var(--spacing-xl);
   border-top: 1px solid var(--border-color)
}

.footer-widgets {
   padding: var(--spacing-xl) 0;
   border-bottom: 1px solid var(--border-color)
}

.footer-widgets-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-lg)
}

.footer-widget-title {
   font-size: 1rem;
   margin-bottom: var(--spacing-md);
   padding-bottom: var(--spacing-xs);
   border-bottom: 2px solid var(--accent-color)
}

.footer-bottom {
   padding: var(--spacing-md) 0
}

.footer-bottom-inner {
   display: flex;
   justify-content: space-between;
   align-items: center
}

.copyright {
   color: var(--text-muted);
   font-size: 0.875rem
}

.footer-menu {
   display: flex;
   gap: var(--spacing-md)
}

.footer-menu a {
   color: var(--text-secondary);
   font-size: 0.875rem
}

/* ============================================
   404 PAGE
   ============================================ */
.error-404 {
   text-align: center;
   padding: var(--spacing-xl) 0
}

.error-title {
   font-size: 8rem;
   color: var(--accent-color);
   margin-bottom: 0;
   line-height: 1
}

.btn {
   display: inline-block;
   padding: var(--spacing-sm) var(--spacing-lg);
   border-radius: var(--radius-sm);
   font-weight: 600;
   transition: all 0.2s
}

.btn-primary {
   background: var(--accent-color);
   color: #fff
}

.btn-primary:hover {
   background: var(--accent-hover);
   color: #fff
}

/* ============================================
   COMMENTS
   ============================================ */
.comments-area {
   background: var(--bg-primary);
   border-radius: var(--radius-md);
   padding: var(--spacing-lg);
   margin-top: var(--spacing-lg);
   box-shadow: 0 2px 8px var(--shadow-color)
}

.comments-title {
   margin-bottom: var(--spacing-md)
}

.comment-list {
   margin-bottom: var(--spacing-lg)
}

.comment-list li {
   padding: var(--spacing-md) 0;
   border-bottom: 1px solid var(--border-color)
}

.comment-list li:last-child {
   border-bottom: none
}

.comment-form label {
   display: block;
   margin-bottom: 4px;
   font-weight: 600
}

.comment-form input,
.comment-form textarea {
   width: 100%;
   padding: var(--spacing-sm);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   margin-bottom: var(--spacing-sm)
}

.comment-form .submit {
   background: var(--accent-color);
   color: #fff;
   border: none;
   padding: var(--spacing-sm) var(--spacing-lg);
   cursor: pointer
}

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-to-top {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 44px;
   height: 44px;
   background: var(--accent-color);
   color: #fff;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: all 0.3s;
   z-index: 99
}

.scroll-to-top.visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
}

.scroll-to-top:hover {
   background: var(--accent-hover);
   transform: translateY(-4px)
}

.scroll-to-top[hidden] {
   display: none
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
   .content-sidebar-wrap {
      grid-template-columns: 1fr;
      gap: var(--spacing-lg)
   }

   .featured-posts-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .footer-widgets-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (max-width: 768px) {
   :root {
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem
   }

   .header-inner {
      flex-wrap: wrap
   }

   .menu-toggle {
      display: flex
   }

   .main-navigation {
      order: 3;
      width: 100%;
      justify-content: flex-start
   }

   .primary-menu {
      display: none;
      flex-direction: column;
      width: 100%;
      padding: var(--spacing-sm) 0
   }

   .primary-menu.active {
      display: flex
   }

   .primary-menu>li>a {
      padding: var(--spacing-sm) 0;
      border-bottom: 1px solid var(--border-color)
   }

   .primary-menu .sub-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      padding-left: var(--spacing-md)
   }

   .featured-posts-grid {
      grid-template-columns: 1fr
   }

   .post-card {
      grid-template-columns: 1fr
   }

   .post-thumb {
      aspect-ratio: 16/9
   }

   .entry-title {
      font-size: 1.125rem
   }

   .entry-content h2 {
      font-size: 1rem
   }

   .entry-content h3 {
      font-size: 0.9375rem
   }

   .entry-content h4 {
      font-size: 0.875rem
   }

   .entry-content h5 {
      font-size: 0.8125rem
   }

   .entry-content h6 {
      font-size: 0.75rem
   }

   .footer-widgets-grid {
      grid-template-columns: 1fr
   }

   .footer-bottom-inner {
      flex-direction: column;
      gap: var(--spacing-sm);
      text-align: center
   }

   .footer-menu {
      justify-content: center
   }
}

@media (max-width: 480px) {
   .container {
      padding: 0 var(--spacing-sm)
   }

   .site-title {
      font-size: 1.25rem
   }

   .entry-title {
      font-size: 0.9375rem
   }

   .entry-content h2 {
      font-size: 0.875rem
   }

   .entry-content h3 {
      font-size: 0.8125rem
   }

   .entry-content h4 {
      font-size: 0.75rem
   }

   .entry-content h5 {
      font-size: 0.6875rem
   }

   .entry-content h6 {
      font-size: 0.625rem
   }

   article.single-post,
   .page-content {
      padding: var(--spacing-md)
   }
}