body {
  margin: 0;
  font-family: Arial, sans-serif;
}

#wrapper {
  padding: 32px 16px;
  max-width: 1024px;
  margin: 0 auto;
  float: none;
}

#wrapper h1.sr-only {
  visibility: hidden;
  margin: 0;
  padding: 0;
  height: 0px;
}

#wrapper img {
  max-width: 100%;
  height: auto;
}

#wrapper a {
  text-decoration-line: underline;
  text-decoration-color: #444;
  text-decoration-style: dashed;
  color: black;
}

#wrapper a:hover, #wrapper a:active {
  text-decoration-color: black;
  text-decoration-style: solid;
  color: #444;
}

#wrapper a:visited {
  color: inherit;
}

#wrapper a.post-edit-link {
  display: none;
}

@media (min-width: 1024px) {
  #wrapper #container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 2em;
  }
}

@media (min-width: 1024px) {
  #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

#header h1 {
  margin: 0;
}

@media (min-width: 768px) {
  #header #menu ul {
    list-style-type: none;
    display: flex;
    gap: 1em;
    margin: 0;
    padding: 0;
  }
  #header #menu ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 1024px) {
  #header #menu ul {
    justify-content: space-between;
  }
}

#container #content .post {
  background-color: #ffffff88;
  padding: 1em;
  margin: 1em 0;
}

#container #content .post .category-breadcrumbs {
  display: block;
  clear: both;
  overflow: auto;
  padding: 0;
  list-style: none;
}

#container #content .post .category-breadcrumbs li {
  margin: 0;
  float: left;
  clear: none;
}

#container #content .post .category-breadcrumbs li:not(:first-child)::before {
  content: '\BB';
  margin: 0 0.5em;
}

@media (min-width: 768px) {
  #container #content .post header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

#container #content .post header > * {
  margin: 0;
}

#container #content .post header .entry-meta > *:not(.entry-date) {
  display: none;
}

#container #content .post .entry-content img, #container #content .post .entry-summary img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

@media (min-width: 450px) {
  #container #content .post .entry-content img, #container #content .post .entry-summary img {
    aspect-ratio: unset;
    width: 100%;
    height: auto;
    max-height: 50vh;
  }
}

@media (min-width: 1024px) {
  #container #content .post .entry-content img, #container #content .post .entry-summary img {
    aspect-ratio: 1/1;
    object-fit: cover;
  }
}

#container #content .post .entry-content .read-more, #container #content .post .entry-summary .read-more {
  display: block;
  width: 100%;
  height: 2em;
  padding-top: 2em;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  background: linear-gradient(180deg, #ffffff00 0%, #ffffffee 40%, #fff 100%);
}

#container #content .post .entry-summary p {
  position: relative;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  #container #content .post .entry-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-columns: 150px 1fr;
    grid-gap: 1.5em;
    align-items: center;
  }
}

#container #content .post .entry-footer {
  margin: 2em 0 0 0;
  padding: 0.5em 0 0 0;
  border-top: 1px solid #ddd;
}

#container #content .post .entry-footer > * {
  display: block;
  clear: both;
}

#container #content .post .entry-footer .meta-sep, #container #content .post .entry-footer .comments-link {
  display: none;
}

@media (min-width: 1024px) {
  body.search-results #container #content .post .entry-summary {
    display: block;
  }
}

.widget-area > ul {
  list-style-type: none;
  padding: 0;
}

.widget-area > ul > li {
  margin: 2em 0;
}

body.page.full-width #wrapper {
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  width: 100%;
  max-width: unset;
}

body.page.full-width #wrapper #container {
  display: block;
}

body.page.full-screen {
  width: 100vw;
}

body.page.full-screen #wrapper {
  padding: 0;
}

body.page-template-home {
  background: black;
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

body.page-template-home #animated-logo {
  width: 100%;
  max-width: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  aspect-ratio: 1;
  position: relative;
}

body.page-template-home #animated-logo > * {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

body.page-template-home #animated-logo canvas {
  z-index: -1;
}

body.page-template-home #animated-logo .cover {
  z-index: 2;
  background: black;
  backdrop-filter: blur(10px);
  opacity: 1;
}

body.page-template-home #animated-logo .cover.hide {
  transition: opacity 1s;
  opacity: 0;
}

body.page-template-home #wrapper, body.page-template-home #container, body.page-template-home #content, body.page-template-home article, body.page-template-home .entry-content {
  height: 100%;
}

body.page-template-home #wrapper {
  margin: 0 auto !important;
}

body.page-template-home #container {
  display: block !important;
}

body.page-template-home article .entry-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#dm-container .dm-post-list > h2 {
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 0px;
}

/*
page
    h2?
        sticky
        border
    lpad for titles

posts
    border/bg/padding

buttons
    block
    contrast
    smaller

bottom bar
    inline
    non-block buttons

modal
    reduce space
*/