.article-cover-frame {
  position: relative;
  margin-block: 2.25rem;
}

.article-cover-frame > img.article-cover {
  margin-block: 0;
}

.article-cover-frame > img.article-cover,
.article-copy img {
  border-radius: var(--rounded-box, 1rem);
}

.article-arrows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-block: 0.75rem;
}

.article-cover-frame > .article-arrows {
  position: absolute;
  inset-inline: 0.625rem;
  inset-block-end: 0.625rem;
  margin: 0;
  pointer-events: none;
}

.article-arrows .article-arrow,
.article-icon-button {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--journal-rule);
  border-radius: 50%;
  background: var(--journal-paper);
  color: var(--journal-ink);
  text-decoration: none;
  cursor: pointer;
}

.article-cover-frame .article-arrows .article-arrow {
  border-color: rgb(255 255 255 / 38%);
  background: rgb(27 23 19 / 78%);
  color: white;
  pointer-events: auto;
}

.article-arrows .article-arrow:hover,
.article-icon-button:hover,
.article-tools-bar > button:hover {
  background: var(--journal-ink);
  color: var(--journal-paper);
}

.article-cover-frame .article-arrows .article-arrow:hover {
  background: rgb(27 23 19 / 95%);
  color: white;
}

.article-arrows .article-arrow-prev {
  grid-column: 1;
  justify-self: start;
}

.article-arrows .article-arrow-next {
  grid-column: 2;
  justify-self: end;
}

.article-arrow > span {
  inline-size: 0.58rem;
  block-size: 0.58rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateX(-1px) rotate(-45deg);
}

.article-arrow-prev > span {
  transform: translateX(1px) rotate(135deg);
}

.article-body {
  position: relative;
}

.article-copy {
  min-inline-size: 0;
}

.article-copy :is(h2, h3)[id] {
  scroll-margin-top: 5rem;
}

.article-sidebar,
.article-contents .article-drawer-heading {
  display: none;
}

.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.article-byline:has(.article-tools-bar) {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  padding-block: 0.4rem;
  margin-block-end: 0.75rem;
  background: var(--journal-paper);
}

.article-tools-bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.article-tools-bar > button {
  min-block-size: 2.75rem;
  padding-inline: 0.8rem;
  border: 1px solid var(--journal-rule);
  border-radius: 0.55rem;
  color: var(--journal-ink);
  font: 650 0.86rem/1.2 var(--journal-sans);
  cursor: pointer;
}

.article-contents ul,
.article-contents li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-contents a {
  display: block;
  padding: 0.35rem 0.65rem;
  border-radius: 0.25rem;
  color: inherit;
  font: 500 0.875rem/1.4 var(--journal-sans);
  text-decoration: none;
}

.article-contents a[aria-current="location"] {
  box-shadow: inset 3px 0 currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--journal-rust);
  font-weight: 700;
}

.article-contents a:focus-visible,
.article-tools-bar > button:focus-visible,
.article-icon-button:focus-visible,
.article-arrow:focus-visible {
  outline: 2px solid var(--journal-rust);
  outline-offset: 2px;
}

.article-tools-dialog {
  --article-dialog-close-space: 3.25rem;
  position: fixed;
  inset: auto 0 0;
  box-sizing: border-box;
  inline-size: min(100%, 44rem);
  max-inline-size: none;
  max-block-size: 87dvh;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
  border: 0;
  background: var(--journal-paper);
  color: var(--journal-ink);
  box-shadow: 0 -0.75rem 3rem rgb(0 0 0 / 16%);
}

.article-tools-dialog[open] {
  display: flex;
  flex-direction: column;
}

.article-tools-dialog::backdrop {
  background: rgb(23 20 16 / 48%);
}

html:has(.article-tools-dialog[open]) {
  overflow: hidden;
  overscroll-behavior: none;
}

.article-dialog-content {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.article-dialog-close {
  position: absolute;
  inset-block-start: max(1rem, env(safe-area-inset-top));
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  z-index: 1;
  font: 500 1.45rem/1 var(--journal-sans);
}

.article-dialog-content .article-contents {
  padding: 0.2rem 0.3rem;
}

.article-dialog-content .article-contents .article-drawer-heading {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  margin: 0 0 0.6rem;
  padding-inline-end: var(--article-dialog-close-space);
  font-size: 1.35rem;
}

.article-dialog-content .article-contents a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
}

.article-tools-dialog[data-mode="expanded"] {
  --article-dialog-close-space: 0px;
  inset: 0;
  inline-size: 100%;
  block-size: 100dvh;
  max-block-size: none;
  border-radius: 0;
  box-shadow: none;
}

.article-tools-dialog[data-mode="expanded"] .article-dialog-close {
  display: none;
}

.article-tools-dialog[data-mode="expanded"] .article-dialog-content {
  flex: 1;
}

@media (min-width: 960px) {
  #dream-single-post-main:has(.article-sidebar) {
    --article-text-width: 36rem;
    --article-sidebar-width: clamp(15rem, 23vw, 20rem);
    --article-column-gap: clamp(1.25rem, 2.3vw, 2rem);
    --article-right-space: calc((100vw - var(--article-text-width)) / 2 - 1.5rem);
    position: relative;
    max-inline-size: var(--article-text-width);
    inset-inline-start: min(0px,
      calc(var(--article-right-space) - var(--article-sidebar-width) - var(--article-column-gap)));
  }

  .article-byline:has(.article-tools-bar) {
    position: static;
    padding: 0;
    margin-block-end: 0;
  }

  .article-body:has(.article-sidebar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--article-sidebar-width);
    column-gap: var(--article-column-gap);
    inline-size: calc(100% + var(--article-column-gap) + var(--article-sidebar-width));
  }

  .article-copy {
    grid-area: 1 / 1;
  }

  .article-tools-bar {
    display: none;
  }

  .article-sidebar {
    display: block;
    grid-area: 1 / 2;
    min-inline-size: 0;
  }

  .article-sidebar-panels {
    position: sticky;
    inset-block-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-block-size: calc(100dvh - 2rem);
  }

  .article-sidebar-panels[data-has-map] {
    block-size: min(51rem, calc(100dvh - 2rem));
  }

  .article-sidebar-panels [data-article-slot="contents"] {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .article-sidebar-panels[data-has-map] [data-article-slot="contents"] {
    max-block-size: min(15rem, 25dvh);
  }

  .article-sidebar-panels [data-article-slot="map"] {
    flex: 1;
    display: flex;
    min-block-size: 0;
  }
}