/*
 * Local, static ornament for the viewport's outside edges.
 * Inject once inside <body>:
 * <div class="motrd-edge-flames" aria-hidden="true" inert></div>
 *
 * The existing 1500px maximum page and its columns remain unchanged. Below
 * that width the 22px texture stays inside the desktop sidebars' 32px padding;
 * mobile's 9px strip fits in the existing 16px exterior gutter.
 */
.motrd-edge-flames {
  --motrd-flame-width: clamp(22px, calc((100vw - 1500px) / 2), 140px);
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  contain: strict;
}
.motrd-edge-flames::before,
.motrd-edge-flames::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--motrd-flame-width);
  background: url("./black-flames.svg") left top / 100% auto repeat-y;
  pointer-events: none !important;
  border: 0;
  opacity: .96;
}
.motrd-edge-flames::before { left: 0; }
.motrd-edge-flames::after {
  right: 0;
  transform: scaleX(-1);
  background-position: left -325px;
}

/* Reader mode keeps enough paper padding for a narrower ornamental seam. */
html[reader-mode="on"] .motrd-edge-flames,
body:has(.readermode[aria-checked="true"]) .motrd-edge-flames,
body:has(.readermode[aria-pressed="true"]) .motrd-edge-flames {
  --motrd-flame-width: 14px;
}

/* Search dialogs and expanded navigation retain their own unadorned surface. */
body:has(.search-container.active) .motrd-edge-flames,
body:has(.search-container[aria-hidden="false"]) .motrd-edge-flames {
  visibility: hidden;
}

@media (max-width: 800px) {
  .motrd-edge-flames {
    --motrd-flame-width: 9px;
  }
  .motrd-edge-flames::before,
  .motrd-edge-flames::after {
    background-size: 100% auto;
    opacity: .86;
  }
}

/* Decoration never consumes ink or changes high-contrast reading surfaces. */
@media print, (forced-colors: active) {
  .motrd-edge-flames { display: none !important; }
}


/* The title ornament and the frame's closing rule share one centerline.
 * Keep the title text left-aligned and leave Markdown's internal rules alone.
 */
.center > .page-header .article-title,
.center > article + hr {
  box-sizing: border-box;
  width: 100%;
  margin-inline: 0;
  background-position: center bottom;
  background-size: min(80%, 360px) 24px;
}
.center > article + hr {
  height: 24px;
  padding: 0;
  border: 0;
}
@media (max-width: 800px) {
  .center > .page-header .article-title,
  .center > article + hr {
    background-size: min(80%, 280px) 20px;
  }
  .center > article + hr { height: 20px; }
}
@media print {
  .center > .page-header .article-title { background-image: none !important; }
  .center > article + hr { display: none !important; }
}