/* SCP applied-case page skin. No generated wording; article content stays authoritative. */

html.mpe-scp-page {
  --scp-red: #8d2f33;
  --scp-red-soft: rgba(141, 47, 51, .18);
  --scp-line: rgba(116, 124, 132, .22);
  --scp-line-strong: rgba(116, 124, 132, .34);
  --scp-cyan: rgba(69, 214, 224, .38);
  --scp-gold: rgba(198, 158, 62, .28);
  --scp-paper-dark: #101215;
  --scp-paper-light: #f2f1eb;
  background-color: #080a0d;
  background:
    linear-gradient(180deg, rgba(8, 10, 13, .72), rgba(13, 15, 19, .9) 46rem, rgba(8, 10, 13, .96)),
    repeating-linear-gradient(90deg, rgba(141, 47, 51, .11) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(116, 124, 132, .08) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 18% 12%, rgba(141, 47, 51, .22), transparent 30rem),
    radial-gradient(circle at 86% 10%, rgba(69, 214, 224, .1), transparent 34rem),
    linear-gradient(180deg, #080a0d, #111318 38rem, #080a0d);
  background-attachment: fixed;
}

html.mpe-scp-page[data-color-scheme="light"] {
  background-color: #e7e8e3;
  background:
    linear-gradient(180deg, rgba(231, 232, 227, .78), rgba(245, 243, 236, .92) 42rem, rgba(227, 229, 223, .96)),
    repeating-linear-gradient(90deg, rgba(141, 47, 51, .08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(20, 24, 28, .055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(115deg, rgba(20, 24, 28, .04) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 18% 12%, rgba(141, 47, 51, .12), transparent 30rem),
    radial-gradient(circle at 86% 10%, rgba(69, 214, 224, .09), transparent 34rem),
    linear-gradient(180deg, #e7e8e3, #f5f3ec 34rem, #e3e5df);
  background-attachment: fixed;
}

html.mpe-scp-page body,
html.mpe-scp-page .gh-site {
  background: transparent !important;
}

html.mpe-scp-page .gh-head {
  border-bottom: 1px solid var(--scp-line);
  background: rgba(9, 11, 14, .88);
  backdrop-filter: blur(10px);
}

html.mpe-scp-page[data-color-scheme="light"] .gh-head {
  background: rgba(244, 243, 237, .9);
}

html.mpe-scp-page .gh-foot {
  border-top: 1px solid var(--scp-line);
  background: rgba(9, 11, 14, .88);
}

html.mpe-scp-page[data-color-scheme="light"] .gh-foot {
  background: rgba(244, 243, 237, .9);
}

html.mpe-scp-page .gh-article {
  position: relative;
  padding-left: clamp(1.8rem, 2.8vw, 3.8rem);
}

html.mpe-scp-page .gh-article::after {
  content: "";
  position: absolute;
  top: clamp(1rem, 2vw, 2.4rem);
  bottom: 0;
  left: 0;
  width: 4px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--scp-red), rgba(141, 47, 51, .2) 18rem, transparent);
}

html.mpe-scp-page .gh-article-header {
  border-bottom: 1px solid var(--scp-line);
  padding-bottom: clamp(2rem, 3vw, 3.6rem);
}

html.mpe-scp-page .gh-article-tag {
  color: #b9913b;
}

html.mpe-scp-page .gh-article-sidebar {
  color: inherit;
  padding-right: 2.4rem;
}

html.mpe-scp-page .gh-article-sidebar .gh-author-image-list {
  margin-left: 0;
}

html.mpe-scp-page .gh-article-sidebar .gh-author-image {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(69, 214, 224, .28);
  margin-bottom: 1.1rem;
}

html.mpe-scp-page .gh-article-sidebar .gh-author-name {
  font-size: 1.45rem;
  line-height: 1.22;
  letter-spacing: 0;
}

html.mpe-scp-page .gh-article-sidebar .gh-article-meta {
  font-size: 1.1rem;
  line-height: 1.35;
  margin-top: .5rem;
}

html.mpe-scp-page .gh-article-sidebar .gh-article-meta-inner {
  align-items: center;
  flex-wrap: wrap;
  gap: .18rem .42rem;
}

html.mpe-scp-page .gh-article-sidebar .gh-article-meta-sep {
  margin: 0;
  opacity: .55;
}

html.mpe-scp-page .gh-article-sidebar .gh-button-share {
  margin-top: 1.2rem;
  padding: .35em .85em;
  border-color: rgba(69, 214, 224, .28);
  font-size: 1.15rem;
  letter-spacing: 0;
}

html.mpe-scp-page .gh-content h2,
html.mpe-scp-page .gh-content h3 {
  border-bottom: 1px solid var(--scp-line);
  padding-bottom: .24em;
}

html.mpe-scp-page .gh-content h2::first-letter,
html.mpe-scp-page .gh-content h3::first-letter {
  color: var(--scp-red);
}

html.mpe-scp-page .gh-content a {
  text-decoration-thickness: .08em;
  text-decoration-color: rgba(141, 47, 51, .45);
  text-underline-offset: .16em;
}

html.mpe-scp-page .gh-content blockquote {
  border-left: 3px solid var(--scp-red);
  background: linear-gradient(90deg, var(--scp-red-soft), transparent 20rem);
}

html.mpe-scp-page .gh-content hr {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--scp-line-strong), transparent);
}

html.mpe-scp-page .gh-article-image img,
html.mpe-scp-page .gh-content img {
  filter: contrast(1.02) saturate(1.02);
}

html.mpe-scp-page .gh-article-image,
html.mpe-scp-page .kg-image-card {
  background: transparent;
}

html.mpe-scp-page .gh-read-next,
html.mpe-scp-page .mpe-article-tags-panel,
html.mpe-scp-page .mpe-book-widget-panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.mpe-scp-page .gh-read-next .gh-pagehead {
  border: 0;
}

html.mpe-scp-page img.mpe-cognitohazard-image {
  --mpe-hazard-hue: 0deg;
  --mpe-hazard-contrast: 1.08;
  --mpe-hazard-saturate: 1.1;
  filter:
    contrast(var(--mpe-hazard-contrast))
    saturate(var(--mpe-hazard-saturate))
    hue-rotate(var(--mpe-hazard-hue));
  animation: mpeScpImageContact 9s ease-in-out infinite;
  will-change: filter;
}

html.mpe-scp-page img.mpe-cognitohazard-image--terminal {
  --mpe-hazard-contrast: 1.06;
  --mpe-hazard-saturate: 1.08;
}

@keyframes mpeScpImageContact {
  0%, 100% {
    filter:
      contrast(var(--mpe-hazard-contrast))
      saturate(var(--mpe-hazard-saturate))
      hue-rotate(var(--mpe-hazard-hue));
  }
  49% {
    filter:
      contrast(calc(var(--mpe-hazard-contrast) + .04))
      saturate(calc(var(--mpe-hazard-saturate) + .05))
      hue-rotate(calc(var(--mpe-hazard-hue) + 2deg));
  }
  50% {
    filter:
      contrast(calc(var(--mpe-hazard-contrast) + .16))
      saturate(calc(var(--mpe-hazard-saturate) + .18))
      hue-rotate(calc(var(--mpe-hazard-hue) - 3deg));
  }
  51% {
    filter:
      contrast(calc(var(--mpe-hazard-contrast) + .03))
      saturate(calc(var(--mpe-hazard-saturate) + .04))
      hue-rotate(calc(var(--mpe-hazard-hue) + 1deg));
  }
}

@media (max-width: 700px) {
  html.mpe-scp-page .gh-article {
    padding-left: 1.2rem;
  }

  html.mpe-scp-page .gh-article::after {
    width: 3px;
  }
}

/* Mobile custom-skin overflow/zoom guard.
   The SCP article keeps its dossier gutter, but no decorative shell or post
   footer block should make the browser lay out wider than the phone viewport. */
@media (max-width: 767px) {
  html.mpe-scp-page,
  html.mpe-scp-page body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  html.mpe-scp-page .gh-site,
  html.mpe-scp-page .gh-main,
  html.mpe-scp-page .gh-outer,
  html.mpe-scp-page .gh-inner,
  html.mpe-scp-page main,
  html.mpe-scp-page .gh-article,
  html.mpe-scp-page .gh-article-header,
  html.mpe-scp-page .gh-content,
  html.mpe-scp-page .mpe-post-routes,
  html.mpe-scp-page .mpe-article-tags-panel,
  html.mpe-scp-page .mpe-book-widget-panel,
  html.mpe-scp-page .gh-read-next:not(.gh-comments) {
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  html.mpe-scp-page .gh-canvas {
    --main: min(var(--content-width, 720px), calc(100vw - var(--gap, 2rem) * 2));
    --full: minmax(var(--gap, 2rem), 1fr);
  }

  html.mpe-scp-page .gh-article {
    box-sizing: border-box;
    width: 100% !important;
    padding-right: 0;
  }

  html.mpe-scp-page .gh-article-sidebar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem .8rem;
  }

  html.mpe-scp-page .gh-article-sidebar .gh-author-name-list,
  html.mpe-scp-page .gh-article-sidebar .gh-article-meta,
  html.mpe-scp-page .gh-article-sidebar .gh-button-share {
    min-width: 0;
  }

  html.mpe-scp-page .gh-article-sidebar .gh-button-share {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    white-space: normal;
  }

  html.mpe-scp-page .gh-content > *,
  html.mpe-scp-page .gh-content .kg-card,
  html.mpe-scp-page .gh-content figure,
  html.mpe-scp-page .gh-content img {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.mpe-scp-page img.mpe-cognitohazard-image {
    animation: none !important;
  }
}