/* pahualou.lol — board-matrix forum plate, teal on sand, light ground only. */

:root {
  --bg: #f7f5ef;
  --surface: #fffdf8;
  --surface-2: #eeeae0;
  --surface-3: #e6e1d4;
  --text: #1f2621;
  --text-muted: #5d655e;
  --text-soft: #747c74;
  --accent: #0b5d55;
  --accent-deep: #084740;
  --accent-ink: #ffffff;
  --accent-soft: #e3efec;
  --line: #ddd8ca;
  --line-strong: #c3bcaa;
  --clay: #a4432c;
  --clay-bg: #faeee9;
  --amber: #8a5a00;
  --amber-bg: #fbf1dc;
  --teal-bg: #e8f2ef;
  --strip: #14201c;
  --strip-ink: #e8efe9;
  --strip-dim: #a9b8ad;
  --ring: #0b5d55;

  --cta-fill: #0b5d55;
  --cta-edge: #063c36;
  --cta-elevation: 0 8px 22px rgba(11, 93, 85, 0.26);
  --cta-rail: #e3efec;
  --cta-sheen: #f2fbf8;

  --song: "Songti SC", "STSong", "SimSun", "宋体", "Noto Serif CJK SC", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", system-ui, sans-serif;
  --mono: "SFMono-Regular", "Consolas", "Menlo", "Courier New", monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --r1: 2px;
  --r2: 4px;
  --r3: 7px;
  --wide: 1180px;
  --prose: 740px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --quick: 150ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--quick) var(--ease);
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--song);
  font-weight: 700;
  letter-spacing: 0;
}

h1 {
  font-size: 29px;
  line-height: 1.34;
}

h2 {
  font-size: 22px;
  line-height: 1.4;
}

h3 {
  font-size: 17px;
  line-height: 1.5;
}

p {
  margin: 0 0 var(--s3);
}

p:last-child {
  margin-bottom: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.hide {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* top strip */

.topstrip {
  background: var(--strip);
  color: var(--strip-dim);
  font-size: 12.5px;
}

.strip-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  min-height: 40px;
}

.strip-home {
  color: var(--strip-ink);
  font-weight: 700;
}

.strip-home:hover {
  color: #ffffff;
  text-decoration: none;
}

.strip-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.strip-links a {
  color: var(--strip-dim);
}

.strip-links a:hover {
  color: var(--strip-ink);
  text-decoration: none;
}

.strip-note {
  margin-left: auto;
  color: var(--strip-dim);
}

/* plate header */

.plate {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.plate-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4);
  padding-top: var(--s5);
}

.wordmark {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
  color: var(--text);
}

.wordmark:hover {
  text-decoration: none;
}

.wordmark-main {
  font-family: var(--song);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1px;
}

.wordmark-sub {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.plate-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1);
  padding-bottom: var(--s2);
}

.pl-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  font-size: 15px;
}

.pl-tab:hover {
  color: var(--accent);
  text-decoration: none;
}

.pl-tab.is-on {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.hotrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  padding-top: var(--s2);
  padding-bottom: var(--s3);
  border-top: 1px solid var(--line);
  margin-top: var(--s3);
}

.hotlabel {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

.hotchips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

.hotchip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--s3);
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: 13px;
}

.hotchip:hover {
  color: var(--accent-ink);
  background: var(--accent);
  text-decoration: none;
}

/* notice */

.notice-slab {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--clay-bg);
  border: 1px solid #e8cdc2;
  border-radius: var(--r2);
}

.homeintro {
  padding: var(--s5) 0 0;
}

.homeintro h1 {
  margin-bottom: var(--s3);
}

.homeintro .introtext {
  margin-top: 0;
  max-width: 820px;
}

.notice-tag {
  flex: 0 0 auto;
  padding: 1px var(--s2);
  color: #ffffff;
  background: var(--clay);
  border-radius: var(--r1);
  font-size: 11.5px;
  font-weight: 700;
}

.notice-slab p {
  margin: 0;
  color: #6d2f20;
  font-size: 14px;
  line-height: 1.7;
}

/* columns */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: var(--s6);
  align-items: start;
  padding: var(--s5) 0 var(--s7);
}

.colmain {
  min-width: 0;
}

.band {
  margin-top: var(--s6);
}

.bandfirst {
  margin-top: 0;
}

.secbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-strong);
}

.secbar span {
  color: var(--text-soft);
  font-size: 12.5px;
}

.secbar a {
  font-size: 13px;
}

.kicker {
  display: inline-block;
  margin-bottom: var(--s2);
  padding: 1px var(--s2);
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r1);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

.introtext {
  margin-top: var(--s3);
  max-width: var(--prose);
}

.introtext p {
  color: #2b332d;
  font-size: 16px;
  line-height: 1.8;
}

.intro-count {
  margin-top: var(--s3);
  color: var(--text-soft);
  font-size: 13px;
}

/* board matrix */

.boardgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}

.boardcard {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.boardmark {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  min-height: 42px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r1);
  font-family: var(--song);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.boardmark:hover {
  color: var(--accent-ink);
  background: var(--accent-deep);
  text-decoration: none;
}

.boardtext {
  min-width: 0;
}

.boardtext h3 a {
  color: var(--text);
  font-size: 18px;
}

.boardtext h3 a:hover {
  color: var(--accent);
}

.boardtext p {
  margin: var(--s1) 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.boardmeta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s2);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 11.5px;
}

.boardmeta a {
  font-family: var(--sans);
  font-size: 12.5px;
}

/* feed */

.feed {
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.feedrow {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
}

.feedrow:first-child {
  border-top: 0;
}

.feednum {
  flex: 0 0 28px;
  color: var(--line-strong);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
}

.feedbody {
  min-width: 0;
}

.feedbody h3 {
  font-size: 17.5px;
  line-height: 1.5;
}

.feedbody h3 a {
  color: var(--text);
}

.feedbody h3 a:hover {
  color: var(--accent);
}

.feedbody p {
  margin: var(--s1) 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.feedmeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 11.5px;
}

.feedcol {
  color: var(--teal-deep);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
}

.tagpill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--s2);
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  font-family: var(--sans);
  font-size: 11.5px;
}

.tagpill:hover {
  color: var(--accent);
  border-color: var(--line-strong);
  text-decoration: none;
}

.bandmore {
  margin-top: var(--s3);
  font-size: 13.5px;
}

/* accordion */

.acclist {
  margin-top: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.acc {
  border-top: 1px solid var(--line);
}

.acc:first-child {
  border-top: 0;
}

.acc summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font-family: var(--song);
  font-size: 17px;
  font-weight: 700;
  list-style: none;
}

.acc summary::-webkit-details-marker {
  display: none;
}

.acc summary:hover {
  background: var(--surface-2);
}

.accno {
  flex: 0 0 auto;
  color: var(--line-strong);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
}

.acc-link {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
}

.accbody {
  padding: 0 var(--s4) var(--s4);
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

.accbody p {
  margin: 0;
}

.acclist-inner {
  margin: 0;
  padding: 0;
  list-style: none;
}

.acclist-inner li {
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
}

.acclist-inner li:first-child {
  border-top: 0;
}

.acclist-inner a {
  display: block;
  color: var(--text);
  font-family: var(--song);
  font-size: 16.5px;
  font-weight: 700;
}

.acclist-inner a:hover {
  color: var(--accent);
}

.acclist-inner span {
  display: block;
  margin-top: var(--s1);
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

/* rail */

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}

.railcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.railhead {
  padding: var(--s2) var(--s4);
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

.railindex {
  margin: 0;
  padding: var(--s1) 0;
  list-style: none;
}

.railindex li {
  border-top: 1px solid var(--line);
}

.railindex li:first-child {
  border-top: 0;
}

.railindex a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s1) var(--s4);
  color: var(--text);
  font-size: 14.5px;
}

.railindex a:hover {
  color: var(--accent);
  background: var(--surface-2);
  text-decoration: none;
}

.rmark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-height: 22px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r1);
  font-family: var(--song);
  font-size: 13px;
  font-weight: 700;
}

.rcount {
  margin-left: auto;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 11px;
}

.statgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--s3) var(--s2);
  text-align: center;
}

.statgrid b {
  display: block;
  color: var(--accent);
  font-family: var(--song);
  font-size: 22px;
  line-height: 1.3;
}

.statgrid span {
  color: var(--text-soft);
  font-size: 11.5px;
}

.raillist {
  margin: 0;
  padding: var(--s2) var(--s4);
  list-style: none;
}

.raillist li {
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
}

.raillist li:first-child {
  border-top: 0;
}

.raillist a {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
}

.raillist a:hover {
  color: var(--accent);
}

.tagwall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: 0 var(--s4) var(--s4);
}

.railcard .tagwall {
  margin-top: 0;
  padding: var(--s3) var(--s4) var(--s4);
}

/* post sheet */

.postsheet {
  padding: var(--s5) var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.posttop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.postcol {
  padding: 1px var(--s2);
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r1);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
}

.postcol:hover {
  color: var(--accent-ink);
  background: var(--accent-deep);
  text-decoration: none;
}

.postsheet h1 {
  margin: var(--s4) 0 var(--s3);
}

.postlead {
  padding-bottom: var(--s4);
  border-bottom: 1px dashed var(--line-strong);
  color: #2b332d;
  font-size: 17px;
  line-height: 1.8;
}

.postbody {
  max-width: var(--prose);
  padding-top: var(--s4);
  font-size: 16.5px;
  line-height: 1.85;
}

.postbody p {
  margin: 0 0 var(--s4);
}

.postbody p:last-child {
  margin-bottom: 0;
}

.postfoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.rellist {
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s4);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.rellist li {
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
}

.rellist li:first-child {
  border-top: 0;
}

.rellist a {
  display: block;
  color: var(--text);
  font-family: var(--song);
  font-size: 16.5px;
  font-weight: 700;
}

.rellist a:hover {
  color: var(--accent);
}

.rellist span {
  display: block;
  margin-top: var(--s1);
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

/* index table and filter */

.filterbar {
  display: flex;
  align-items: stretch;
  gap: var(--s2);
  max-width: 520px;
  margin-top: var(--s4);
}

.filterbar input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s3);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r1);
  font-family: var(--sans);
  font-size: 16px;
}

.filterbar button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--s4);
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r1);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
}

.filterbar button:hover {
  background: var(--accent-deep);
}

.filtercount {
  margin-top: var(--s2);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 12px;
}

.tablewrap {
  margin-top: var(--s3);
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}

.indextable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.65;
}

.indextable th,
.indextable td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.indextable th {
  color: var(--text-muted);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.indextable tbody tr:last-child td {
  border-bottom: 0;
}

.ctitle a {
  color: var(--text);
  font-family: var(--song);
  font-size: 16px;
  font-weight: 700;
}

.ctitle a:hover {
  color: var(--accent);
}

.ccol a {
  color: var(--teal-deep);
  font-size: 13px;
}

.ctags {
  color: var(--text-soft);
  font-size: 12.5px;
}

.btnlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: var(--s2);
  padding: 0 var(--s4);
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r1);
  font-size: 14px;
}

.btnlink:hover {
  color: var(--accent-ink);
  background: var(--accent-deep);
  text-decoration: none;
}

.btnghost {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line-strong);
}

.btnghost:hover {
  color: var(--accent);
  background: var(--surface-2);
}

/* crumb */

.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-top: var(--s4);
  color: var(--text-soft);
  font-size: 12.5px;
}

.crumb a {
  color: var(--text-soft);
}

.crumb a:hover {
  color: var(--accent);
}

.crumbx {
  color: var(--line-strong);
}

/* footer */

.footslab {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.footgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6);
  padding: var(--s6) 0 var(--s5);
}

.footintro a {
  color: var(--text);
  font-family: var(--song);
  font-size: 20px;
  font-weight: 700;
}

.footintro p {
  margin-top: var(--s2);
  max-width: 440px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.footcol h2 {
  margin-bottom: var(--s2);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.footcol a {
  display: block;
  padding: var(--s1) 0;
  color: var(--text);
  font-size: 13.5px;
}

.footcol a:hover {
  color: var(--accent);
}

.footline {
  padding: var(--s3) 0 var(--s5);
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 12px;
}

/* responsive */

@media (max-width: 1000px) {
  .cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }

  .rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 760px) {
  .wrap {
    padding: 0 var(--s4);
  }

  .wordmark-main {
    font-size: 29px;
  }

  .plate-row {
    padding-top: var(--s4);
  }

  .plate-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 0;
  }

  .pl-tab {
    flex: 0 0 auto;
  }

  .boardgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .postsheet {
    padding: var(--s4);
  }

  .boardcard {
    padding: var(--s3);
  }

  .rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .footgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    padding: var(--s5) 0;
  }

  .indextable th:nth-child(3),
  .indextable td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 460px) {
  .strip-note {
    margin-left: 0;
  }

  .filterbar {
    flex-wrap: wrap;
  }

  .filterbar input,
  .filterbar button {
    flex: 1 1 100%;
  }

  .postbody {
    font-size: 16px;
  }

  .acc summary {
    flex-wrap: wrap;
  }

  .acc-link {
    margin-left: 0;
  }
}