/* Editor preview: long URLs can wrap, normal words must not be sliced. */
.write-preview,
.write-preview * {
  box-sizing: border-box !important;
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.write-preview {
  overflow: auto !important;
}

.write-preview a,
.write-preview code,
.write-preview pre {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: pre-wrap !important;
}

/* Archive: hard reset. One item, one box, no title collision. */
.archive-page {
  overflow-x: hidden !important;
}

.archive-page .archive-inner {
  width: min(900px, calc(100vw - var(--side, 44px) - 150px)) !important;
  max-width: min(900px, calc(100vw - var(--side, 44px) - 150px)) !important;
  margin-left: clamp(38px, 7vw, 112px) !important;
  margin-right: auto !important;
  padding-right: 0 !important;
}

.archive-page .archive-item {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  clear: both !important;
  padding: 22px 0 24px !important;
  margin: 0 !important;
  border-top: 1px solid var(--line) !important;
  overflow: visible !important;
}

.archive-page .archive-item span,
.archive-page .archive-item em,
.archive-page .archive-item p {
  position: static !important;
  float: none !important;
  transform: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.archive-page .archive-item span {
  display: block !important;
  margin: 0 0 9px !important;
  font-size: clamp(25px, 2vw, 34px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.01em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: pretty;
}

.archive-page .archive-item em {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--muted) !important;
  font: 300 13px/1.25 var(--font-sans) !important;
  letter-spacing: .04em !important;
  text-align: left !important;
  overflow-wrap: break-word !important;
}

.archive-page .archive-item p {
  display: block !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font: 300 14px/1.36 var(--font-sans) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (min-width: 761px) {
  .archive-page .archive-inner h1 {
    font-size: clamp(58px, 7vw, 112px) !important;
    margin-bottom: 34px !important;
  }
}

/* Articles: stable moving ornament column. */
body:has(.article-page-format) {
  --article-ornament-width: clamp(150px, 15.5vw, 232px);
  --article-ornament-gap: clamp(38px, 4.6vw, 76px);
}

.single-page::after,
.archive-page::after,
.article-page-format::after,
body:has(.article-page-format) .single-page::after,
body:has(.article-page-format) .article-page-format::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  background: none !important;
  opacity: 0 !important;
}

.article-page-format,
.single-page:has(.article-format-inner) {
  background: #fbfaf5 !important;
  overflow-x: hidden !important;
  padding-right: calc(var(--article-ornament-width) + var(--article-ornament-gap) + 18px) !important;
}

.article-format-inner,
.single-inner.article-format-inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(820px, calc(100vw - var(--side, 44px) - var(--article-ornament-width) - var(--article-ornament-gap) - 112px)) !important;
  max-width: min(820px, calc(100vw - var(--side, 44px) - var(--article-ornament-width) - var(--article-ornament-gap) - 112px)) !important;
  margin-left: clamp(18px, 5vw, 72px) !important;
  margin-right: auto !important;
  padding-right: 0 !important;
}

body:has(.article-format-inner)::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: min(46vw, 620px) !important;
  height: min(46vw, 620px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: url('/assets/img/a0561d0149768168e5596018d4eb9eae.jpg') top right / contain no-repeat !important;
  opacity: .095 !important;
  mix-blend-mode: multiply !important;
}

.article-ornament-column {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--article-ornament-width);
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 1;
}

.article-ornament-column:not(.is-ready) {
  display: none !important;
}

.article-ornament-track {
  position: absolute;
  left: 0;
  top: -33.333%;
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: articleOrnamentFlow 24s linear infinite;
  will-change: top;
  backface-visibility: hidden;
}

.article-ornament-track img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  background: transparent;
}

@keyframes articleOrnamentFlow {
  from { top: -33.333%; }
  to { top: 0; }
}

.article-format-head,
.article-format-body,
.article-comments {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.article-format-body,
.article-format-body p,
.article-format-body li,
.article-format-body blockquote,
.article-format-body h1,
.article-format-body h2,
.article-format-body h3,
.article-format-body h4,
.article-format-body h5,
.article-format-body h6,
.article-format-head h1,
.article-subtitle {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.article-format-body a,
.article-format-body pre,
.article-format-body code {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.article-format-body pre,
.article-format-body code {
  white-space: pre-wrap !important;
}

.article-format-body img,
.article-format-body video,
.article-format-body iframe {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 760px) {
  body:has(.article-page-format) {
    --article-ornament-width: 52px;
    --article-ornament-gap: 24px;
  }

  html,
  body,
  .site-main,
  .single-page,
  .article-page-format {
    overflow-x: hidden !important;
  }

  body:has(.article-format-inner)::before {
    width: 72vw !important;
    height: 72vw !important;
    opacity: .07 !important;
  }

  body:has(.article-page-format) .site-main,
  .site-main:has(.article-page-format) {
    width: calc(100vw - var(--side, 38px) - var(--article-ornament-width) - var(--article-ornament-gap) - 14px) !important;
    max-width: calc(100vw - var(--side, 38px) - var(--article-ornament-width) - var(--article-ornament-gap) - 14px) !important;
    margin-left: var(--side, 38px) !important;
    padding-right: 0 !important;
  }

  .article-page-format,
  .single-page:has(.article-format-inner) {
    padding-left: 12px !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .single-page::after,
  .archive-page::after,
  .article-page-format::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    background: none !important;
    opacity: 0 !important;
  }

  .article-format-inner,
  .single-inner.article-format-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 16px !important;
  }

  .article-ornament-column {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    width: var(--article-ornament-width) !important;
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    transform: translate3d(0, 0, 0);
  }

  .article-ornament-track {
    animation-duration: 24s;
  }

  .article-format-body,
  .article-comments,
  .article-format-head {
    width: 100% !important;
    max-width: 100% !important;
  }

  .article-format-body {
    font-size: clamp(15px, 4.05vw, 18px) !important;
    line-height: 1.56 !important;
  }

  .article-format-body p,
  .article-format-body li,
  .article-format-body blockquote {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .article-format-body a,
  .article-format-body code,
  .article-format-body pre {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .article-format-head h1 {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    font-size: clamp(30px, 9.2vw, 48px) !important;
  }
}

@media (max-width: 380px) {
  body:has(.article-page-format) {
    --article-ornament-width: 44px;
    --article-ornament-gap: 18px;
  }

  body:has(.article-page-format) .site-main,
  .site-main:has(.article-page-format) {
    width: calc(100vw - var(--side, 38px) - var(--article-ornament-width) - var(--article-ornament-gap) - 12px) !important;
    max-width: calc(100vw - var(--side, 38px) - var(--article-ornament-width) - var(--article-ornament-gap) - 12px) !important;
  }

  .article-page-format,
  .single-page:has(.article-format-inner) {
    padding-left: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-ornament-track {
    animation-duration: 90s;
  }
}