/* =============================================================
   Sudoku Explained · 内容页样式
   与游戏共用同一套纸墨配色，但版式是编辑部风格：衬线标题 + 无衬线正文
   ============================================================= */

:root {
  --bg: #f2efe8;
  --bg-glow: #fdfcfa;
  --surface: #ffffff;

  --ink: #1c1f23;
  --ink-soft: #4d545c;
  --ink-mute: #8b9099;

  --line: #e2ded6;
  --line-strong: #363b41;
  --hair: #ece8e0;

  --accent: #14655c;
  --accent-dark: #0e4d46;
  --accent-soft: #e3efec;

  --target: #fbf0df;
  --target-ink: #a35c14;

  --error: #bf3b2c;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 20px 72px;
  background:
    radial-gradient(900px 460px at 10% -10%, var(--bg-glow) 0%, rgba(255, 255, 255, 0) 62%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------- 顶栏 ---------------------------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
}

.brand-name {
  font-family: var(--serif);
  font-size: 16.5px;
  letter-spacing: .01em;
}

.site-nav { display: flex; gap: 20px; }

.site-nav a {
  color: var(--ink-soft);
  font-size: 13.5px;
  text-decoration: none;
  letter-spacing: .02em;
}

.site-nav a:hover,
.site-nav a[aria-current] { color: var(--accent); }

/* ---------------------------- 版心 ---------------------------- */

.wrap { max-width: 700px; margin: 0 auto; }

.crumbs {
  margin: 22px 0 26px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: .02em;
}

.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 6px; opacity: .6; }
.crumbs em { font-style: normal; color: var(--ink-soft); }

/* ---------------------------- 文章头 ---------------------------- */

.art-head { margin-bottom: 34px; }

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.deck {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------------------------- 正文 ---------------------------- */

article h2 {
  margin: 44px 0 14px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.006em;
}

article h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--accent);
  opacity: .55;
}

article h3 {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.45;
}

article p { margin: 0 0 18px; }

article ul,
article ol { margin: 0 0 20px; padding-left: 22px; }

article li { margin: 0 0 8px; }

article li::marker { color: var(--accent); }

article strong { font-weight: 650; }

article em { font-style: italic; }

article a {
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 101, 92, .35);
}

article a:hover { border-bottom-color: var(--accent); }

article code {
  padding: 1.5px 5px;
  border-radius: 4px;
  background: #edeae3;
  font-family: var(--mono);
  font-size: .86em;
}

article hr {
  margin: 38px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

article blockquote {
  margin: 0 0 22px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
}

article blockquote p { margin: 0; }

/* ---------------------------- 表格 ---------------------------- */

.tbl-wrap { margin: 26px 0 30px; overflow-x: auto; }

article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
}

article th,
article td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
}

article th {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

article tbody tr:nth-child(even) { background: #faf8f4; }
article td:first-child { color: var(--ink-soft); }

/* ---------------------------- 盘面图 ---------------------------- */

.board-fig {
  margin: 30px 0 34px;
  padding: 22px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(28, 31, 35, .04);
}

.board {
  /* 一格多宽由可用宽度决定，窄屏不再靠断点硬砍，棋盘能一直吃到边 */
  --cell: min(44px, calc((100vw - 56px) / 9));
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  width: max-content;
  margin: 0 auto;
  border: 2px solid var(--line-strong);
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
}

.bc {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* 宫线：每三格一条粗线 */
.bc.br { border-right: 2px solid var(--line-strong); }
.bc.bb { border-bottom: 2px solid var(--line-strong); }
.bc:nth-child(9n) { border-right: 0; }
.bc:nth-child(n+73) { border-bottom: 0; }

.bc .big {
  font-family: var(--serif);
  font-size: calc(var(--cell) * .56);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

/* 已填格 */
.bc.given { background: #faf8f4; }

/* 推理落子 */
.bc.solved {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.bc.solved .big { color: var(--accent-dark); }

/* 构成技巧的那几格 */
.bc.mark {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* 被消去候选的格子 */
.bc.target { background: var(--target); }

/* 候选数九宫格 */
.cds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 2px 1px;
}

.cd {
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * .235);
  line-height: 1;
  color: var(--ink-mute);
}

/* 被划掉的候选：颜色要红得出来，线要细，否则小字号下数字整个糊成一团 */
.cd.drop {
  position: relative;
  color: var(--error);
  font-weight: 700;
}

.cd.drop::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: .8;
}

.board-fig figcaption {
  margin: 16px auto 0;
  /* 380px 装不下中文长句，会碎成很短的行；520px 中英都还在一到三行内 */
  max-width: 520px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-mute);
  text-align: center;
  text-wrap: balance;
}

/* 图例 */
.legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
}

.legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: -1px;
}

/* ---------------------------- 行动号召 ---------------------------- */

.cta {
  margin: 40px 0;
  padding: 22px 24px;
  border: 1px solid #cfe0db;
  border-radius: 14px;
  background: linear-gradient(180deg, #f4faf8 0%, #eaf3f0 100%);
}

.cta-k {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.cta p { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); }

.cta-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 0 !important;
}

.cta-btn:hover { background: var(--accent-dark); }

/* ---------------------------- FAQ ---------------------------- */

.faq { margin-top: 52px; padding-top: 8px; }

.faq h2 { font-size: 23px; }

.faq h3 {
  margin: 24px 0 6px;
  font-size: 16px;
  font-weight: 650;
}

.faq p { color: var(--ink-soft); font-size: 15.5px; }

/* ---------------------------- 目录页 ---------------------------- */

.cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card a {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.card a:hover {
  border-color: #cfc9be;
  box-shadow: 0 2px 4px rgba(28, 31, 35, .04), 0 12px 28px -16px rgba(28, 31, 35, .3);
  transform: translateY(-1px);
}

.card h2 {
  margin: 10px 0 6px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

.card p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.card .more {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}

/* ---------------------------- 页脚 ---------------------------- */

.site-foot {
  max-width: 700px;
  margin: 64px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-mute);
}

.site-foot p { margin: 0 0 4px; }
.site-foot .fine { font-size: 11.5px; opacity: .8; }

/* 语言切换：与游戏页同一套观感，页脚排在最上面一行 */
.lang-switch {
  display: flex;
  gap: 2px;
  margin: 0 0 10px;
}

.lang-switch a {
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--ink-mute);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.lang-switch a:hover { color: var(--ink); background: var(--hair); }

.lang-switch a[aria-current] {
  color: var(--ink);
  background: var(--hair);
  font-weight: 600;
}

/* 页脚法务链接 */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 8px;
}

.foot-links a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.foot-links a:hover { color: var(--ink); border-bottom-color: currentColor; }

/* ---------------------------- 404 ---------------------------- */

.nf { margin: 34px 0 0; }
.nf h1 { font-size: clamp(30px, 5vw, 42px); margin: 4px 0 12px; letter-spacing: -.015em; }
.nf .deck { margin: 0; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }

.cta-btn.ghost {
  background: transparent;
  color: var(--ink);
  /* .cta-btn 上有 border: 0 !important，这里必须同样带 !important 才盖得住 */
  border: 1px solid var(--line) !important;
}
.cta-btn.ghost:hover { background: var(--hair); color: var(--ink); }

.nf-zh { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--hair); }
.nf-zh h2 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.01em; }
.nf-zh p { color: var(--ink-soft); font-size: 16px; margin: 0; }

/* ---------------------------- 窄屏 ---------------------------- */

@media (max-width: 560px) {
  body { padding: 0 16px 56px; font-size: 16.5px; }

  h1 { font-size: 29px; }
  .deck { font-size: 16.5px; }

  article h2 { font-size: 22px; margin-top: 36px; }

  .board-fig { padding: 16px 10px 14px; }
  .cta { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .card a { transition: none; }
  .card a:hover { transform: none; }
}

/* ------------------------ 相关阅读 ------------------------
   文章之间的互链。放在 FAQ 后面：读者读完疑问，正好顺路去下一篇。
   结构刻意轻：一行方向词 + 标题 + 导语，不做成又一组大卡片——
   这里要的是「顺路」，不是「再来一轮」。 */

.related { margin-top: 52px; }

.related h2 {
  font-family: var(--serif);
  font-size: 23px;
  margin: 0 0 14px;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-list a {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}

.related-list a:hover { border-color: #cfc9be; }

.rel-dir {
  display: block;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: .02em;
}

.rel-title {
  display: block;
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 600;
}

.rel-deck {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .related { margin-top: 40px; }
}