Site-47 Baserock

排版指南 · Layout Guide

排版指南
LAYOUT GUIDE — ROCK THEME

磐石主题（rock）排版构件参考。本页本身使用 rock-docs 风格——比文章卡片更宽、无缩进、无衬线，便于浏览代码与对照预览。

正常 category 下的页面通过 _template 自动加载主题样式。system:、theme:、contest: 等命名空间下的页面需要手动添加 include：

[[module CSS]]
body:has(.rock-landing) #page-title { display: none; }
body:has(.rock-landing) #breadcrumbs,
body:has(.rock-landing) .page-tags { display: none; }
body:has(.rock-landing) #main-content { padding-top: 0 !important; }

.rock-landing {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1.4em;
  margin-bottom: -1.4em;
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}
.rock-landing p { margin: 0 !important; }

/* ============ HERO ============ */
.rock-hero {
  background: #0e0e10;
  color: #f2f0ea !important;
  padding: 5em 2em 4.2em;
  position: relative;
  overflow: hidden;
}
.rock-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.04), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(255,255,255,0.018) 28px 29px);
  pointer-events: none;
}
.rock-hero-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 2.6em; max-width: 980px; margin: 0 auto;
  flex-wrap: wrap; position: relative;
}
.rock-logo { flex: 0 0 auto; animation: rockLogoIn 1.1s cubic-bezier(.2,.7,.2,1) 0.1s both; }
.rock-logo img {
  width: 230px; max-width: 32vw; height: auto; display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.rock-text { flex: 0 1 auto; text-align: left; min-width: 280px; color: #f2f0ea; }
.rock-pre {
  display: flex; align-items: baseline; gap: 0.7em;
  margin: 0 0 0.05em; line-height: 1; flex-wrap: wrap;
  animation: rockFadeUp 0.7s ease-out 0.45s both;
}
.rock-pre .name { font-size: 1.9em; font-weight: 900; letter-spacing: 0.08em; color: #f2f0ea !important; }
.rock-pre .sub { font-size: 0.9em; font-weight: 400; color: #9c9a92 !important; letter-spacing: 0.08em; }
.rock-id {
  font-size: 4.6em; font-weight: 900; letter-spacing: 0.02em;
  margin: 0.04em 0 0.18em; line-height: 1; color: #f2f0ea !important;
  font-family: "Helvetica Neue", "Arial Black", sans-serif;
  animation: rockFadeUp 0.8s ease-out 0.6s both;
}
.rock-motto-bar {
  display: inline-block; background: #f2f0ea; color: #0e0e10 !important;
  padding: 0.42em 0.95em 0.48em; font-size: 1.5em; font-weight: 800;
  letter-spacing: 0.48em; text-indent: 0.48em; margin: 0;
  animation: rockMottoIn 0.75s cubic-bezier(.2,.7,.2,1) 0.85s both;
  transform-origin: left center;
}
.rock-motto-bar, .rock-motto-bar * { color: #0e0e10 !important; }
.rock-motto-sub {
  font-size: 0.85em; color: #8a877e !important;
  letter-spacing: 0.34em; text-indent: 0.34em;
  margin-top: 0.5em !important; font-weight: 600;
  animation: rockFadeUp 0.6s ease-out 1.1s both;
}

/* ============ BANDS (shared) ============ */
.rock-band { padding: 4em 2em 3.6em; position: relative; }
.rock-band-light { background: #f4f1ea; color: #1a1a1a !important; border-top: 1px solid #d9d4c5; border-bottom: 1px solid #d9d4c5; }
.rock-band-light, .rock-band-light p, .rock-band-light strong { color: #1a1a1a !important; }
.rock-band-dark { background: #131316; color: #f2f0ea !important; }
.rock-band-dark, .rock-band-dark p, .rock-band-dark strong { color: #f2f0ea !important; }

.rock-band-inner { max-width: 980px; margin: 0 auto; }
.rock-eyebrow {
  font-size: 0.78em; letter-spacing: 0.5em; text-indent: 0.5em;
  text-align: center; opacity: 0.65; margin-bottom: 0.7em; font-weight: 600;
  text-transform: uppercase;
}
.rock-h {
  font-size: 2em; font-weight: 800; text-align: center;
  margin: 0 0 1.7em; letter-spacing: 0.18em; text-indent: 0.18em;
  line-height: 1.2; position: relative;
}
.rock-h::after {
  content: ""; display: block;
  width: 56px; height: 2px; background: currentColor;
  margin: 0.9em auto 0; opacity: 0.85;
  transform-origin: center;
  animation: rockBarGrow 0.7s ease-out 0.3s both;
}
.rock-sub {
  text-align: center; max-width: 620px; margin: 0 auto;
  line-height: 1.95; font-size: 0.98em; letter-spacing: 0.04em;
  opacity: 0.85;
}

/* ============ MANDATE GRID ============ */
.rock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
  margin-top: 2.6em;
}
.rock-card {
  border: 1px solid rgba(242,240,234,0.18);
  padding: 1.6em 1.4em 1.5em;
  background: rgba(255,255,255,0.018);
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}
.rock-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.04);
  border-color: rgba(242,240,234,0.35);
}
.rock-card-num {
  font-family: "Helvetica Neue", "Arial Black", sans-serif;
  font-size: 2.4em; font-weight: 900; line-height: 1;
  opacity: 0.35; margin-bottom: 0.4em;
}
.rock-card-title {
  font-size: 1.15em; font-weight: 800;
  letter-spacing: 0.18em; text-indent: 0.18em;
  margin-bottom: 0.7em; padding-bottom: 0.55em;
  border-bottom: 1px solid rgba(242,240,234,0.2);
}
.rock-card-body { font-size: 0.92em; line-height: 1.85; opacity: 0.78; letter-spacing: 0.03em; }

/* ============ SITE DIRECTOR PROFILE ============ */
.rock-profile {
  max-width: 640px;
  margin: 2.4em auto 0;
  padding: 2em 2.2em 2.1em;
  background: #ffffff;
  border: 1px solid #d9d4c5;
  border-left: 4px solid #1a1a1a;
  text-align: left;
}
.rock-profile-meta {
  margin-bottom: 0.6em;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.74em; font-weight: 700;
  letter-spacing: 0.24em; text-indent: 0.24em;
}
.rock-profile-meta span {
  display: inline-block;
  padding: 0.32em 0.7em 0.36em;
  background: #1a1a1a;
  color: #f2f0ea !important;
}
.rock-profile-name {
  font-size: 1.9em;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 0.15em;
}
.rock-profile-title {
  font-size: 0.92em;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  opacity: 0.7;
  font-weight: 600;
  margin-bottom: 1.1em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid #d9d4c5;
}
.rock-profile-bio {
  font-size: 0.95em;
  line-height: 1.9;
  letter-spacing: 0.03em;
  margin-bottom: 1.3em;
  opacity: 0.92;
}
.rock-profile-quote {
  position: relative;
  padding: 0.6em 0 0.4em 1.2em;
  border-left: 3px solid #1a1a1a;
  font-family: "Source Han Serif SC", "Noto Serif SC", serif;
  font-size: 1em;
  font-style: italic;
  line-height: 1.7;
}
.rock-profile-quote .cite {
  display: block;
  margin-top: 0.5em;
  font-style: normal;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.78em;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  opacity: 0.6;
}

/* ============ DEPT GRID (enlist) ============ */
.rock-depts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.2em;
  margin-top: 2.6em;
}
.rock-dept {
  border: 1px solid rgba(242,240,234,0.18);
  background: rgba(255,255,255,0.018);
  padding: 1.4em 1.2em 1.3em;
  text-align: left;
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}
.rock-dept:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(242,240,234,0.4);
}
.rock-dept-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: #f2f0ea;
  color: #0e0e10 !important;
  font-family: "Helvetica Neue", "Arial Black", sans-serif;
  font-size: 1.15em; font-weight: 900;
  margin-bottom: 0.9em;
}
.rock-dept-icon p, .rock-band-dark .rock-dept-icon p { color: #0e0e10 !important; }
.rock-dept-name {
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1.2;
  margin-bottom: 0.2em;
}
.rock-dept-en {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  opacity: 0.55;
  margin-bottom: 0.8em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid rgba(242,240,234,0.18);
}
.rock-dept-body {
  font-size: 0.86em;
  line-height: 1.8;
  letter-spacing: 0.03em;
  opacity: 0.78;
}
.rock-enlist-note {
  text-align: center;
  font-size: 0.78em;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  opacity: 0.55;
  margin-top: 2.2em;
  font-weight: 600;
}

/* ============ DOD-STYLE FOOTER ============ */
.rock-gov-banner {
  background: #112e51;
  color: #ffffff !important;
  padding: 0.6em 1.4em;
  font-family: "Helvetica Neue", "Source Sans Pro", "PingFang SC", sans-serif;
  font-size: 0.78em;
  letter-spacing: 0.02em;
}
.rock-gov-banner, .rock-gov-banner * { color: #ffffff !important; }
.rock-gov-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.rock-gov-flag {
  display: inline-block;
  width: 26px; height: 14px;
  background: linear-gradient(to bottom,
    #b22234 0 1.6px, #fff 1.6px 3.2px,
    #b22234 3.2px 4.8px, #fff 4.8px 6.4px,
    #b22234 6.4px 8px, #fff 8px 9.6px,
    #b22234 9.6px 11.2px, #fff 11.2px 12.8px,
    #b22234 12.8px 14px);
  position: relative;
  flex-shrink: 0;
}
.rock-gov-flag::before {
  content: ""; position: absolute;
  top: 0; left: 0; width: 11px; height: 7.5px;
  background: #3c3b6e;
}

.rock-footer {
  background: #0a1a2f;
  color: #d8e1ee !important;
  padding: 3em 1.6em 2em;
  font-family: "Helvetica Neue", "Source Sans Pro", "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 0.9em;
  line-height: 1.7;
}
.rock-footer, .rock-footer * { color: #d8e1ee !important; }
.rock-footer a {
  color: #c2d2ea !important;
  text-decoration: none !important;
  transition: color 0.18s;
}
.rock-footer a:hover { color: #ffffff !important; text-decoration: underline !important; }

.rock-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.rock-footer-head {
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding-bottom: 1.6em;
  margin-bottom: 1.8em;
  border-bottom: 1px solid rgba(216,225,238,0.18);
  flex-wrap: wrap;
}
.rock-footer-seal {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, #1e3a66 0%, #0a1a2f 70%);
  border: 2px solid #c9a227;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 4px rgba(201,162,39,0.18);
}
.rock-footer-seal::before {
  content: "★";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #c9a227 !important;
  font-size: 1.8em;
  line-height: 1;
}
.rock-footer-id {
  flex: 1; min-width: 240px;
}
.rock-footer-agency {
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.15em;
  color: #ffffff !important;
}
.rock-footer-cover {
  font-size: 0.78em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #8fa3c1 !important;
  text-transform: uppercase;
}

.rock-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.6em 2em;
  margin-bottom: 2em;
}
.rock-footer-col h4 {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: #ffffff !important;
  margin: 0 0 0.85em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid rgba(216,225,238,0.18);
}
.rock-footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
}
.rock-footer-col li {
  font-size: 0.86em;
  margin: 0.4em 0;
  line-height: 1.5;
}

.rock-footer-branches {
  text-align: center;
  margin: 1.6em 0 1.4em;
  padding: 1em 0;
  border-top: 1px solid rgba(216,225,238,0.18);
  border-bottom: 1px solid rgba(216,225,238,0.18);
}
.rock-footer-branches a {
  display: inline-block;
  margin: 0.22em 0.3em;
  padding: 0.45em 0.9em 0.5em;
  border: 1px solid rgba(216,225,238,0.3);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  transition: background 0.18s, border-color 0.18s;
}
.rock-footer-branches a:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(216,225,238,0.6);
  text-decoration: none !important;
}

.rock-footer-bottom {
  text-align: center;
  font-size: 0.78em;
  color: #8fa3c1 !important;
  padding-top: 1.4em;
  border-top: 1px solid rgba(216,225,238,0.12);
  letter-spacing: 0.02em;
  line-height: 1.8;
}
.rock-footer-bottom a {
  font-size: 1em;
  margin: 0 0.4em;
}
.rock-footer-bottom .sep {
  opacity: 0.4;
  margin: 0 0.2em;
}

/* ============ CTA ============ */
.rock-cta { text-align: center; margin-top: 2.4em; }
.rock-cta a {
  display: inline-block; padding: 0.8em 2.6em;
  background: #f2f0ea; color: #0e0e10 !important;
  text-decoration: none !important;
  letter-spacing: 0.42em; text-indent: 0.42em;
  font-weight: 800; font-size: 0.95em;
  border: 2px solid #f2f0ea;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.rock-cta a:hover {
  background: transparent;
  color: #f2f0ea !important;
  transform: translateY(-2px);
}
.rock-band-light .rock-cta a {
  background: #0e0e10; color: #f2f0ea !important; border-color: #0e0e10;
}
.rock-band-light .rock-cta a:hover {
  background: transparent; color: #0e0e10 !important;
}
/* On dark bands the base `.rock-cta a { background: #f2f0ea }` was being
   overridden by something (button rendered as black-on-black). Pin the
   cream button explicitly with !important so nothing can beat it. */
.rock-band-dark .rock-cta a {
  background: #f2f0ea !important;
  color: #0e0e10 !important;
  border-color: #f2f0ea !important;
}
.rock-band-dark .rock-cta a:hover {
  background: transparent !important;
  color: #f2f0ea !important;
  border-color: #f2f0ea !important;
}

/* ============ ARCHIVES & CONTEST ============ */
.rock-section-label {
  text-align: center;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  margin: 2.8em 0 1.6em;
  opacity: 0.78;
}
.rock-section-label::after {
  content: ""; display: block;
  width: 44px; height: 2px;
  background: currentColor;
  margin: 0.8em auto 0;
  opacity: 0.55;
}

.rock-entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2em;
  margin-bottom: 1.4em;
}
.rock-entry {
  border: 1px solid rgba(0,0,0,0.16);
  background: rgba(0,0,0,0.025);
  padding: 1.4em 1.3em 1.4em;
  text-align: left;
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
}
.rock-band-dark .rock-entry {
  border-color: rgba(242,240,234,0.18);
  background: rgba(255,255,255,0.018);
}
.rock-entry:hover {
  transform: translateY(-3px);
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.34);
}
.rock-band-dark .rock-entry:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(242,240,234,0.4);
}
.rock-entry-id {
  font-family: "Helvetica Neue", "Arial Black", sans-serif;
  font-size: 0.78em; font-weight: 700;
  letter-spacing: 0.24em; text-indent: 0.24em;
  opacity: 0.55; margin-bottom: 0.55em;
}
.rock-entry-title {
  font-size: 1.18em; font-weight: 800;
  letter-spacing: 0.06em; line-height: 1.25;
  margin-bottom: 0.55em; padding-bottom: 0.6em;
  border-bottom: 1px solid rgba(0,0,0,0.16);
}
.rock-band-dark .rock-entry-title { border-bottom-color: rgba(242,240,234,0.2); }
.rock-entry-body {
  font-size: 0.86em; line-height: 1.85;
  letter-spacing: 0.03em; opacity: 0.78;
  margin-bottom: 1em; flex: 1;
}
.rock-entry-link, .rock-entry-link a {
  font-size: 0.78em; font-weight: 700;
  letter-spacing: 0.22em; text-indent: 0.22em;
  text-transform: uppercase;
  text-decoration: none !important;
  opacity: 0.85;
  transition: opacity 0.18s, letter-spacing 0.18s;
}
.rock-entry-link:hover, .rock-entry-link a:hover { opacity: 1; letter-spacing: 0.3em; }

.rock-contest {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 1.6em;
  margin-top: 0.6em;
  align-items: stretch;
}
.rock-contest-main {
  border: 1px solid rgba(0,0,0,0.22);
  background: linear-gradient(135deg, rgba(0,0,0,0.045), rgba(0,0,0,0.012));
  padding: 1.8em 1.7em 1.7em;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.rock-band-dark .rock-contest-main {
  border-color: rgba(242,240,234,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
}
.rock-contest-tag {
  display: inline-block;
  font-size: 0.72em; font-weight: 800;
  letter-spacing: 0.28em; text-indent: 0.28em;
  background: #c9a227; color: #0e0e10 !important;
  padding: 0.34em 0.85em 0.4em;
  margin-bottom: 0.95em;
  align-self: flex-start;
}
.rock-contest-tag, .rock-contest-tag * { color: #0e0e10 !important; }
.rock-contest-title {
  font-size: 1.55em; font-weight: 900;
  letter-spacing: 0.05em; line-height: 1.25;
  margin-bottom: 0.65em;
}
.rock-contest-prompt {
  font-family: "Source Han Serif SC", "Noto Serif SC", serif;
  font-size: 1.05em; font-style: italic;
  line-height: 1.75;
  padding: 0.4em 0 0.4em 1em;
  border-left: 3px solid #c9a227;
  margin-bottom: 1.2em;
  opacity: 0.95;
}
.rock-contest-info { margin-bottom: 1.4em; }
.rock-contest-info-row {
  font-size: 0.9em; line-height: 1.85;
  letter-spacing: 0.02em;
  margin-bottom: 0.3em;
}
.rock-contest-info-label {
  display: inline-block;
  min-width: 4em;
  font-size: 0.78em; font-weight: 700;
  letter-spacing: 0.22em; text-indent: 0.22em;
  opacity: 0.6;
  margin-right: 0.7em;
}
.rock-contest .rock-cta { margin-top: auto; text-align: left; }
.rock-contest .rock-cta a {
  padding: 0.7em 2.2em;
  letter-spacing: 0.34em; text-indent: 0.34em;
  font-size: 0.88em;
}

.rock-contest-side {
  border: 1px solid rgba(0,0,0,0.16);
  background: rgba(0,0,0,0.02);
  padding: 1.6em 1.5em 1.5em;
  text-align: left;
}
.rock-band-dark .rock-contest-side {
  border-color: rgba(242,240,234,0.18);
  background: rgba(255,255,255,0.018);
}
.rock-contest-side h5 {
  font-size: 0.8em; font-weight: 700;
  letter-spacing: 0.26em; text-indent: 0.26em;
  text-transform: uppercase;
  margin: 0 0 1em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  opacity: 0.72;
}
.rock-band-dark .rock-contest-side h5 { border-bottom-color: rgba(242,240,234,0.2); }
.rock-contest-side h5:not(:first-child) { margin-top: 1.6em; }
.rock-contest-side ol,
.rock-contest-side ul {
  padding-left: 1.3em;
  margin: 0 0 0.6em;
  font-size: 0.9em; line-height: 1.9;
  opacity: 0.85;
}
.rock-contest-side ol li,
.rock-contest-side ul li { margin-bottom: 0.3em; }

@media (max-width: 860px) {
  .rock-contest { grid-template-columns: 1fr; gap: 1.2em; }
}

/* ============ ON SEA — CI maritime threat assessment ============ */
.rock-onsea {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.6em;
  margin-top: 0.6em;
  align-items: stretch;
}
.rock-onsea-image {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.22);
  background: #0e0e10;
  min-height: 340px;
}
.rock-band-dark .rock-onsea-image { border-color: rgba(242,240,234,0.22); }
.rock-onsea-image .image,
.rock-onsea-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) brightness(0.78) saturate(0.85);
}
.rock-onsea-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,0.88) 100%);
  pointer-events: none;
  z-index: 1;
}
.rock-onsea-image-caption {
  position: absolute;
  left: 1.2em; right: 1.2em; bottom: 1em;
  z-index: 2;
  font-size: 0.78em;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.88) !important;
  font-weight: 600;
  line-height: 1.55;
}
.rock-onsea-body {
  border: 1px solid rgba(0,0,0,0.22);
  background: linear-gradient(135deg, rgba(0,0,0,0.045), rgba(0,0,0,0.012));
  padding: 1.8em 1.7em 1.7em;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.rock-band-dark .rock-onsea-body {
  border-color: rgba(242,240,234,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
}
.rock-onsea-tag {
  display: inline-block;
  font-size: 0.72em; font-weight: 800;
  letter-spacing: 0.28em; text-indent: 0.28em;
  background: #4d8ec1; color: #f4f1ea !important;
  padding: 0.34em 0.85em 0.4em;
  margin-bottom: 0.95em;
  align-self: flex-start;
}
.rock-onsea-tag, .rock-onsea-tag * { color: #f4f1ea !important; }
.rock-onsea-title {
  font-size: 1.55em; font-weight: 900;
  letter-spacing: 0.05em; line-height: 1.25;
  margin-bottom: 0.65em;
}
.rock-onsea-prompt {
  font-family: "Source Han Serif SC", "Noto Serif SC", serif;
  font-size: 1.05em; font-style: italic;
  line-height: 1.75;
  padding: 0.4em 0 0.4em 1em;
  border-left: 3px solid #4d8ec1;
  margin-bottom: 1.2em;
  opacity: 0.95;
}
.rock-onsea-text {
  font-size: 0.96em; line-height: 1.85;
  margin-bottom: 1.4em;
  opacity: 0.92;
}
.rock-onsea-meta { margin-top: auto; margin-bottom: 1.4em; }
.rock-onsea-meta-row {
  font-size: 0.9em; line-height: 1.85;
  letter-spacing: 0.02em;
  margin-bottom: 0.3em;
}
.rock-onsea-meta-label {
  display: inline-block;
  min-width: 4em;
  font-size: 0.78em; font-weight: 700;
  letter-spacing: 0.22em; text-indent: 0.22em;
  opacity: 0.6;
  margin-right: 0.7em;
}
.rock-onsea .rock-cta { text-align: left; margin: 0; }
.rock-onsea .rock-cta a {
  padding: 0.7em 2.2em;
  letter-spacing: 0.34em; text-indent: 0.34em;
  font-size: 0.88em;
}

@media (max-width: 860px) {
  .rock-onsea { grid-template-columns: 1fr; gap: 1.2em; }
  .rock-onsea-image { min-height: 240px; }
}

/* ============ INTRO ANIMATIONS ============ */
.rock-band .rock-eyebrow { animation: rockFadeUp 0.7s ease-out 0.1s both; }
.rock-band .rock-h { animation: rockFadeUp 0.7s ease-out 0.2s both; }
.rock-band .rock-sub { animation: rockFadeUp 0.7s ease-out 0.35s both; }
.rock-band .rock-grid > .rock-card:nth-child(1) { animation: rockFadeUp 0.7s ease-out 0.45s both; }
.rock-band .rock-grid > .rock-card:nth-child(2) { animation: rockFadeUp 0.7s ease-out 0.6s both; }
.rock-band .rock-grid > .rock-card:nth-child(3) { animation: rockFadeUp 0.7s ease-out 0.75s both; }
.rock-band .rock-profile { animation: rockFadeUp 0.8s ease-out 0.4s both; }
.rock-band .rock-depts > .rock-dept:nth-child(1) { animation: rockFadeUp 0.6s ease-out 0.4s both; }
.rock-band .rock-depts > .rock-dept:nth-child(2) { animation: rockFadeUp 0.6s ease-out 0.5s both; }
.rock-band .rock-depts > .rock-dept:nth-child(3) { animation: rockFadeUp 0.6s ease-out 0.6s both; }
.rock-band .rock-depts > .rock-dept:nth-child(4) { animation: rockFadeUp 0.6s ease-out 0.7s both; }
.rock-band .rock-depts > .rock-dept:nth-child(5) { animation: rockFadeUp 0.6s ease-out 0.8s both; }
.rock-band .rock-enlist-note { animation: rockFadeUp 0.7s ease-out 0.9s both; }
.rock-band .rock-cta { animation: rockFadeUp 0.7s ease-out 0.55s both; }
.rock-band .rock-section-label { animation: rockFadeUp 0.7s ease-out 0.25s both; }
.rock-band .rock-entries > .rock-entry:nth-child(1) { animation: rockFadeUp 0.6s ease-out 0.4s both; }
.rock-band .rock-entries > .rock-entry:nth-child(2) { animation: rockFadeUp 0.6s ease-out 0.5s both; }
.rock-band .rock-entries > .rock-entry:nth-child(3) { animation: rockFadeUp 0.6s ease-out 0.6s both; }
.rock-band .rock-entries > .rock-entry:nth-child(4) { animation: rockFadeUp 0.6s ease-out 0.7s both; }
.rock-band .rock-contest > .rock-contest-main { animation: rockFadeUp 0.7s ease-out 0.5s both; }
.rock-band .rock-contest > .rock-contest-side { animation: rockFadeUp 0.7s ease-out 0.65s both; }
.rock-band .rock-onsea > .rock-onsea-image { animation: rockFadeUp 0.7s ease-out 0.5s both; }
.rock-band .rock-onsea > .rock-onsea-body { animation: rockFadeUp 0.7s ease-out 0.65s both; }

@keyframes rockFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rockLogoIn {
  0%   { opacity: 0; transform: scale(0.82) translateY(10px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rockMottoIn {
  0%   { opacity: 0; transform: scaleX(0.6); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes rockBarGrow {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rock-landing *, .rock-landing *::before, .rock-landing *::after { animation: none !important; }
}

@media (max-width: 860px) {
  .rock-grid { grid-template-columns: 1fr; gap: 1em; }
  .rock-profile { padding: 1.6em 1.4em 1.7em; }
}
@media (max-width: 720px) {
  .rock-hero { padding: 3em 1.2em 2.5em; }
  .rock-hero-inner { gap: 1.4em; }
  .rock-logo img { width: 150px; max-width: 42vw; }
  .rock-text { text-align: center; min-width: 0; }
  .rock-pre { justify-content: center; }
  .rock-id { font-size: 3em; }
  .rock-motto-bar { font-size: 1.05em; }
  .rock-band { padding: 2.8em 1.2em 2.6em; }
  .rock-h { font-size: 1.55em; }
}

/* ============ APPLY (membership form) ============ */
.rock-apply {
  max-width: 640px;
  margin: 0 auto;
  padding: 2em 2.2em 1.8em;
  background: #ffffff;
  border: 1px solid #d9d4c5;
  border-left: 4px solid #1a1a1a;
}
.rock-apply, .rock-apply p, .rock-apply label, .rock-apply div {
  color: #1a1a1a !important;
}
.rock-apply textarea,
.rock-apply input[type=text],
.rock-apply input[type=email] {
  width: 100%;
  font-family: inherit;
  font-size: 0.95em;
  padding: 0.65em 0.85em;
  border: 1px solid #c9c4b5;
  background: #f8f6ee;
  color: #1a1a1a;
  box-sizing: border-box;
  margin-bottom: 0.8em;
}
.rock-apply textarea {
  min-height: 160px;
  line-height: 1.7;
  resize: vertical;
}
.rock-apply input[type=submit],
.rock-apply button {
  display: inline-block;
  padding: 0.7em 2em 0.75em;
  background: #0e0e10;
  color: #f2f0ea !important;
  border: 2px solid #0e0e10;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  font-weight: 800;
  font-size: 0.92em;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.18s, color 0.18s, transform 0.18s;
  font-family: inherit;
}
.rock-apply input[type=submit]:hover,
.rock-apply button:hover {
  background: transparent;
  color: #0e0e10 !important;
  transform: translateY(-2px);
}
.rock-apply .formError {
  color: #b22234 !important;
  font-size: 0.86em;
  margin: 0.4em 0;
}
.rock-apply table.form { width: 100%; margin: 0; }
.rock-apply table.form td { padding: 0.25em 0.4em; }

/* ============ DOCS / LAYOUT GUIDE ============ */
/* Wider, sans-serif reference page style — not a paper card.
   For component documentation, code samples + rendered previews. */
.rock-docs {
  max-width: 960px;
  margin: 1.6em auto 2em;
  padding: 2em 2.4em 1.8em;
  background: #faf8ef !important;
  color: #1a1a1a !important;
  border: 1px solid #d9d4c5;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  font-family: "Helvetica Neue", "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.rock-docs, .rock-docs p, .rock-docs li, .rock-docs span:not([class]),
.rock-docs strong, .rock-docs > div { color: #1a1a1a !important; }
.rock-docs p { margin: 0 0 0.85em; text-indent: 0 !important; line-height: 1.75; font-size: 15px !important; }
.rock-docs a { color: #6b4d00 !important; text-decoration: underline; }
.rock-docs a:hover { color: #0e0e10 !important; }
.rock-docs ul, .rock-docs ol { margin: 0 0 1em 1.4em; padding: 0; }
.rock-docs ul li { margin: 0.18em 0; font-size: 15px; }
.rock-docs strong { font-weight: 700; }
.rock-docs tt {
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  background: #ecdfca;
  padding: 0.05em 0.4em;
  border-radius: 2px;
  font-size: 0.92em;
}

.rock-docs-title {
  margin: 0 0 1em;
  padding-bottom: 0.7em;
  border-bottom: 3px solid #0e0e10;
  font-family: "Helvetica Neue", "Arial Black", sans-serif !important;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #0e0e10 !important;
}
.rock-docs-title p { margin: 0 !important; line-height: 1.15; }
.rock-docs-title-en {
  display: block;
  margin-top: 0.35em;
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: #8a877e !important;
}

.rock-docs-intro {
  margin: 0 0 1.6em;
  padding: 1em 1.2em;
  background: #ecdfca;
  border-left: 4px solid #0e0e10;
  font-size: 14.5px;
  line-height: 1.7;
}
.rock-docs-intro p { margin: 0 0 0.55em; font-size: 14.5px !important; }
.rock-docs-intro p:last-child { margin-bottom: 0; }

.rock-docs-h {
  margin: 1.8em 0 0.7em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #d9d4c5;
  font-family: "Helvetica Neue", "PingFang SC", "Source Han Sans SC", sans-serif !important;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0e0e10 !important;
  line-height: 1.3;
}
.rock-docs-h p { margin: 0 !important; line-height: 1.3; }
.rock-docs-h-en {
  display: block;
  margin-top: 0.2em;
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: #8a877e !important;
}

/* Component card: title bar (class name) + desc + preview + code */
.rock-docs-card {
  margin: 1em 0 1.6em;
  border: 1px solid #d9d4c5;
  background: #fff;
}
.rock-docs-card-title {
  padding: 0.5em 1em 0.55em;
  background: #0e0e10 !important;
  color: #f2f0ea !important;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.rock-docs-card-title,
.rock-docs-card-title p,
.rock-docs-card-title * { color: #f2f0ea !important; }
.rock-docs-card-title p {
  margin: 0 !important;
  text-indent: 0 !important;
  background: transparent !important;
  line-height: inherit !important;
}
.rock-docs-card-desc {
  padding: 0.85em 1.1em 0.4em;
  font-size: 13.5px;
  line-height: 1.65;
  color: #4a4a4a !important;
  border-bottom: 1px solid #ebe5d4;
}
.rock-docs-card-desc p { margin: 0 0 0.45em; color: #4a4a4a !important; font-size: 13.5px !important; }
.rock-docs-card-desc p:last-child { margin-bottom: 0.3em; }

.rock-docs-preview {
  padding: 1.4em 1.4em 1.5em;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #ebe5d4;
  overflow: hidden;  /* contain floated children (e.g. .rock-article-image) within the card */
}
.rock-docs-preview::before {
  content: "PREVIEW";
  position: absolute;
  top: 0.5em; right: 0.85em;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #c8c0a8;
  pointer-events: none;
}

/* Wikidot's [[code]] block inside docs cards */
.rock-docs-card .code {
  margin: 0 !important;
  background: #f6f1e2 !important;
  font-size: 12px;
}
.rock-docs-card .code .hl-main,
.rock-docs-card .code pre {
  padding: 0.95em 1em !important;
  margin: 0 !important;
  background: transparent !important;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: #2a2a2a !important;
  overflow-x: auto;
}
.rock-docs-card .code pre,
.rock-docs-card .code pre * { color: #2a2a2a !important; }
.rock-docs-card-code-label {
  padding: 0.35em 1em 0.4em;
  background: #ebe5d4;
  color: #6b4d00 !important;
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
}

/* Callout for parser gotchas / warnings */
.rock-docs-callout {
  margin: 1.2em 0;
  padding: 1em 1.2em 0.7em;
  background: #fdf2cd;
  border-left: 4px solid #c9a227;
}
.rock-docs-callout-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 0.55em;
  color: #6b4d00 !important;
}
.rock-docs-callout p { color: #4a4a4a !important; margin: 0 0 0.5em; font-size: 13.5px !important; }
.rock-docs-callout ul { margin: 0 0 0.4em 1.2em; }
.rock-docs-callout ul li { color: #4a4a4a !important; margin: 0.25em 0; font-size: 13.5px; line-height: 1.65; }

/* Wikidot [[collapsible]] cosmetic refresh inside docs */
.rock-docs .collapsible-block { margin: 0.4em 0 0; }
.rock-docs .collapsible-block-folded,
.rock-docs .collapsible-block-unfolded { padding: 0; }
.rock-docs .collapsible-block-link {
  display: inline-block;
  padding: 0.4em 0.95em;
  background: #faf8ef;
  color: #6b4d00 !important;
  border: 1px solid #c9a227;
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none !important;
}
.rock-docs .collapsible-block-link:hover { background: #ecdfca; }

/* Form mockup (since real Wikidot inputs only render on form-category pages) */
.rock-docs-form-mock {
  max-width: 460px;
  padding: 1.4em 1.6em 1.5em;
  background: #fff !important;
  border: 1px solid #c9c4b5;
  border-left: 4px solid #1a1a1a;
  color: #1a1a1a !important;
}
.rock-docs-form-mock p {
  margin: 0 !important;
  text-indent: 0 !important;
  line-height: 1.45 !important;
  background: transparent !important;
}
.rock-docs-form-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1a1a1a !important;
  margin-bottom: 0.3em;
}
.rock-docs-form-label, .rock-docs-form-label p { color: #1a1a1a !important; }
.rock-docs-form-input,
.rock-docs-form-textarea {
  padding: 0.6em 0.85em;
  border: 1px solid #c9c4b5;
  background: #f8f6ee !important;
  color: #8a877e !important;
  font-family: inherit;
  font-size: 13.5px;
  margin-bottom: 0.9em;
}
.rock-docs-form-input p,
.rock-docs-form-textarea p { color: #8a877e !important; }
.rock-docs-form-textarea { min-height: 76px; }
.rock-docs-form-submit {
  display: inline-block;
  padding: 0.6em 2em 0.65em;
  background: #0e0e10 !important;
  color: #f2f0ea !important;
  border: 2px solid #0e0e10;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.2;
  margin: 0;
}
.rock-docs-form-submit,
.rock-docs-form-submit p,
.rock-docs-form-submit * { color: #f2f0ea !important; }
.rock-docs-form-submit p {
  margin: 0 !important;
  padding: 0 !important;
  text-indent: inherit !important;
  line-height: inherit !important;
  background: transparent !important;
}

/* Inline swatch grid for ACS tag color reference.
   Wikidot wraps consecutive [[span]] lines in one <p> separated by <br />,
   which defeats CSS grid/flex on the container. Strategy:
   - hide the <br /> tags (no forced newlines)
   - use display:contents on the <p> so spans become direct flex children
   - flex-wrap on the container packs them as tight as the line allows */
.rock-docs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.5em;
  margin: 0.5em 0 1em;
  align-items: center;
}
.rock-docs-swatches br { display: none; }
.rock-docs-swatches p {
  display: contents;
  margin: 0 !important;
}
.rock-docs-swatches .rock-acs-tag { margin: 0; }

@media (max-width: 760px) {
  .rock-docs { padding: 1.5em 1.2em 1.2em; max-width: 100%; }
  .rock-docs-title { font-size: 22px; }
  .rock-docs-h { font-size: 16px; }
  .rock-docs-card .code .hl-main,
  .rock-docs-card .code pre { font-size: 11px !important; }
}

/* ============ SCP ARTICLE ============ */
/* Paper card on top of the amethyst dark backdrop.
   All sizes px to avoid the site theme em cascade.
   Wikidot wraps every block in <p> with 1em default margins —
   zero those globally then apply our own spacing per container. */
.rock-article {
  max-width: 760px;
  margin: 1.6em auto 2em;
  padding: 2.4em 2.6em 2em;
  background: #faf8ef !important;
  color: #1a1a1a !important;
  border: 1px solid #d9d4c5;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", "PingFang SC", "Microsoft YaHei", serif !important;
  font-size: 15.5px !important;
  line-height: 1.85;
  letter-spacing: 0.01em;
}
.rock-article,
.rock-article p,
.rock-article span,
.rock-article strong,
.rock-article em,
.rock-article li,
.rock-article div { color: #1a1a1a !important; }
.rock-article a { color: #6b4d00 !important; text-decoration: underline; }
.rock-article a:hover { color: #0e0e10 !important; }

/* Default paragraph: tight margin + Chinese indent on top-level paragraphs only */
.rock-article p { margin: 0 0 0.85em; line-height: 1.85; font-size: 15.5px !important; }
.rock-article > p,
.rock-article > .rock-article-body > p { text-indent: 2em; text-align: justify; }
.rock-article ul,
.rock-article ol { margin: 0 0 0.95em 1.6em; padding: 0; line-height: 1.85; }
.rock-article ul li,
.rock-article ol li { margin: 0.1em 0; font-size: 15.5px; }
.rock-article hr { border: none; border-top: 1px solid #d9d4c5; margin: 1.2em 0; }

/* HEADER: stack ID over class chip */
.rock-article-header {
  padding-bottom: 0.9em;
  margin: 0 0 1.3em;
  border-bottom: 3px solid #0e0e10;
}
.rock-article-header p { margin: 0 !important; text-indent: 0 !important; line-height: 1.15; }
.rock-article-id {
  display: block;
  font-family: "Helvetica Neue", "Arial Black", sans-serif !important;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 0.45em;
}
.rock-article-class {
  display: inline-block;
  padding: 0.32em 0.85em 0.36em;
  font-family: "PingFang SC", "Source Han Sans SC", sans-serif !important;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  border: 2px solid;
}
.scp-class-safe       { background: #2e7d32 !important; color: #fff !important; border-color: #2e7d32; }
.scp-class-safe *     { color: #fff !important; }
.scp-class-euclid     { background: #c9a227 !important; color: #0e0e10 !important; border-color: #c9a227; }
.scp-class-euclid *   { color: #0e0e10 !important; }
.scp-class-keter      { background: #b22234 !important; color: #fff !important; border-color: #b22234; }
.scp-class-keter *    { color: #fff !important; }
.scp-class-thaumiel   { background: #0e0e10 !important; color: #c9a227 !important; border-color: #c9a227; }
.scp-class-thaumiel * { color: #c9a227 !important; }
.scp-class-neutralized{ background: #6b6e7a !important; color: #fff !important; border-color: #6b6e7a; }
.scp-class-neutralized * { color: #fff !important; }
.scp-class-pending    { background: #f4f1ea !important; color: #1a1a1a !important; border-color: #1a1a1a; }

/* IMAGE: floating card, no <p> margin leakage */
.rock-article-image {
  float: right;
  width: 260px;
  margin: 0.1em 0 1em 1.4em;
  border: 1px solid #d9d4c5;
  background: #fff !important;
}
.rock-article-image p { margin: 0 !important; text-indent: 0 !important; line-height: 1.5; }
/* Wikidot's [[image]] macro outputs <img class="image">; constrain it to the
   container width so the real image fits the 260px frame. */
.rock-article-image img,
.rock-article-image .image {
  display: block;
  width: 100%;
  height: auto;
}
.rock-article-image-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  background: repeating-linear-gradient(45deg, #ecdfca 0 12px, #f4f1ea 12px 24px) !important;
  border-bottom: 1px solid #d9d4c5;
  text-align: center;
  padding: 0.9em;
  box-sizing: border-box;
}
.rock-article-image-placeholder::before {
  content: ""; position: absolute; inset: 0.7em;
  border: 1px dashed #8a877e; pointer-events: none;
}
.rock-article-image-icon {
  font-family: "Helvetica Neue", "Arial Black", sans-serif !important;
  font-size: 34px; font-weight: 900;
  color: #6b6e7a !important;
  line-height: 1; z-index: 1;
}
.rock-article-image-text {
  font-family: "PingFang SC", "Source Han Sans SC", sans-serif !important;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.12em;
  color: #4a4a4a !important;
  z-index: 1;
}
.rock-article-image-meta {
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.22em; text-indent: 0.22em;
  text-transform: uppercase;
  color: #8a877e !important;
  z-index: 1;
}
.rock-article-image-caption {
  padding: 0.55em 0.8em 0.6em;
  font-family: "PingFang SC", "Source Han Sans SC", sans-serif !important;
  font-size: 11.5px;
  line-height: 1.45;
  color: #4a4a4a !important;
  background: #fff !important;
}

/* HERO: edge-to-edge banner image with 9-grid title placement.
   Set background-image via inline style on the container; title cell is
   controlled by .pos-{tl,tc,tr,ml,mc,mr,bl,bc,br}. Default center / white.
   Negative margins break out of .rock-article horizontal padding (2.6em). */
.rock-article-hero {
  position: relative;
  margin: -2.4em -2.6em 1.5em;
  background: #0e0e10 no-repeat center / cover;
  aspect-ratio: 21 / 9;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  overflow: hidden;
}
.rock-article-hero p { margin: 0 !important; text-indent: 0 !important; }
.rock-article-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Embedded [[image]] fallback when inline background-image is unavailable. */
.rock-article-hero > .rock-article-hero-img,
.rock-article-hero > .rock-article-hero-img p,
.rock-article-hero > .rock-article-hero-img img,
.rock-article-hero > .rock-article-hero-img .image {
  position: absolute; inset: 0;
  margin: 0 !important; padding: 0 !important;
  z-index: 0;
}
.rock-article-hero > .rock-article-hero-img img,
.rock-article-hero > .rock-article-hero-img .image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Specificity bumped to .rock-article-hero .rock-article-hero-title (0,0,2,0)
   so it beats .rock-article div { color: #1a1a1a !important } (0,0,1,1) inside an article. */
.rock-article-hero .rock-article-hero-title {
  position: relative;
  z-index: 1;
  padding: 0.6em 1em;
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif !important;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.05;
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  grid-row: 2; grid-column: 2;
  align-self: center; justify-self: center;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
  /* CJK strings have line-break opportunities between every character; without nowrap,
     a 2-char title in a 1fr cell collapses to one char per line (renders vertical). */
  white-space: nowrap;
}
.rock-article-hero .rock-article-hero-title p {
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  margin: 0 !important;
  /* nowrap doesn't reliably inherit through `.rock-article p` cascade in practice —
     force it on <p> too so 3+ char titles stay on one line. */
  white-space: nowrap !important;
}

/* 9-grid title placement modifiers */
.rock-article-hero.pos-tl .rock-article-hero-title { grid-row: 1; grid-column: 1; justify-self: start;  align-self: start;  text-align: left;   }
.rock-article-hero.pos-tc .rock-article-hero-title { grid-row: 1; grid-column: 2; justify-self: center; align-self: start;  text-align: center; }
.rock-article-hero.pos-tr .rock-article-hero-title { grid-row: 1; grid-column: 3; justify-self: end;    align-self: start;  text-align: right;  }
.rock-article-hero.pos-ml .rock-article-hero-title { grid-row: 2; grid-column: 1; justify-self: start;  align-self: center; text-align: left;   }
.rock-article-hero.pos-mc .rock-article-hero-title { grid-row: 2; grid-column: 2; justify-self: center; align-self: center; text-align: center; }
.rock-article-hero.pos-mr .rock-article-hero-title { grid-row: 2; grid-column: 3; justify-self: end;    align-self: center; text-align: right;  }
.rock-article-hero.pos-bl .rock-article-hero-title { grid-row: 3; grid-column: 1; justify-self: start;  align-self: end;    text-align: left;   }
.rock-article-hero.pos-bc .rock-article-hero-title { grid-row: 3; grid-column: 2; justify-self: center; align-self: end;    text-align: center; }
.rock-article-hero.pos-br .rock-article-hero-title { grid-row: 3; grid-column: 3; justify-self: end;    align-self: end;    text-align: right;  }

/* Dark text variant for light/bright photos */
.rock-article-hero.dark .rock-article-hero-title {
  color: #0e0e10 !important;
  text-shadow: 0 2px 14px rgba(255,255,255,0.45);
}

/* Vertical text variant — opt-in via .vert on the hero container.
   Earlier writing-mode + text-orientation approach rendered as sideways-rotated
   glyphs in this browser environment (chars in a single column, but glyphs
   tilted 90° so the column read visually as reversed horizontal text).
   This approach instead caps the title box to 1em wide and breaks the text on
   any character — every CJK glyph (= 1em wide) gets its own line, naturally
   stacking top-to-bottom in standard horizontal flow. No writing-mode tricks. */
.rock-article-hero.vert .rock-article-hero-title {
  writing-mode: horizontal-tb !important;
  width: 1em !important;
  max-width: 1em !important;
  word-break: break-all !important;
  line-break: anywhere !important;
  white-space: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  padding: 0.3em 0.15em !important;
  /* Inset from hero edges so the 1em column doesn't kiss the boundary when
     paired with .pos-mr / .pos-ml / .pos-tr etc. Margin on a grid item stays
     inside its cell, so pos-mc still appears centered. */
  margin: 0.6em 0.8em !important;
  text-align: center !important;
}
.rock-article-hero.vert .rock-article-hero-title p {
  writing-mode: horizontal-tb !important;
  width: 100% !important;
  word-break: break-all !important;
  line-break: anywhere !important;
  white-space: normal !important;
  text-align: center !important;
  display: block !important;
}

@media (max-width: 760px) {
  .rock-article-hero { margin: -1.6em -1.3em 1.2em; aspect-ratio: 16 / 9; }
  .rock-article-hero .rock-article-hero-title { font-size: 42px; padding: 0.45em 0.7em; }
}

/* META PANEL */
.rock-article-meta {
  margin: 0 0 1.2em;
  padding: 0.85em 1.1em 0.9em;
  background: #ecdfca !important;
  border-left: 4px solid #0e0e10;
  font-family: "PingFang SC", "Source Han Sans SC", sans-serif !important;
}
.rock-article-meta p { margin: 0 !important; text-indent: 0 !important; line-height: 1.7; }
.rock-article-meta-row { font-size: 14px; line-height: 1.7; }
.rock-article-meta-label {
  display: inline-block;
  min-width: 7em;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: 14px;
  color: #0e0e10 !important;
}

/* SECTION HEADING: Chinese on top, EN subhead always on next line */
.rock-article-h {
  font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 1.5em 0 0.6em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid #d9d4c5;
  color: #0e0e10 !important;
  line-height: 1.3;
}
.rock-article-h p { margin: 0 !important; text-indent: 0 !important; line-height: 1.3; }
.rock-article-h-en {
  display: block;
  margin-top: 0.25em;
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: #8a877e !important;
}

/* QUOTE */
.rock-article-quote {
  font-family: "Source Han Serif SC", "Noto Serif SC", serif !important;
  font-style: italic;
  padding: 0.8em 1.1em 0.85em;
  margin: 0.8em 0 1em;
  border-left: 3px solid #c9a227;
  background: #f1ead3 !important;
}
.rock-article-quote p { margin: 0 0 0.6em !important; text-indent: 2em !important; line-height: 1.75; }
.rock-article-quote p:last-child { margin-bottom: 0 !important; }
.rock-article-quote .cite {
  display: block;
  margin-top: 0.55em;
  font-style: normal;
  font-family: "PingFang SC", sans-serif !important;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #6b6e7a !important;
  text-indent: 0 !important;
}

/* FOOTER */
.rock-article-footer {
  margin-top: 1.8em;
  padding-top: 0.9em;
  border-top: 1px solid #d9d4c5;
  font-family: "PingFang SC", "Source Han Sans SC", sans-serif !important;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: #6b6e7a !important;
  text-align: center;
}
.rock-article-footer p { margin: 0 !important; text-indent: 0 !important; color: #6b6e7a !important; line-height: 1.5; }

@media (max-width: 760px) {
  .rock-article { padding: 1.6em 1.3em 1.4em; }
  .rock-article-image { float: none; width: 100%; margin: 0 0 1.2em 0; }
  .rock-article-id { font-size: 24px; }
}

/* ============ ACS HEADER (Anomaly Classification System) ============ */
/* SCP-XXXX as a big header, with classification tags on a single row beneath. */
.rock-acs-header {
  margin: 0 0 1.5em;
  padding-bottom: 0.9em;
  border-bottom: 3px solid #0e0e10;
}
.rock-acs-header p { margin: 0 !important; text-indent: 0 !important; line-height: 1.15; }
/* ID is the big header by default (when no .rock-acs-name is provided).
   When .rock-acs-name is also present, the ID demotes to a small caps-label
   ABOVE the name, and the name takes the big-header position. */
.rock-acs-id {
  display: block;
  font-family: "Helvetica Neue", "Arial Black", sans-serif !important;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0.015em;
  line-height: 1.05;
  color: #0e0e10 !important;
  margin: 0 0 0.55em;
}
.rock-acs-name {
  display: block;
  font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #0e0e10 !important;
  margin: 0 0 0.55em;
}
/* CRITICAL: Wikidot wraps the inner text in <p>, and .rock-article p has
   font-size: 15.5px !important; — that rule out-specifies the parent div's
   font-size declaration on plain inheritance. Force <p> to inherit the
   div's font-size so the ID/name show at the configured sizes. */
.rock-acs-id p,
.rock-acs-name p {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
  text-indent: inherit !important;
  text-transform: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: 0 !important;
}
/* When both ID and name exist, swap roles: ID becomes a small caps-label, name becomes the big header */
.rock-acs-header:has(.rock-acs-name) .rock-acs-id {
  font-family: "Helvetica Neue", "PingFang SC", sans-serif !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: #8a877e !important;
  margin: 0 0 0.3em;
  line-height: 1.2;
}
.rock-acs-header:has(.rock-acs-name) .rock-acs-name {
  font-family: "Helvetica Neue", "PingFang SC", "Arial Black", sans-serif !important;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 0.55em;
}
.rock-acs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em 0.55em;
  align-items: center;
  line-height: 1.6;
}
.rock-acs-tag {
  display: inline-block;
  padding: 0.32em 0.85em 0.4em;
  font-family: "Helvetica Neue", "PingFang SC", "Source Han Sans SC", sans-serif !important;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 2px solid;
  white-space: nowrap;
}

/* Clearance tag: gold outline on cream */
.rock-acs-tag.rock-acs-clearance,
.rock-acs-tag.rock-acs-clearance.lvl1,
.rock-acs-tag.rock-acs-clearance.lvl2,
.rock-acs-tag.rock-acs-clearance.lvl3,
.rock-acs-tag.rock-acs-clearance.lvl4,
.rock-acs-tag.rock-acs-clearance.lvl5 {
  background: #faf8ef;
  color: #6b4d00 !important;
  border-color: #c9a227;
}

/* Containment Class */
.rock-acs-tag.rock-acs-safe       { background: #2e7d32; color: #fff !important; border-color: #2e7d32; }
.rock-acs-tag.rock-acs-euclid     { background: #c9a227; color: #0e0e10 !important; border-color: #c9a227; }
.rock-acs-tag.rock-acs-keter      { background: #b22234; color: #fff !important; border-color: #b22234; }
.rock-acs-tag.rock-acs-thaumiel   { background: #0e0e10; color: #c9a227 !important; border-color: #c9a227; }
.rock-acs-tag.rock-acs-apollyon   { background: #0e0e10; color: #b22234 !important; border-color: #b22234; }
.rock-acs-tag.rock-acs-archon     { background: #7b3f9d; color: #fff !important; border-color: #7b3f9d; }
.rock-acs-tag.rock-acs-neutralized{ background: #6b6e7a; color: #fff !important; border-color: #6b6e7a; }
.rock-acs-tag.rock-acs-pending    { background: #faf8ef; color: #1a1a1a !important; border-color: #1a1a1a; }

/* Disruption Class */
.rock-acs-tag.rock-acs-dark    { background: #1a1a1a; color: #fff !important; border-color: #1a1a1a; }
.rock-acs-tag.rock-acs-vlam    { background: #4d8ec1; color: #fff !important; border-color: #4d8ec1; }
.rock-acs-tag.rock-acs-keneq   { background: #e2862c; color: #fff !important; border-color: #e2862c; }
.rock-acs-tag.rock-acs-ekhi    { background: #c92424; color: #fff !important; border-color: #c92424; }
.rock-acs-tag.rock-acs-amida   { background: #7b3f9d; color: #fff !important; border-color: #7b3f9d; }

/* Risk Class */
.rock-acs-tag.rock-acs-notice  { background: #4d8ec1; color: #fff !important; border-color: #4d8ec1; }
.rock-acs-tag.rock-acs-caution { background: #d4a017; color: #0e0e10 !important; border-color: #d4a017; }
.rock-acs-tag.rock-acs-warning { background: #e2862c; color: #fff !important; border-color: #e2862c; }
.rock-acs-tag.rock-acs-danger  { background: #c92424; color: #fff !important; border-color: #c92424; }
.rock-acs-tag.rock-acs-critical{ background: #7b3f9d; color: #fff !important; border-color: #7b3f9d; }

@media (max-width: 760px) {
  .rock-acs-id { font-size: 32px; }
  .rock-acs-name { font-size: 22px; }
  .rock-acs-header:has(.rock-acs-name) .rock-acs-id { font-size: 12px; }
  .rock-acs-header:has(.rock-acs-name) .rock-acs-name { font-size: 26px; }
  .rock-acs-tag { font-size: 10.5px; padding: 0.28em 0.65em 0.32em; letter-spacing: 0.16em; text-indent: 0.16em; }
}

/* ============ ACS PANEL (procedural classification card) ============ */
/* Floats right where the image used to live. Procedurally rendered from
   class names — the same .rock-acs-euclid / -vlam / -warning classes used
   on the tag chips drive the row stripe color here. */
.rock-acs-panel {
  float: right;
  width: 130px;
  margin: 0.1em 0 1.2em 1.4em;
  font-family: "Helvetica Neue", "PingFang SC", "Source Han Sans SC", sans-serif !important;
  text-align: center;
}
.rock-acs-panel p { margin: 0 !important; text-indent: 0 !important; line-height: 1.25; }

/* ACS danger-diamond icon — matches the SCP wiki official component.
   Outer octagon, 4 pentagon-clip-path quadrants rotated to cardinal
   directions, and 4 image icons drawn from the official SVG set on
   scp-wiki.wdfiles.com. Quadrant/icon directions follow the official
   convention: top = Containment, right = Risk, left = Disruption,
   bottom = Esoteric (usually unused). */
.rock-acs-diamond {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0.2em auto 0.4em;
  flex-shrink: 0;
}
.rock-acs-diamond > div { color: transparent; font-size: 0; line-height: 0; }

.rock-acs-octagon {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #0e0e10;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  z-index: 0;
}
.rock-acs-octagon::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #fff;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.rock-acs-quadrants {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.rock-acs-quadrants > div {
  width: 67.5%;
  padding-bottom: 50%;
  position: absolute;
  top: 0;
  left: 16.25%;
  background-color: #fff;
  clip-path: polygon(22% 0, 77% 0, 100% 31%, 50% 100%, 0 31%);
  transform-origin: bottom center;
}
.rock-acs-quadrants > .rock-acs-quad-top    { /* identity */ }
.rock-acs-quadrants > .rock-acs-quad-right  { transform: rotate(90deg); }
.rock-acs-quadrants > .rock-acs-quad-bottom { transform: rotate(180deg); }
.rock-acs-quadrants > .rock-acs-quad-left   { transform: rotate(270deg); }

/* Containment colors (TOP quadrant) */
.rock-acs-quadrants > .rock-acs-quad-top.rock-acs-safe      { background-color: rgba(0,159,107,0.7); }
.rock-acs-quadrants > .rock-acs-quad-top.rock-acs-euclid    { background-color: rgba(255,211,0,0.85); }
.rock-acs-quadrants > .rock-acs-quad-top.rock-acs-keter     { background-color: rgba(255,109,0,0.85); }
.rock-acs-quadrants > .rock-acs-quad-top.rock-acs-thaumiel  { background-color: rgba(96,96,128,0.7); }
.rock-acs-quadrants > .rock-acs-quad-top.rock-acs-apollyon  { background-color: rgba(196,2,51,0.85); }
.rock-acs-quadrants > .rock-acs-quad-top.rock-acs-archon    { background-color: rgba(133,49,193,0.7); }
.rock-acs-quadrants > .rock-acs-quad-top.rock-acs-neutralized { background-color: rgba(120,120,128,0.6); }
.rock-acs-quadrants > .rock-acs-quad-top.rock-acs-pending   { background-color: rgba(12,12,12,0.25); }

/* Risk colors (RIGHT quadrant) */
.rock-acs-quadrants > .rock-acs-quad-right.rock-acs-notice   { background-color: rgba(0,159,107,0.7); }
.rock-acs-quadrants > .rock-acs-quad-right.rock-acs-caution  { background-color: rgba(0,135,189,0.7); }
.rock-acs-quadrants > .rock-acs-quad-right.rock-acs-warning  { background-color: rgba(255,211,0,0.85); }
.rock-acs-quadrants > .rock-acs-quad-right.rock-acs-danger   { background-color: rgba(255,109,0,0.85); }
.rock-acs-quadrants > .rock-acs-quad-right.rock-acs-critical { background-color: rgba(196,2,51,0.85); }

/* Disruption colors (LEFT quadrant) */
.rock-acs-quadrants > .rock-acs-quad-left.rock-acs-dark   { background-color: rgba(0,159,107,0.7); }
.rock-acs-quadrants > .rock-acs-quad-left.rock-acs-vlam   { background-color: rgba(0,135,189,0.7); }
.rock-acs-quadrants > .rock-acs-quad-left.rock-acs-keneq  { background-color: rgba(255,211,0,0.85); }
.rock-acs-quadrants > .rock-acs-quad-left.rock-acs-ekhi   { background-color: rgba(255,109,0,0.85); }
.rock-acs-quadrants > .rock-acs-quad-left.rock-acs-amida  { background-color: rgba(196,2,51,0.85); }

/* Bottom quadrant — esoteric/secondary (rarely used) */
.rock-acs-quadrants > .rock-acs-quad-bottom { background-color: transparent; }
.rock-acs-quadrants > .rock-acs-quad-bottom.rock-acs-empty { background-color: transparent; }

/* Icons (images from scp-wiki's official ACS bar SVG set).
   Each icon is a circular badge (white background, black ring) with the
   class SVG centered inside — matches the official danger-diamond layout. */
.rock-acs-icon {
  position: absolute;
  width: 33%;
  height: 33%;
  z-index: 4;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #0c0c0c;
  background-color: #fff;
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
}
.rock-acs-icon-top    { top: 3px;     left: 33.5%; }
.rock-acs-icon-right  { right: 3px;   top: 33.5%; }
.rock-acs-icon-bottom { bottom: 3px;  left: 33.5%; }
.rock-acs-icon-left   { left: 3px;    top: 33.5%; }

/* SVG lookup by class name (matches the SCP wiki file names) */
.rock-acs-icon-img-safe        { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/safe-icon.svg"); }
.rock-acs-icon-img-euclid      { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/euclid-icon.svg"); }
.rock-acs-icon-img-keter       { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keter-icon.svg"); }
.rock-acs-icon-img-thaumiel    { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg"); }
.rock-acs-icon-img-apollyon    { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/apollyon-icon.svg"); }
.rock-acs-icon-img-archon      { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/archon-icon.svg"); }
.rock-acs-icon-img-neutralized { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/neutralized-icon.svg"); }
.rock-acs-icon-img-pending     { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/pending-icon.svg"); }
.rock-acs-icon-img-explained   { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/explained-icon.svg"); }
.rock-acs-icon-img-esoteric    { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/esoteric-icon.svg"); }
.rock-acs-icon-img-dark        { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/dark-icon.svg"); }
.rock-acs-icon-img-vlam        { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/vlam-icon.svg"); }
.rock-acs-icon-img-keneq       { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keneq-icon.svg"); }
.rock-acs-icon-img-ekhi        { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/ekhi-icon.svg"); }
.rock-acs-icon-img-amida       { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/amida-icon.svg"); }
.rock-acs-icon-img-notice      { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/notice-icon.svg"); }
.rock-acs-icon-img-caution     { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/caution-icon.svg"); }
.rock-acs-icon-img-warning     { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/warning-icon.svg"); }
.rock-acs-icon-img-danger      { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/danger-icon.svg"); }
.rock-acs-icon-img-critical    { background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/critical-icon.svg"); }

.rock-acs-panel-title {
  padding: 0.7em 0.9em 0.55em;
  text-align: center;
  border-bottom: 1px solid #d9d4c5;
  background: #faf8ef;
}
.rock-acs-panel-title-en {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: #8a877e !important;
  text-transform: uppercase;
}
.rock-acs-panel-title-cn {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #0e0e10 !important;
  margin-top: 0.25em;
}

.rock-acs-panel-row {
  padding: 0.7em 0.9em 0.75em;
  border-bottom: 1px solid #ebe5d4;
  border-left: 5px solid transparent;
  background: #fff;
}
.rock-acs-panel-row:last-child { border-bottom: none; }
.rock-acs-panel-row-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: #8a877e !important;
  margin-bottom: 0.3em;
}
.rock-acs-panel-row-value {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #0e0e10 !important;
  line-height: 1.15;
}
.rock-acs-panel-row-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #6b6e7a !important;
  margin-top: 0.18em;
  font-family: "PingFang SC", "Source Han Sans SC", sans-serif !important;
}

/* Procedural row-stripe color: each row picks up the color from its
   modifier class (same names as the tag chips). */
.rock-acs-panel-row.rock-acs-safe       { border-left-color: #2e7d32; }
.rock-acs-panel-row.rock-acs-euclid     { border-left-color: #c9a227; }
.rock-acs-panel-row.rock-acs-keter      { border-left-color: #b22234; }
.rock-acs-panel-row.rock-acs-thaumiel   { border-left-color: #c9a227; background: linear-gradient(to right, rgba(14,14,16,0.04), #fff 30%); }
.rock-acs-panel-row.rock-acs-apollyon   { border-left-color: #b22234; background: linear-gradient(to right, rgba(14,14,16,0.04), #fff 30%); }
.rock-acs-panel-row.rock-acs-archon     { border-left-color: #7b3f9d; }
.rock-acs-panel-row.rock-acs-neutralized{ border-left-color: #6b6e7a; }
.rock-acs-panel-row.rock-acs-pending    { border-left-color: #1a1a1a; }

.rock-acs-panel-row.rock-acs-dark    { border-left-color: #1a1a1a; }
.rock-acs-panel-row.rock-acs-vlam    { border-left-color: #4d8ec1; }
.rock-acs-panel-row.rock-acs-keneq   { border-left-color: #e2862c; }
.rock-acs-panel-row.rock-acs-ekhi    { border-left-color: #c92424; }
.rock-acs-panel-row.rock-acs-amida   { border-left-color: #7b3f9d; }

.rock-acs-panel-row.rock-acs-notice  { border-left-color: #4d8ec1; }
.rock-acs-panel-row.rock-acs-caution { border-left-color: #d4a017; }
.rock-acs-panel-row.rock-acs-warning { border-left-color: #e2862c; }
.rock-acs-panel-row.rock-acs-danger  { border-left-color: #c92424; }
.rock-acs-panel-row.rock-acs-critical{ border-left-color: #7b3f9d; }

.rock-acs-panel-row.rock-acs-clearance { border-left-color: #c9a227; }
.rock-acs-panel-row.rock-acs-clearance .rock-acs-clearance-bar { margin-top: 0.5em; }

/* Mobile: panel becomes full width, sits between header and body */
@media (max-width: 760px) {
  .rock-acs-panel { float: none; width: 100%; margin: 0 0 1.2em 0; }
}

/* ============ SCP CATALOG LIST ============ */
/* Grid for the /scp:scp index page. Active items render as clickable
   gold-bar cards. Redacted items use the .redacted modifier: a
   classified-file dossier where the codename is the one piece of
   information left disclosed. */
.rock-scp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1em;
  margin: 1.4em 0 0.4em;
}
.rock-scp-card {
  position: relative;
  display: block;
  padding: 1.1em 1.2em 1.05em;
  background: #f6f3ec;
  border: 1px solid #d9d4c5;
  border-left: 4px solid #c9a227;
  color: #1a1a1a !important;
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  overflow: hidden;
}
.rock-scp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14,14,16,0.12);
  border-left-color: #0e0e10;
}
.rock-scp-card p {
  margin: 0 !important;
  text-indent: 0 !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.rock-scp-card .rock-scp-id {
  display: block;
  font-family: "Helvetica Neue", "Arial Black", sans-serif;
  font-size: 0.76em;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #6f6855 !important;
  margin-bottom: 0.45em;
}
.rock-scp-card .rock-scp-name {
  display: block;
  font-size: 1.18em;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #0e0e10 !important;
}
/* Codename link covers whole card via stretched-link pattern. */
.rock-scp-card .rock-scp-name a,
.rock-scp-card .rock-scp-name a:visited {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.rock-scp-card .rock-scp-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* === REDACTED variant: dark classified-dossier card. ===
   The card itself is black-themed (the file is sealed), but it sits on
   the page's normal light background — the contrast between the dark
   card and the surrounding white page reads as "redacted document on
   a desk" rather than turning the page dark. */
.rock-scp-card.redacted {
  background:
    repeating-linear-gradient(135deg,
      #161618 0,
      #161618 14px,
      #1c1c1f 14px,
      #1c1c1f 28px);
  border: 1px solid #000;
  border-left: 4px solid #b22222;
  color: #d4cebc !important;
  cursor: default;
}
.rock-scp-card.redacted:hover {
  transform: none;
  box-shadow: none;
  border-left-color: #b22222;
}
.rock-scp-card.redacted .rock-scp-id {
  color: #8a8474 !important;
}
.rock-scp-card.redacted .rock-scp-id-mask {
  display: inline-block;
  background: #0a0a0a;
  color: #0a0a0a !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  padding: 0 0.25em;
  margin: 0 0.06em;
  user-select: none;
}
/* The leaked codename: highlighter strip over the dossier. */
.rock-scp-card.redacted .rock-scp-name {
  display: inline-block;
  position: relative;
  padding: 0.06em 0.45em;
  background: #f2efe7;
  color: #0e0e10 !important;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.rock-scp-card.redacted .rock-scp-stamp {
  position: absolute;
  top: 0.7em;
  right: 0.7em;
  font-family: "Helvetica Neue", "Arial Black", sans-serif;
  font-size: 0.62em;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #b22222 !important;
  border: 1.5px solid #b22222;
  padding: 0.18em 0.5em 0.22em;
  background: rgba(255,255,255,0.04);
  transform: rotate(-3deg);
  z-index: 2;
}

/* === Catalog introduction (above the list) === */
.rock-scp-intro {
  margin: 0.6em 0 1em;
  padding: 1em 1.25em 1.05em;
  background: #f6f3ec;
  border: 1px solid #d9d4c5;
  border-left: 4px solid #6f6855;
  font-size: 0.95em;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: #2a2823;
}
.rock-scp-intro p {
  margin: 0 !important;
  text-indent: 2em !important;
  text-align: justify;
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}
.rock-scp-intro-en {
  margin-top: 0.7em !important;
  padding-top: 0.6em;
  border-top: 1px solid #e6e0cd;
  font-family: "Helvetica Neue", "Source Han Sans SC", sans-serif;
  font-size: 0.82em;
  font-style: italic;
  color: #6f6855;
  letter-spacing: 0.01em;
}
.rock-scp-intro-en p {
  text-indent: 0 !important;
  color: inherit !important;
  font-style: inherit !important;
}

/* Catalog page paper-card wrapper.
   The site body is dark; article pages render a light "paper card" via
   .rock-article. Catalog pages (which use .content-panel.standalone.series
   as their existing wrapper) need the same paper surface so dark cards
   like .rock-scp-card.redacted have a high-contrast background to sit on.
   Scoped via :has(.rock-scp-list) so it only fires on the SCP index.
   #page-title is hidden because the in-card .content-toc h1 already
   plays the page-heading role (and gets gold-underlined rock styling). */
body:has(.rock-scp-list) #page-title { display: none; }

.content-panel.standalone.series:has(.rock-scp-list) {
  max-width: 880px;
  margin: 1.6em auto 2em;
  padding: 2em 2.4em 1.8em;
  background: #faf8ef;
  color: #1a1a1a;
  border: 1px solid #d9d4c5;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.content-panel.standalone.series:has(.rock-scp-list) .content-toc h1,
.content-panel.standalone.series .content-toc h1 {
  font-family: "Helvetica Neue", "PingFang SC", "Arial Black", sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #0e0e10;
  padding-bottom: 0.35em;
  border-bottom: 2px solid #c9a227;
  margin: 0.4em 0 0.8em;
}
.content-panel.standalone.series:has(.rock-scp-list) .content-toc h1 span { color: #0e0e10; }

@media (max-width: 560px) {
  .rock-scp-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.7em; }
  .rock-scp-card { padding: 0.95em 1em 0.9em; }
  .rock-scp-card .rock-scp-name { font-size: 1.05em; }
  .rock-scp-card.redacted .rock-scp-stamp { font-size: 0.55em; padding: 0.14em 0.4em 0.18em; }
}

/* ============ PERSONNEL HUB ============
   /personnel:files  —  named-character grid + activity timeline.
   .rock-pers-list / .rock-pers-card render a portrait-style card with
   photo slot + ID + name + role + clearance chip; .classified variant
   renders the same skeleton as a redacted dossier. .rock-pers-feed is
   a left-rail timeline of dated entries with bullet markers.
   Scoped paper-card wrapper mirrors /scp:scp index. */

.rock-pers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1em;
  margin: 1.2em 0 0.6em;
}

.rock-pers-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #f6f3ec;
  border: 1px solid #d9d4c5;
  border-left: 4px solid #6f6855;
  color: #1a1a1a !important;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.rock-pers-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14,14,16,0.12);
  border-left-color: #0e0e10;
}

.rock-pers-card p {
  margin: 0 !important;
  text-indent: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.rock-pers-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #e8e2d0;
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,0,0,0.05) 16px 17px);
  border-bottom: 1px solid #d9d4c5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue", "Arial Black", sans-serif;
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #8a8474 !important;
  overflow: hidden;
}

.rock-pers-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo variant — dark backdrop, SVG forced to white via brightness(0)+invert.
   Use when the card "portrait" slot is an emblem rather than a real photo. */
.rock-pers-card-photo.logo {
  background: #0e0e10;
  background-image: none;
  border-bottom-color: #000;
}
.rock-pers-card-photo.logo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  margin: auto;
  filter: brightness(0) invert(1);
}

.rock-pers-card-info {
  padding: 0.85em 1em 1em;
}

.rock-pers-card-id {
  display: block;
  font-family: "Helvetica Neue", "PingFang SC", sans-serif;
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #6f6855 !important;
  margin-bottom: 0.3em;
}

.rock-pers-card-name {
  display: block;
  font-size: 1.05em;
  font-weight: 800;
  color: #0e0e10 !important;
  margin-bottom: 0.25em;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.rock-pers-card-role {
  display: block;
  font-size: 0.85em;
  color: #4a4538 !important;
  line-height: 1.5;
}

.rock-pers-card-clearance {
  display: inline-block;
  margin-top: 0.55em;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.62em;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  padding: 0.2em 0.55em 0.24em;
  background: #1f3a5f;
  color: #f6f3ec !important;
}

/* Classified placeholder variant */
.rock-pers-card.classified {
  border: 1px solid #000;
  border-left: 4px solid #b22222;
  background: repeating-linear-gradient(135deg, #161618 0, #161618 14px, #1c1c1f 14px, #1c1c1f 28px);
  color: #d4cebc !important;
}

.rock-pers-card.classified:hover {
  transform: none;
  box-shadow: none;
  border-left-color: #b22222;
}

.rock-pers-card.classified .rock-pers-card-photo {
  background: #0a0a0a;
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,0.03) 16px 17px);
  border-bottom-color: #000;
  color: transparent !important;
}

.rock-pers-card.classified .rock-pers-card-photo::before {
  content: "CLASSIFIED";
  position: absolute;
  font-family: "Helvetica Neue", "Arial Black", sans-serif;
  font-size: 0.85em;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #b22222;
  border: 1.5px solid #b22222;
  padding: 0.28em 0.85em 0.32em;
  transform: rotate(-6deg);
  background: rgba(0,0,0,0.45);
}

.rock-pers-card.classified .rock-pers-card-id {
  color: #8a8474 !important;
}

.rock-pers-card.classified .rock-pers-card-name {
  color: #f2efe7 !important;
}

.rock-pers-card.classified .rock-pers-card-name-mask {
  display: inline-block;
  background: #0a0a0a;
  color: #0a0a0a !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  padding: 0 0.3em;
  margin: 0 0.05em;
  user-select: none;
}

.rock-pers-card.classified .rock-pers-card-role {
  color: #a39e8d !important;
  font-style: italic;
}

.rock-pers-card.classified .rock-pers-card-clearance {
  background: #2a2a2a;
  color: #d4cebc !important;
  border: 1px solid #555;
}

/* ----- activity timeline ----- */
.rock-pers-feed {
  margin: 1.2em 0 0.4em;
  border-left: 3px solid #c9a227;
  padding-left: 1.4em;
}

.rock-pers-feed-item {
  position: relative;
  padding: 0.4em 0 1.05em 0.2em;
}

.rock-pers-feed-item::before {
  content: "";
  position: absolute;
  left: -1.8em;
  top: 0.85em;
  width: 11px;
  height: 11px;
  background: #c9a227;
  border: 2px solid #faf8ef;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c9a227;
}

.rock-pers-feed-item p {
  margin: 0 !important;
  text-indent: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: 1.65;
}

.rock-pers-feed-date {
  display: block;
  font-family: "Helvetica Neue", "PingFang SC", sans-serif;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #6f6855 !important;
  margin-bottom: 0.25em;
}

.rock-pers-feed-title {
  display: block;
  font-size: 1em;
  font-weight: 800;
  color: #0e0e10 !important;
  margin-bottom: 0.2em;
  letter-spacing: 0.02em;
}

.rock-pers-feed-body {
  display: block;
  font-size: 0.92em;
  line-height: 1.7;
  color: #2a2823 !important;
}

/* placeholder feed row — empty slot, awaiting fill */
.rock-pers-feed-item.placeholder::before {
  background: #d9d4c5;
  box-shadow: 0 0 0 1px #d9d4c5;
}

.rock-pers-feed-item.placeholder .rock-pers-feed-date,
.rock-pers-feed-item.placeholder .rock-pers-feed-title,
.rock-pers-feed-item.placeholder .rock-pers-feed-body {
  color: #9a9382 !important;
  font-style: italic;
}

/* Paper-card wrapper for /personnel:files
   Same :has() scope trick as /scp:scp index — beige card on the dark
   wiki backdrop, hide duplicate #page-title since .content-toc h1
   already carries the heading. */
body:has(.rock-pers-list) #page-title,
body:has(.rock-pers-feed) #page-title { display: none; }

.content-panel.standalone.series:has(.rock-pers-list),
.content-panel.standalone.series:has(.rock-pers-feed) {
  max-width: 880px;
  margin: 1.6em auto 2em;
  padding: 2em 2.4em 1.8em;
  background: #faf8ef;
  color: #1a1a1a;
  border: 1px solid #d9d4c5;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.content-panel.standalone.series:has(.rock-pers-list) .content-toc h1,
.content-panel.standalone.series:has(.rock-pers-feed) .content-toc h1 {
  font-family: "Helvetica Neue", "PingFang SC", "Arial Black", sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #0e0e10;
  padding-bottom: 0.35em;
  border-bottom: 2px solid #c9a227;
  margin: 0.4em 0 0.8em;
}

.content-panel.standalone.series:has(.rock-pers-list) .content-toc h1 span,
.content-panel.standalone.series:has(.rock-pers-feed) .content-toc h1 span { color: #0e0e10; }

/* sub-heading inside the personnel hub paper card */
.rock-pers-section-h {
  margin: 1.5em 0 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #d9d4c5;
  font-family: "Helvetica Neue", "PingFang SC", "Arial Black", sans-serif;
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0e0e10;
}

.rock-pers-section-h .en {
  display: block;
  margin-top: 0.15em;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #6f6855;
}

.rock-pers-intro {
  margin: 0.5em 0 1em;
  padding: 0.9em 1.15em 1em;
  background: #f6f3ec;
  border: 1px solid #d9d4c5;
  border-left: 4px solid #6f6855;
  font-size: 0.93em;
  line-height: 1.85;
  color: #2a2823;
}

.rock-pers-intro p {
  margin: 0 !important;
  text-indent: 2em !important;
  text-align: justify;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 560px) {
  .rock-pers-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7em; }
  .rock-pers-card-info { padding: 0.7em 0.8em 0.85em; }
  .rock-pers-card-name { font-size: 0.95em; }
  .rock-pers-card-role { font-size: 0.78em; }
  .content-panel.standalone.series:has(.rock-pers-list),
  .content-panel.standalone.series:has(.rock-pers-feed) {
    padding: 1.2em 1em 1em;
    margin: 0.8em 0.5em 1em;
  }
  .rock-pers-feed { padding-left: 1em; }
  .rock-pers-feed-item::before { left: -1.4em; width: 9px; height: 9px; }
}

/* ----- full roster (org-chart by department) -----
   Each .rock-pers-dept is a beige panel with a department header and a
   list of .rock-pers-slot rows: rank · name (or ████ placeholder) · clearance chip.
   Wikidot wraps consecutive inline spans in a <p> with <br/> separators; we strip
   that with display:contents on the <p> + display:none on the <br/> so the row
   spans become real flex children. */

.rock-pers-roster {
  margin: 1em 0 0.5em;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9em;
}

.rock-pers-dept {
  background: #f6f3ec;
  border: 1px solid #d9d4c5;
  border-left: 4px solid #6f6855;
  padding: 0.85em 1.15em 0.95em;
}

.rock-pers-dept p {
  margin: 0 !important;
  text-indent: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

.rock-pers-dept-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6em;
  margin: 0 0 0.55em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #d9d4c5;
  font-family: "Helvetica Neue", "PingFang SC", "Arial Black", sans-serif;
  font-size: 1em;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #0e0e10;
}

.rock-pers-dept-h p { display: contents; }
.rock-pers-dept-h br { display: none; }

.rock-pers-dept-h .en {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #6f6855;
}

.rock-pers-slot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55em 0.9em;
  padding: 0.42em 0;
  border-bottom: 1px dashed #d9d4c5;
}

.rock-pers-slot:last-child { border-bottom: none; }

.rock-pers-slot p { display: contents; }
.rock-pers-slot br { display: none; }

.rock-pers-slot-rank {
  flex: 0 0 auto;
  min-width: 7.5em;
  font-weight: 700;
  font-size: 0.93em;
  color: #2a2823;
  letter-spacing: 0.02em;
}

.rock-pers-slot-name {
  flex: 1 1 8em;
  font-family: "Helvetica Neue", "PingFang SC", sans-serif;
  font-size: 0.86em;
  color: #6f6855;
  letter-spacing: 0.04em;
}

.rock-pers-slot-name .mask {
  display: inline-block;
  background: #d9d4c5;
  color: #d9d4c5 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  padding: 0 0.32em;
  margin: 0 0.06em;
  user-select: none;
}

.rock-pers-slot-clear {
  flex: 0 0 auto;
  display: inline-block;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.6em;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  padding: 0.18em 0.55em 0.22em;
  background: #1f3a5f;
  color: #f6f3ec !important;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .rock-pers-dept { padding: 0.7em 0.85em 0.8em; }
  .rock-pers-slot { padding: 0.45em 0; gap: 0.35em 0.6em; }
  .rock-pers-slot-rank { min-width: 100%; font-size: 0.88em; }
  .rock-pers-slot-name { font-size: 0.8em; }
}

/* ----- /story:hub stories hub -----
   Card grid where each card embeds a small .rock-article-hero.vert
   for the title-over-image header, plus a short description block below.
   Reuses the existing hero machinery; just overrides margin/aspect/font-size
   for the card context (default hero is 21:9 with -2.4em/-2.6em negative
   margins meant to escape article padding — neither is right inside a card). */

.rock-story-grid {
  margin: 1em 0 0.5em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2em;
}

.rock-story-card {
  background: #1a1a1c;
  border: 1px solid #2c2c2f;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rock-story-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

.rock-story-card .rock-article-hero {
  margin: 0;
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
}

.rock-story-card .rock-article-hero .rock-article-hero-title {
  font-size: 2.4em;
  padding: 0.4em 0.2em;
}

.rock-story-card-desc {
  flex: 1 1 auto;
  background: #f6f3ec;
  color: #1a1a1c;
  padding: 0.9em 1em 1em;
  font-size: 0.92em;
  line-height: 1.6;
  border-top: 3px solid #c9a227;
}

.rock-story-card-desc p {
  margin: 0 0 0.5em !important;
  text-indent: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.rock-story-card-desc p:last-child { margin-bottom: 0 !important; }

.rock-story-card-tag {
  display: inline-block;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.7em;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  padding: 0.18em 0.55em 0.22em;
  margin-right: 0.5em;
  background: #1f3a5f;
  color: #f6f3ec !important;
  vertical-align: middle;
}

.rock-story-card.upcoming .rock-story-card-tag {
  background: #6f6855;
}

.rock-story-card-en {
  display: inline-block;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #6f6855;
  vertical-align: middle;
}

.rock-story-card-read {
  display: block;
  margin-top: 0.6em;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.rock-story-card.upcoming .rock-article-hero {
  filter: grayscale(1) brightness(0.55);
}

.rock-story-card.upcoming:hover {
  transform: none;
  box-shadow: none;
}

/* Featured story banner — horizontal layout with hero on one side,
   tag/title/EN-title/desc/cta stack on the other. Reuses the same
   .rock-article-hero machinery as the cards, just with a wider aspect
   and bigger title. */

.rock-story-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  background: #1a1a1c;
  border: 1px solid #2c2c2f;
  margin: 0.6em 0 1.6em;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.rock-story-featured .rock-article-hero {
  margin: 0;
  aspect-ratio: 4 / 5;
}

.rock-story-featured .rock-article-hero .rock-article-hero-title {
  font-size: 3.4em;
  padding: 0.45em 0.2em;
}

.rock-story-featured-body {
  background: #f6f3ec;
  color: #1a1a1c;
  padding: 1.6em 1.8em 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.97em;
  line-height: 1.75;
}

.rock-story-featured-body p {
  margin: 0 0 0.55em !important;
  text-indent: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.rock-story-featured-body p:last-child { margin-bottom: 0 !important; }

.rock-story-featured-tag {
  display: inline-block;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.72em;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  padding: 0.22em 0.7em 0.24em;
  background: #c9a227;
  color: #0e0e10 !important;
  align-self: flex-start;
  margin-bottom: 0.7em;
}

.rock-story-featured-title {
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #0e0e10 !important;
  margin: 0 0 0.15em !important;
  line-height: 1.15;
}

.rock-story-featured-title p {
  margin: 0 !important;
  text-indent: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.rock-story-featured-title-en {
  display: block;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #6f6855 !important;
  margin-bottom: 0.95em;
}

.rock-story-featured-desc {
  margin: 0 0 0.9em !important;
}

.rock-story-featured-cta {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1f3a5f !important;
}

/* No-header card variant — dark band with title instead of an image hero.
   Use when the story has no cover art yet or you want a uniform text-only row.
   Apply with .no-hero on the card; the inner band becomes the title block. */

.rock-story-card.no-hero {
  background: #f6f3ec;
  border: 1px solid #d9d4c5;
}

.rock-story-card.no-hero .rock-story-card-band {
  background: #1a1a1c;
  color: #f6f3ec;
  padding: 1em 1em 0.95em;
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
  font-size: 1.5em;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  border-bottom: 3px solid #c9a227;
  text-align: center;
}

.rock-story-card.no-hero .rock-story-card-band p {
  margin: 0 !important;
  text-indent: 0.1em !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1.1 !important;
}

.rock-story-card.no-hero .rock-story-card-desc { border-top: none; }

.rock-story-card.no-hero.upcoming .rock-story-card-band {
  background: #4a4642;
  border-bottom-color: #6f6855;
}

.rock-story-card.no-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

@media (max-width: 720px) {
  .rock-story-featured { grid-template-columns: 1fr; }
  .rock-story-featured .rock-article-hero { aspect-ratio: 16 / 9; }
  .rock-story-featured .rock-article-hero .rock-article-hero-title { font-size: 2.6em; }
  .rock-story-featured-body { padding: 1.2em 1.2em 1.2em; }
}

body:has(.rock-story-grid) #page-title,
body:has(.rock-story-featured) #page-title { display: none; }

.content-panel.standalone.series:has(.rock-story-grid),
.content-panel.standalone.series:has(.rock-story-featured) {
  max-width: 880px;
  margin: 1.6em auto 2em;
  padding: 2em 2.4em 1.8em;
  background: #faf8ef;
  color: #1a1a1a;
  border: 1px solid #d9d4c5;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.content-panel.standalone.series:has(.rock-story-grid) .content-toc h1,
.content-panel.standalone.series:has(.rock-story-featured) .content-toc h1 {
  font-family: "Helvetica Neue", "PingFang SC", "Arial Black", sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #0e0e10;
  padding-bottom: 0.35em;
  border-bottom: 2px solid #c9a227;
  margin: 0.4em 0 0.8em;
}

.content-panel.standalone.series:has(.rock-story-grid) .content-toc h1 span,
.content-panel.standalone.series:has(.rock-story-featured) .content-toc h1 span { color: #0e0e10; }

@media (max-width: 560px) {
  .rock-story-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8em; }
  .rock-story-card .rock-article-hero .rock-article-hero-title { font-size: 1.8em; }
  .content-panel.standalone.series:has(.rock-story-grid),
  .content-panel.standalone.series:has(.rock-story-featured) {
    padding: 1.2em 1em 1em;
    margin: 0.8em 0.5em 1em;
  }
}

[[/module]]

1. 文章容器 Article Container

.rock-article

SCP 档案、报告类长文使用的米色纸面卡片，760px 最大宽度，衬线字体，自动处理 Wikidot 段落 <p> 边距，首行缩进 2 字符。适合叙述性长文，不适合作为导航 / 文档页。

Wiki source

[[div class="rock-article"]]

... 文章内容 ...

[[/div]]

2. 章节标题 Section Heading

.rock-article-h + .rock-article-h-en

中文标题在上，英文 caps-spaced 副标题自动换行显示在下。

特殊收容措施 Special Containment Procedures

Wiki source

[[div class="rock-article-h"]]
特殊收容措施 [[span class="rock-article-h-en"]]Special Containment Procedures[[/span]]
[[/div]]

3. 元数据面板 Meta Panel

.rock-article-meta · .rock-article-meta-row · .rock-article-meta-label

"项目编号""项目等级""负责研究员"等键值对。米色背景 + 黑色左侧粗边。

项目编号： SCP-173b

项目等级： Euclid

负责研究员： Dr. Elias M. Voss

Wiki source

[[div class="rock-article-meta"]]
[[div class="rock-article-meta-row"]]
[[span class="rock-article-meta-label"]]项目编号：[[/span]] SCP-173b
[[/div]]
[[div class="rock-article-meta-row"]]
[[span class="rock-article-meta-label"]]项目等级：[[/span]] Euclid
[[/div]]
[[/div]]

4. ACS 头部 ACS Header

.rock-acs-header · .rock-acs-id · .rock-acs-name · .rock-acs-tags · .rock-acs-tag

SCP-XXXX 编号 + 可选项目名 + 分类 chip 行。配色与 SCP 官方 ACS 一致。

两种形态： 若提供 .rock-acs-name，编号会自动降为小号 caps-label 显示在项目名上方；若省略，编号本身就是大标题——不会留出空白位。

SCP-173b

混凝土雕像 · 变种 II

LEVEL 3 EUCLID · 欧几里得 VLAM · 低度扰动 WARNING · 警告

SCP-XXX

LEVEL 2 SAFE · 安全 NOTICE · 提示

Wiki source — 带项目名 (with name)

[[div class="rock-acs-header"]]
[[div class="rock-acs-id"]]
SCP-173b
[[/div]]
[[div class="rock-acs-name"]]
混凝土雕像 · 变种 II
[[/div]]
[[div class="rock-acs-tags"]]
[[span class="rock-acs-tag rock-acs-clearance lvl3"]]LEVEL 3[[/span]]
[[span class="rock-acs-tag rock-acs-euclid"]]EUCLID · 欧几里得[[/span]]
[[span class="rock-acs-tag rock-acs-vlam"]]VLAM · 低度扰动[[/span]]
[[span class="rock-acs-tag rock-acs-warning"]]WARNING · 警告[[/span]]
[[/div]]
[[/div]]

Wiki source — 仅编号 (id only)

[[div class="rock-acs-header"]]
[[div class="rock-acs-id"]]
SCP-XXX
[[/div]]
[[div class="rock-acs-tags"]]
[[span class="rock-acs-tag rock-acs-clearance lvl2"]]LEVEL 2[[/span]]
[[span class="rock-acs-tag rock-acs-safe"]]SAFE · 安全[[/span]]
[[span class="rock-acs-tag rock-acs-notice"]]NOTICE · 提示[[/span]]
[[/div]]
[[/div]]

5. ACS 标签配色 ACS Tag Palette

.rock-acs-tag.rock-acs-<class>

所有可用的 ACS 类名。按收容、扰动、风险、许可四组排列。

收容等级 · CONTAINMENT

SAFE
EUCLID
KETER
THAUMIEL
APOLLYON
ARCHON
NEUTRALIZED
PENDING

扰动等级 · DISRUPTION

DARK
VLAM
KENEQ
EKHI
AMIDA

风险等级 · RISK

NOTICE
CAUTION
WARNING
DANGER
CRITICAL

安全许可 · CLEARANCE

LEVEL 1
LEVEL 2
LEVEL 3
LEVEL 4
LEVEL 5

6. 图片与占位 Image & Placeholder

.rock-article-image 是固定 260px 宽的右浮动容器，正文从左侧绕排。容器内可放三种内容：真实竖图、真实横图、或占位组件。每种之下是一个示例 + 源代码。

真实竖图 — vertical image

人物、雕像、肖像等竖向素材。图片按比例缩放至 260px 宽，下方可附 caption。

Carmonte

正文从图片左侧绕排——这一段文字示例占用足够多的行数来展示 float: right 的视觉效果。在实际文章中，特殊收容措施、描述、附录等正文段落会自然地围绕图片的左侧延展。当正文长度小于图片高度时，图片下方留白；正文较长时，文字会在图片下方继续延伸。

Wiki source

[[div class="rock-article-image"]]
[[image https://roleplay.ncgs.top/storage/img/carmonte-1.png alt="..."]]
[[div class="rock-article-image-caption"]]
图注内容（可多行）
[[/div]]
[[/div]]

真实横图 — horizontal image

地点、设施、场景等横向素材。同样占 260px 宽，按比例缩放，高度较小，正文绕排区域更长。

胡安·德·富卡海峡以西 · 改造钻井平台
卫星侦察图 · 2026-04-26

横图占据 260px 宽但高度较小，因此正文有较长的绕排空间。如果你的图片是地图、设施鸟瞰、场景照之类的横向素材，效果会比竖图更自然——读者首先看到的是图，然后视线自然进入左侧的描述文字。这种排版适合大多数 SCP 现场记录类文章。

Wiki source

[[div class="rock-article-image"]]
[[image https://roleplay.ncgs.top/storage/img/oilrig.png alt="..."]]
[[div class="rock-article-image-caption"]]
图注内容（可多行）
[[/div]]
[[/div]]

占位组件 — placeholder (no image yet)

正式图片尚未提供时使用 .rock-article-image-placeholder。固定 4:5 竖向占位，斜条纹背景 + 中央问号图标。有正式图片后，只需把整个 .rock-article-image-placeholder 块替换为 ——外框与 caption 保留不变。

?
待补充图片
IMAGE PENDING · CL-3 ACCESS ONLY

SCP-173b · 收容前现场记录 · Site-47 / B-04

正文从占位框左侧绕排——和真实图片版面一致。这种占位适合提交未配图的稿件，让审稿和读者明确知道"此处预留图片"，而不是简单留空。后续可无缝替换为真实图片。

Wiki source

[[div class="rock-article-image"]]
[[div class="rock-article-image-placeholder"]]
[[span class="rock-article-image-icon"]]?[[/span]]
[[span class="rock-article-image-text"]]待补充图片[[/span]]
[[span class="rock-article-image-meta"]]IMAGE PENDING · CL-3 ACCESS ONLY[[/span]]
[[/div]]
[[div class="rock-article-image-caption"]]
SCP-XXX · 现场记录
[[/div]]
[[/div]]

7. 全宽题图 Embedded Hero Image

.rock-article-hero 是横向延伸至文章左右边缘的题图构件，常用于故事 / 长文的视觉头图。图片通过容器的 background-image 设置，标题文字以 9 宫格方式叠加在图上——按图片亮部分布选择最不干扰的格位。默认居中、白色粗体；亮底图可加 .dark 切换为黑色文字，需要竖排标题可加 .vert（书写方向 vertical-rl + CJK 字符直立）。

.rock-article-hero.vert.pos-mr — 竖排 / 右贴边

负边距 -2.4em / -2.6em 让此构件穿出 .rock-article 的内边距，撑满纸卡左右边缘。默认 21:9 宽高比；如需更高，可在容器加 inline aspect-ratio 覆盖。本例使用 .vert 竖排 + .pos-mr 右侧贴边，白色粗体。

分裂

正文起点 Body Begins

图下直接衔接章节标题——题图本身不参与 <p> 段落流程，因此与下方内容之间不会出现额外空隙。

Wiki source

[[div class="rock-article-hero vert pos-mr" style="background-image: url(...)"]]
[[div class="rock-article-hero-title"]]
分裂
[[/div]]
[[/div]]

.rock-article-hero.vert — 竖排 / 居中

不指定位置类时默认中心 (.pos-mc)；与 .vert 搭配，呈现书脊式的居中竖排标题。本例使用故事《征召》的封面图。

征召

“所以，你承认。”

“我承认我下了那道命令。”

“原话。”

“……‘对那群叛徒开火。’”

“‘那群’指谁。”

“驻站 MTF。”

“再具体一点，沃斯。原话里有没有修饰性的指代。”

“我说……我说‘那群拿着 O5 逮捕令冲进我办公室的叛徒’。”

“是原话，还是你整理过的？”

“是原话。”

“还有别的吗。”

“……还有一句‘去他妈的’。”

“去他妈的什么？”

“去他妈的，所有人。”

Wiki source

[[div class="rock-article-hero vert" style="background-image: url(...)"]]
[[div class="rock-article-hero-title"]]
征召
[[/div]]
[[/div]]
[[div class="rock-article-body"]]
正文段落 1。

正文段落 2。
[[/div]]

.rock-article-hero.dark.pos-tl — 横排 / 左上 / 黑色标题

省略 .vert 即为默认横排，标题水平展开；加 .dark 把标题改为黑色 + 浅描边，适合白底 / 高曝光 / 雾色调的图像。本例同时使用 .pos-tl 把标题放在左上角。

档案 · A

横排模式下，文字按通常的西文 / 中文水平排版方向延展；适合大多数普通页面标题。

Wiki source

[[div class="rock-article-hero dark pos-tl" style="background-image: url(...)"]]
[[div class="rock-article-hero-title"]]
档案 · A
[[/div]]
[[/div]]

位置类（9 宫格）： .pos-tl · .pos-tc · .pos-tr · .pos-ml · .pos-mc · .pos-mr · .pos-bl · .pos-bc · .pos-br。第一个字母为行（top/middle/bottom），第二个为列（left/center/right）。不写位置类时默认中心 (.pos-mc)。

颜色变体： 加 .dark 把标题改为黑色 + 浅描边；适合白底 / 雾色调 / 高曝光主体的图。

书写方向： 加 .vert 把标题切换为竖排（writing-mode: vertical-rl + CJK 字符直立）；省略则横排。.vert 与 .dark、9 宫格位置类可自由叠加。

使用前提： 此构件须放在 .rock-article 容器之内（依赖文章卡片的内边距对齐）。放在文章首行可贴齐顶端；放在文章中段时通过 inline margin-top: 0 收紧上边距。

8. 引用 / 文献节录 Quote Block

.rock-article-quote + .cite

报告、批注、外勤手记、邮件节录。金色左边、斜体衬线字体、底部可选引用署名（.cite span）。

"……合金中检出锆、铪、钽等高熔点元素，比例不符合任何已知人造合金。"
— Dr. M. Aragawa · 化学部门 · 173b/CHEM-001

Wiki source

[[div class="rock-article-quote"]]
"……合金中检出锆、铪、钽等高熔点元素。"
[[span class="cite"]]— Dr. M. Aragawa · 化学部门 · 173b/CHEM-001[[/span]]
[[/div]]

9. CTA 按钮 Call-To-Action Button

.rock-cta + link

将 Wikidot 链接（无论是页面链接还是带斜杠的相对/绝对路径形式）包裹在 .rock-cta 容器里即可渲染为按钮。具体链接语法请见下方源代码。默认是黑色方块按钮，hover 反色。

申请权限 →

Wiki source

[[div class="rock-cta"]]
[/system:join 申请权限 →]
[[/div]]

10. 可折叠区块 Collapsible Block

...

Wikidot 内置的折叠组件。show 和 hide 属性分别控制收起/展开状态下显示的按钮文字。本页顶部的 "查看 include 写法" 折叠就是这种用法。可附加 folded="no" 让区块默认展开，hideLocation="both" 在展开后也保留收起按钮。

▸ 展开示例内容

Wiki source

[[collapsible show="▸ 展开示例内容" hide="▾ 收起"]]
被折叠的内容……

[[div class="rock-article-quote"]]
"任意 wikitext 都可放入。"
[[span class="cite"]]— 引用署名[[/span]]
[[/div]]
[[/collapsible]]

11. 表单 / 输入框 Form & Inputs

.rock-apply (Wikidot Data Form wrapper)

.rock-apply 容器为 Wikidot Data Form 生成的 input / textarea / submit 元素提供米色卡片样式。要让 Data Form 渲染为真实表单，须在站点设置中将页面 category 标记为 form 模式。本页是普通页面，下方仅为视觉占位示意。

姓名

请输入姓名…

自我介绍

请填写……

提交申请

Wiki source skeleton

[[div class="rock-apply"]]
... 在 form 类别页面中，Wikidot Data Form 字段
    会被注入为 input / textarea / submit；
    本 wrapper 提供整体样式。
[[/div]]

参考 system:join 的实际实现。

12. 页脚 Article Footer

.rock-article-footer

文章末尾的细线 + 居中说明栏，用于注明归档单位、转载说明等。

SCP-173b · 由 Site-47 内部研究存档管理 · 任何转载须经站点主管授权

Wiki source

[[div class="rock-article-footer"]]
SCP-173b · 由 Site-47 内部研究存档管理
[[/div]]

13. 完整文章骨架 Full Article Skeleton

copy-paste starter

组合前面各小节作为新 SCP 档案的起点：rock-article 外壳 → rock-acs-header（ID + tags）→ rock-article-meta（项目编号 / 等级 / 负责研究员）→ 若干 rock-article-h 小节（特殊收容措施 / 描述 / 附录）→ rock-article-footer。

直接参考 scp-173b 的源代码作为完整范本（在该页"+ Options" → "Edit" 即可查看）。

14. Wikidot 解析陷阱 Parser Gotchas

⚠ 务必避免以下写法

不要把 div 开闭标签和内容挤在同一行。 单行内联（开标签 + 内容 + 闭标签全部一行）会导致内容被吞，并污染后续整页的解析。每个标签、每段内容都必须独占一行。
不要写空的带 class span 标签。 完全空的 span 会被 Wikidot 静默删除。若只是想插入一个样式占位（例如 ACS 图标），在里面放一个英文句点（.）作为占位字符——主题 CSS 会通过 color: transparent 把它视觉上隐藏。
不要在 span 标签上使用行内 style 属性。 本站会剥离 span 上的 style。需要样式请在 theme:rock-css 中定义 class，然后通过 class 名引用。div 标签上的 style 属性是保留的，可以正常使用 style="display:none" 等。
不要用 Wikidot 自带的方括号-感叹号注释语法隐藏整段 div。 它只对内联文本可靠，无法稳定隐藏块级内容。要彻底隐藏一段 div，请用带 style="display:none" 属性的 div 包裹被隐藏的内容。

Site-47 磐石

保护•收容•维持