/* ==========================================================================
   设计 02 · 杂志编辑风
   纸感暖白底 / 衬线大标题 / 细分割线 / 单一朱红点缀色
   夜版为深色「夜间版」
   ========================================================================== */

:root {
  --font-display: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun",
    Georgia, "Times New Roman", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  --wrap: 1180px;
  --measure: 40rem;
  --radius: 2px;
  --gap: 28px;

  /* 纸感浅色 */
  --paper: #faf7f0;
  --paper-2: #f2ede1;
  --surface: #fffdf8;
  --ink: #1a1712;
  --ink-2: #5b5446;
  --ink-3: #8d8577;
  --rule: #ded6c5;
  --rule-strong: #c2b8a3;
  --accent: #b0331d;
  --accent-soft: #f6e7e1;
  --shadow: 0 1px 1px rgba(26, 23, 18, 0.04), 0 10px 30px rgba(26, 23, 18, 0.06);

  /* 兼容底座遗留变量名 */
  --bg: var(--paper);
  --bg-elev: var(--surface);
  --bg-soft: var(--paper-2);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --border: var(--rule);
  --border-strong: var(--rule-strong);
}

[data-theme="dark"] {
  --paper: #14120f;
  --paper-2: #1c1a15;
  --surface: #191712;
  --ink: #ece6da;
  --ink-2: #a79e8d;
  --ink-3: #7a7264;
  --rule: #2f2b23;
  --rule-strong: #464033;
  --accent: #e2705a;
  --accent-soft: #2a1e19;
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* 正文里可能有原始 HTML 的 <video>（远程 mp4）。它的固有尺寸要等元数据到达才确定，
   没限宽的话会把整页撑破——实测 390px 视口下溢出 1713px。 */
iframe {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

code,
pre,
kbd {
  font-family: var(--font-mono);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  z-index: 100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   刊头 masthead
   -------------------------------------------------------------------------- */

.masthead {
  padding: 26px 0 0;
}

.masthead-inner {
  /* 主题切换器的下拉面板锚在这一层 —— 见文件末尾「主题切换器」一节 */
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.masthead-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.masthead-right {
  align-items: flex-end;
}
.issue-no {
  color: var(--accent);
  font-weight: 600;
}
.issue-date {
  font-variant-numeric: tabular-nums;
}

.masthead-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.logo-main {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  padding-left: 0.18em;
  color: var(--ink);
}
.logo-sub {
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--font-mono);
  padding-left: 0.42em;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2); /* 同 .theme-switch-item：可点控件不用最弱的 --ink-3 */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.theme-toggle:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.theme-toggle-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: background 0.18s, box-shadow 0.18s;
}
[data-theme="dark"] .theme-toggle-icon {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.rule-stack {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rule {
  display: block;
  width: 100%;
}
.rule-heavy {
  height: 3px;
  background: var(--ink);
}
.rule-hair {
  height: 1px;
  background: var(--rule);
}

/* 栏目条 */
.section-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 14px;
  border-bottom: 1px solid var(--rule);
}
.nav-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 26px 12px 0;
  margin-right: 26px;
  color: var(--ink-2);
  transition: color 0.18s;
}
.nav-link + .nav-link {
  border-left: 1px solid var(--rule);
  padding-left: 26px;
}
.nav-no {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.nav-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.nav-en {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nav-link:hover {
  color: var(--ink);
}
.nav-link.is-active {
  color: var(--accent);
}
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 26px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

.site-main {
  display: block;
  padding-bottom: 80px;
}

/* --------------------------------------------------------------------------
   通用区块
   -------------------------------------------------------------------------- */

.section {
  margin-top: 64px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 26px;
  border-bottom: 3px solid var(--ink);
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.section-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.section-more {
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s;
}
.section-more:hover {
  border-color: var(--accent);
}

.tag {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

.btn {
  display: inline-block;
  padding: 11px 26px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  transition: background 0.18s, color 0.18s;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   首页 · 封面文章
   -------------------------------------------------------------------------- */

.lead-section {
  margin-top: 46px;
}

.lead {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 46px;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.lead-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lead-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.kicker-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.kicker-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.lead-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.lead-title a {
  transition: color 0.18s;
}
.lead-title a:hover {
  color: var(--accent);
}
.lead-dek {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 34em;
}
.lead-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.byline-sep {
  color: var(--rule-strong);
}
.lead-more {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.lead-figure {
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.lead-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.lead-figure:hover img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   文章卡片
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.post-card {
  border-top: 2px solid var(--ink);
}
.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-cover {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.card-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.post-card:hover .card-cover img {
  transform: scale(1.03);
}
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 0 0;
}
.card-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.card-index {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.18s;
}
.post-card:hover .card-title {
  color: var(--accent);
}
.card-dek {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   首页 · 简讯列表
   -------------------------------------------------------------------------- */

.brief-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.brief-item {
  border-bottom: 1px solid var(--rule);
}
.brief-link {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 18px 4px;
  transition: background 0.18s, padding 0.18s;
}
.brief-link:hover {
  background: var(--paper-2);
  padding-left: 12px;
  padding-right: 12px;
}
.brief-no {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.brief-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.brief-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
.brief-link:hover .brief-title {
  color: var(--accent);
}
.brief-dek {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brief-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.brief-cat {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   首页 · 栏目 / 关于
   -------------------------------------------------------------------------- */

.column-grid {
  display: grid;
  /* min(210px, 100%)：视口比 210px 还窄时让轨道跟着缩，
     否则 minmax 的下限会把整页顶出横向滚动条。 */
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.column-card {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px;
  /* 卡内摘要行是 nowrap，得允许它比内容更窄，否则撑破网格。 */
  min-width: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background 0.18s;
}
.column-card:hover {
  background: var(--paper-2);
}
.column-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.column-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  flex: 1;
}
.column-card:hover .column-name {
  color: var(--accent);
}
.column-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* 栏目总览用的大卡 */
.column-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.column-card-lg {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 24px;
}
.column-card-lg .column-no {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.column-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.column-card-lg .column-name {
  font-size: 22px;
}
.column-samples {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.column-sample {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.column-sample::before {
  content: "·";
  margin-right: 8px;
  color: var(--rule-strong);
}
.column-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.about-block {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.about-lead {
  margin: 0;
  max-width: 46em;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.95;
  color: var(--ink-2);
}
.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.fact {
  padding: 20px 18px;
  border-right: 1px solid var(--rule);
}
.fact:last-child {
  border-right: 0;
}
.fact dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fact dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.honor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.honor {
  padding: 6px 14px;
  border: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   首页 · 本刊主笔（关于我）
   -------------------------------------------------------------------------- */

.editor {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.editor-figure {
  margin: 0;
}
.editor-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--rule);
  /* 老照片式的单色处理，和纸感底色更贴 */
  filter: grayscale(12%) contrast(1.02);
}
.editor-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.editor-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.editor-title {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.editor-roles {
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.editor-text {
  margin: 0 0 14px;
  max-width: 44em;
  font-family: var(--font-display);
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--ink-2);
}
.editor-honors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   首页 · 合作领域（服务）
   -------------------------------------------------------------------------- */

.svc-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.svc-col {
  padding-top: 18px;
  border-top: 3px solid var(--ink);
}
.svc-col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  color: var(--accent);
  border: 1px solid var(--rule-strong);
}
.svc-col-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.svc-col-detail {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   首页 · 作品集
   -------------------------------------------------------------------------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 28px;
}

.work-figure {
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.work-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.work:hover .work-figure img {
  transform: scale(1.03);
}

.work-body {
  padding-top: 14px;
}
.work-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.work-title {
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}
.work-title a:hover {
  color: var(--accent);
}
.work-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   首页 · 荣誉与活动
   -------------------------------------------------------------------------- */

.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
}

.gal {
  margin: 0;
}
.gal img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  filter: grayscale(18%) contrast(1.02);
  transition: filter 0.4s ease;
}
.gal:hover img {
  filter: none;
}
.gal figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}
.gal-kind {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.gal-title {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   首页 · 课程
   -------------------------------------------------------------------------- */

.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
}

.course {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--surface);
  transition: border-color 0.2s;
}
.course:hover {
  border-color: var(--rule-strong);
}

.course-figure {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-2);
}
.course-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}
.course-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.course-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
}
.course-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}
.course-desc {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
}
.course-meta {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.course-dot {
  padding: 0 6px;
}

/* --------------------------------------------------------------------------
   首页 · 联络
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  /* 260px 起，1180px 容器里正好 4 列 —— 5 列的话
     yeah126139163@163.com 会被 overflow-wrap 从中间掰断成两行，很难看 */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}

.contact {
  padding: 14px 0 4px;
  border-top: 1px solid var(--rule);
}
.contact-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-value {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
a.contact-value:hover {
  color: var(--accent);
}
.contact-qr {
  display: block;
  width: 120px;
  height: 120px;
  margin-top: 14px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 4px;
}

/* --------------------------------------------------------------------------
   内页通用
   -------------------------------------------------------------------------- */

.page-wrap {
  padding-top: 48px;
}
.page-header {
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 3px solid var(--ink);
}
.page-kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.page-desc {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.year-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.year-jump-item {
  padding: 4px 14px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.year-jump-item:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.breadcrumb a {
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
}
.breadcrumb a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.crumb-sep {
  color: var(--rule-strong);
}

/* --------------------------------------------------------------------------
   归档 · 总目录
   -------------------------------------------------------------------------- */

.year-block {
  margin-bottom: 56px;
  scroll-margin-top: 24px;
}
.year-title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.year-num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.year-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive-item {
  display: grid;
  /* 标题列用 minmax(0, 1fr)：默认的 1fr 下限是 min-content，
     遇到长标题（无空格的长串）会把整行顶宽。 */
  grid-template-columns: 44px 52px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 11px 6px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.16s;
}
.archive-item:hover {
  background: var(--paper-2);
}
.archive-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rule-strong);
  font-variant-numeric: tabular-nums;
}
.archive-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.archive-link {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  /* 有些标题含无从断行的长串（英文产品名、版本号连写等），
     光靠 minmax(0, 1fr) 缩轨道还不够——文字本身也得允许断。 */
  overflow-wrap: anywhere;
}
.archive-item:hover .archive-link {
  color: var(--accent);
}
.archive-cat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   文章页
   -------------------------------------------------------------------------- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 60;
}
#reading-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

.article-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 64px;
  padding-top: 44px;
  align-items: start;
  /* 长串不只出现在正文里：侧栏目录的章节标题、文章导语、作者卡都可能是
     一长串没有断行机会的文字，窄屏会把整页顶出横向滚动条。 */
  overflow-wrap: anywhere;
}
/* 但代码块必须保持不换行——它靠内部横向滚动，断行会把代码排坏。 */
.article-wrap pre,
.article-wrap pre code {
  overflow-wrap: normal;
  white-space: pre;
}
.article-main {
  min-width: 0;
  max-width: var(--measure);
}

.article-header {
  padding-bottom: 26px;
  border-bottom: 3px solid var(--ink);
}
.article-kicker {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker-sep {
  color: var(--rule-strong);
}
.article-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.article-dek {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-2);
}
.article-byline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.byline-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.byline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.byline-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.byline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

.article-cover {
  margin: 34px 0 0;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.article-cover img {
  display: block;
  width: 100%;
}

/* 正文排版 */
.prose {
  margin-top: 36px;
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--ink);
  /* 正文里有 linkify 自动识别的裸 URL，以及无断行机会的长串。
     不给断行口的话，窄屏会被它们顶出横向滚动条（实测单条 URL 溢出 353px）。 */
  overflow-wrap: anywhere;
}
.prose > *:first-child {
  margin-top: 0;
}
/* 少数文章的正文以 H1 开头（标题取自文件名，首个 H1 是独立章节）。
   这里让它与 H2 同级呈现，避免退化成浏览器默认样式。 */
.prose h1,
.prose h2 {
  margin: 2.6em 0 1em;
  padding-top: 0.7em;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.prose h1::before,
.prose h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 0.7em;
  background: var(--accent);
}
.prose h3 {
  margin: 2.1em 0 0.8em;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.prose h4 {
  margin: 1.8em 0 0.7em;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
}
.prose p {
  margin: 0 0 1.25em;
}
.prose a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color 0.18s;
}
.prose a:hover {
  border-color: var(--accent);
}
.prose ul,
.prose ol {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
}
.prose li {
  margin: 0.4em 0;
}
.prose li::marker {
  color: var(--accent);
}
.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 17px;
}
.prose blockquote p:last-child {
  margin-bottom: 0;
}
.prose img {
  display: block;
  margin: 1.8em auto;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.prose table {
  /* 宽表格自带横向滚动：display:block 把表格变成可滚动块，
     内部匿名表格仍按内容宽度铺开，超出即滚，不会把整页撑破。 */
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-size: 14px;
}

/* 保险：正文里若出现原始 HTML 的裸 <pre>，也得能横向滚动。 */
.prose pre {
  overflow-x: auto;
  max-width: 100%;
}
.prose th,
.prose td {
  padding: 10px 14px;
  border: 1px solid var(--rule);
  text-align: left;
}
.prose th {
  background: var(--paper-2);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.prose hr {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.prose code {
  padding: 0.15em 0.42em;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 0.88em;
}
.prose pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

/* 代码块：shiki 双主题 */
.code-block {
  position: relative;
  margin: 1.8em 0;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  overflow: hidden;
}
.code-block pre {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
}
.code-block code {
  font-size: inherit;
}
.code-block .shiki,
.code-block .shiki span {
  color: var(--shiki-light);
}
.code-block .shiki {
  background-color: var(--shiki-light-bg, var(--paper-2));
}
[data-theme="dark"] .code-block .shiki,
[data-theme="dark"] .code-block .shiki span {
  color: var(--shiki-dark);
}
[data-theme="dark"] .code-block .shiki {
  background-color: var(--shiki-dark-bg, var(--paper-2));
}
/* 没有语言标记的代码块不显示角标——否则会渲染出一个空的背景方块 */
.code-block:not([data-lang])::before {
  display: none;
}
.code-block::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 10px;
  background: var(--rule);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 行号 —— 原站 markdown.lineNumbers 的等价物。
   shiki 把每一行输出成 <span class="line">，行与行之间原本靠一个换行断开。
   这里不动那层换行，只把 .line 变成 inline-block：它自带一个 ::before 计数器，
   正好落在换行让出的那一行上。改成 display:block 反而要多压一次 white-space，
   而且会多出空行。 */
.code-block .shiki code {
  counter-reset: shiki-line;
}
.code-block .line {
  display: inline-block;
  counter-increment: shiki-line;
}
.code-block .line::before {
  content: counter(shiki-line);
  display: inline-block;
  box-sizing: border-box;
  width: 3em;
  padding-right: 1.4em;
  text-align: right;
  /* 用主题里现成的弱化色，而不是 currentColor + opacity：
     对比度探针量的是计算样式里的 color，opacity 它看不见 ——
     写成 opacity 就会「看着达标、实际发灰」。 */
  color: var(--ink-3);
  user-select: none;
}

/* 文章结尾 */
.article-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.end-mark {
  color: var(--accent);
  font-size: 12px;
}
.end-tags {
  display: flex;
  gap: 10px;
}
.end-tag {
  padding: 3px 12px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.end-tag:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.article-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
}
.pager-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  transition: border-color 0.18s, background 0.18s;
}
.pager-item:not(.is-empty):hover {
  border-color: var(--ink);
  background: var(--paper-2);
}
.pager-next {
  text-align: right;
}
.pager-dir {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.pager-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.related {
  margin-top: 64px;
}
.related .section-head {
  border-bottom-width: 1px;
}
.related .section-title {
  font-size: 20px;
}

/* 侧栏 */
.article-side {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.toc {
  border-top: 3px solid var(--ink);
  padding-top: 16px;
}
.toc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.toc-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.toc-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.toc-item {
  border-bottom: 1px solid var(--rule);
}
.toc-item a {
  display: flex;
  gap: 10px;
  padding: 8px 2px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  transition: color 0.16s, padding 0.16s;
}
.toc-item a:hover,
.toc-item.is-active a {
  color: var(--accent);
  padding-left: 6px;
}
.toc-no {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rule-strong);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.toc-l3 a {
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.toc-l3 .toc-no {
  opacity: 0.6;
}

.side-card {
  padding: 22px;
  border: 1px solid var(--rule);
  background: var(--surface);
  text-align: center;
}
.side-kicker {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.side-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.side-name {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.side-desc {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
}
.side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   系列连载
   --------------------------------------------------------------------------
   一个装了不止一篇文章的目录 = 杂志里的「连载」。视觉语汇跟着本主题走：
   细线分格（同 .column-grid）而不是圆角卡片，编号用衬线大字（同目次），
   信息块靠 3px 墨线压顶（同 .toc / .fact-strip）。
   配色一律走 token，夜版靠 [data-theme="dark"] 换 token 生效，所以这里
   不出现按类名写的深色覆盖。
   新组件里所有文字只用 --ink / --ink-2 / --accent：--ink-3 在纸上只有
   3.4:1，做装饰线可以，做成读者要读的信息就不合格了。
   -------------------------------------------------------------------------- */

/* --- 连载卡：首页 / 栏目页 / 连载总览共用 -------------------------------- */

.series-grid {
  display: grid;
  /* min(340px, 100%)：视口比一格还窄时轨道跟着缩，否则 minmax 下限顶出横向滚动条 */
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.series-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
}
.series-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 卡内的样本标题是 nowrap 的，得允许它比格子更窄 */
  min-width: 0;
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background 0.18s;
}
.series-card:hover {
  background: var(--paper-2);
}
.series-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.series-card-no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.series-card-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.series-card-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.series-card-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  transition: color 0.18s;
}
.series-card:hover .series-card-title {
  color: var(--accent);
}
.series-card-dek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.series-card-list {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.series-card-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* 样本标题必须单行截断：连载标题动辄三四十字，两行会把卡撑得比栏目卡高一大截。
   省略号要落在真正承载文字的那一层上 —— 挂在 flex 容器上是画不出来的。 */
.series-card-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.series-card-order {
  flex: none;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.series-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* --- 连载页 -------------------------------------------------------------- */

.series-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 64px;
  padding-top: 44px;
  align-items: start;
  overflow-wrap: anywhere;
}
.series-main {
  min-width: 0;
}
.series-side {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.series-header {
  margin-bottom: 46px;
}
.series-lead {
  margin: 0 0 16px;
  max-width: 46em;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-2);
}
/* 刊期式的一行汇总：篇数 / 时长 / 跨度，全靠分隔符串起来，不换行成三行 */
.series-runline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* 分隔符本身不承载信息，沿用 .kicker-sep / .byline-sep 那一档弱色 */
.series-runline-sep {
  color: var(--rule-strong);
}

.series-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.series-index-item {
  border-bottom: 1px solid var(--rule);
}
.series-index-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 18px 4px;
  transition: background 0.18s, padding 0.18s;
}
.series-index-link:hover {
  background: var(--paper-2);
  padding-left: 12px;
  padding-right: 12px;
}
.series-index-no {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.series-index-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.series-index-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  transition: color 0.18s;
}
.series-index-link:hover .series-index-title {
  color: var(--accent);
}
.series-index-dek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}
.series-index-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  white-space: nowrap;
}

.series-facts,
.series-siblings {
  border-top: 3px solid var(--ink);
  padding-top: 16px;
}
.series-facts dl {
  margin: 0;
}
.series-facts dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.series-facts dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.series-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.series-side-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s;
}
.series-side-link:hover {
  border-color: var(--accent);
}
.series-siblings ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.series-siblings li {
  border-bottom: 1px solid var(--rule);
}
.series-siblings a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 2px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  transition: color 0.16s, padding 0.16s;
}
.series-siblings a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.series-sibling-title {
  min-width: 0;
}
.series-sibling-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* --- 文章页：眉部连载标签 + 侧栏「本连载」目录 ---------------------------- */

/* 连载名在文章页眉部是个链接，别让它带上 .prose a 那套下划线 */
a.kicker-series {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s;
}
a.kicker-series:hover {
  border-color: currentColor;
}

.series-nav {
  border-top: 3px solid var(--ink);
  padding-top: 16px;
}
.series-nav-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.series-nav-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.series-nav-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}
.series-nav-title {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  transition: color 0.16s;
}
.series-nav-title:hover {
  color: var(--accent);
}
.series-nav-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.series-nav-item {
  border-bottom: 1px solid var(--rule);
}
.series-nav-item a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 2px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  transition: color 0.16s, padding 0.16s;
}
.series-nav-item a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.series-nav-no {
  flex: none;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.series-nav-text {
  /* 撑满剩余宽度，好让「当前」那枚标记贴到行尾而不跟着标题文字跑 */
  flex: 1;
  min-width: 0;
}
/* 当前篇：底色 + 字色 + 一句「当前」。只有颜色是不够的（弱视、打印都是灰的），
   所以标记要落成文字；排在 :hover 之后，同优先级下覆盖掉悬停的位移。 */
.series-nav-item.is-current a {
  padding-left: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.series-nav-item.is-current a::after {
  content: "当前";
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}
/* 目录最后一条已经带了下细线，这里再画一条就成了双线 */
.series-nav-all {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s;
}
.series-nav-all:hover {
  border-color: var(--accent);
}

/* 连载最后一篇下面那句收束语：边注形态（同 .prose blockquote），不做卡片 */
.series-end {
  margin: 18px 0 0;
  padding: 12px 0 12px 20px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2);
}
.series-end a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* --- 栏目页两段式 / 首页连载版块的收尾行 -------------------------------- */

.page-section {
  margin-top: 54px;
}
.page-section:first-of-type {
  margin-top: 0;
}
.section-foot {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   检索
   -------------------------------------------------------------------------- */

.search-box {
  max-width: 720px;
}
.search-input {
  width: 100%;
  padding: 16px 4px;
  border: 0;
  border-bottom: 3px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  outline: none;
  transition: border-color 0.18s;
}
.search-input::placeholder {
  color: var(--ink-3);
  font-size: 20px;
}
.search-input:focus {
  border-color: var(--accent);
}
.search-hint {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.search-results {
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}
.sr-item {
  display: block;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.16s, padding 0.16s;
}
.sr-item:hover {
  background: var(--paper-2);
  padding-left: 14px;
  padding-right: 14px;
}
.sr-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.sr-cat {
  color: var(--accent);
}
.sr-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}
.sr-item:hover .sr-title {
  color: var(--accent);
}
.sr-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2);
}
.sr-empty {
  padding: 40px 4px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-3);
}
mark {
  padding: 0 3px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

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

.center-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 90px 28px 120px;
}
.notfound-code {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 150px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--paper-2);
  -webkit-text-stroke: 2px var(--rule-strong);
}
.center-page .page-title {
  margin-top: 10px;
}
.center-page .page-desc code {
  padding: 2px 8px;
  border: 1px solid var(--rule);
  font-size: 0.9em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.hero-actions.center {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   版权页 colophon
   -------------------------------------------------------------------------- */

.colophon {
  margin-top: 40px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.colophon-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 30px;
  align-items: start;
  padding-top: 34px;
  padding-bottom: 44px;
}
.colophon-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.colophon-brand strong {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.1em;
}
.colophon-brand span {
  font-size: 12px;
  color: var(--ink-2);
}
.colophon-social {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.social-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.social-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.colophon-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.colophon-meta a:hover {
  color: var(--accent);
}

/* 版面索引 —— 文章页上没有别的路能回到首页的「作品 / 荣誉与活动」，
   那些锚点只活在首页内部导航里，所以版权页顶上补一条刊头式的索引。
   只写上下 padding，左右交给 .wrap（窄屏会自动收）。 */
.colophon-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  padding-top: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.colophon-index-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.colophon-index-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.colophon-index-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.colophon-index-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.idx-no {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.colophon-index-link:hover .idx-no {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .article-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .article-side {
    position: static;
  }
  .article-main {
    max-width: none;
  }
  /* 连载页与文章页同一个折法：侧栏回到文档流，本连载目录全宽照样能读 */
  .series-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .series-side {
    position: static;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 首页个人版块：三栏压两栏，荣誉墙四栏压三栏 */
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .masthead-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: center;
  }
  .masthead-side {
    flex-direction: row;
    gap: 14px;
    align-items: center;
  }
  .masthead-right {
    align-items: center;
  }
  .lead {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .lead-figure {
    order: -1;
  }
  .section-bar {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .section-bar::-webkit-scrollbar {
    display: none;
  }
  .nav-link {
    padding-right: 16px;
    margin-right: 16px;
  }
  .nav-link + .nav-link {
    padding-left: 16px;
  }
  .nav-en {
    display: none;
  }
  .fact-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .fact:nth-child(2) {
    border-right: 0;
  }
  .fact:nth-child(1),
  .fact:nth-child(2) {
    border-bottom: 1px solid var(--rule);
  }
  .colophon-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .colophon-meta {
    align-items: flex-start;
  }
  .brief-link {
    grid-template-columns: 34px 1fr;
    gap: 14px;
  }
  .brief-meta {
    grid-column: 2;
    justify-content: flex-start;
  }
  /* 连载目录行：右侧那列时长/日期挤不进就整列挪到标题下面横排
     （同 .brief-meta 的处理），不学默认主题那样直接隐藏 —— 日期在连载页上
     是判断「这条线还在不在写」的唯一线索 */
  .series-index-link {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
  }
  .series-index-no {
    font-size: 20px;
  }
  .series-index-meta {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .archive-item {
    grid-template-columns: 38px 48px minmax(0, 1fr);
    gap: 10px;
  }
  .archive-cat {
    display: none;
  }
  /* 首页个人版块：主笔栏改上下排，服务三栏改单栏 */
  .editor {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .editor-figure {
    max-width: 180px;
  }
  .svc-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .gal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .course-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .wrap {
    padding: 0 20px;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  /* 作品集单栏；课程卡改上下排（240px 的图栏在窄屏放不下） */
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .course {
    grid-template-columns: minmax(0, 1fr);
  }
  .course-figure img {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .contact-qr {
    width: 96px;
    height: 96px;
  }
  .article-pager {
    grid-template-columns: 1fr;
  }
  .pager-next {
    text-align: left;
  }
  .logo-main {
    font-size: 32px;
  }
  .column-grid,
  .column-grid-lg {
    grid-template-columns: 1fr;
  }
  /* 连载：编号列再收窄，标题降一档字号 —— 320px 下长连载名（四十几个字）
     不换行控制就会顶出破口 */
  .series-index-link {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 2px;
  }
  .series-index-no {
    font-size: 18px;
  }
  .series-index-title {
    font-size: 17px;
  }
  .series-card {
    padding: 20px 16px;
  }
  .series-card-title {
    font-size: 19px;
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* 栏目条一行放不下时换行——否则最后一项会把整页顶出横向滚动条。
     同时收窄项间距，换行后不至于太松散。 */
  .section-bar {
    flex-wrap: wrap;
  }
  .nav-link {
    padding: 10px 14px 10px 0;
    margin-right: 14px;
  }
  .nav-link + .nav-link {
    padding-left: 14px;
  }
}

@media print {
  .masthead,
  .colophon,
  .article-side,
  .article-pager,
  .reading-progress {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   主题切换器（由核心注入，这里只负责杂志风的皮肤）
   同一批文章有两套排版，切换器让读者自己挑。
   ========================================================================== */

.theme-switch {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
}

/* <summary> 自带的小三角要去掉，换成自己画的折角箭头 */
.theme-switch-trigger,
.theme-hero-trigger {
  list-style: none;
  cursor: pointer;
}
.theme-switch-trigger::-webkit-details-marker,
.theme-hero-trigger::-webkit-details-marker {
  display: none;
}
.theme-switch-trigger::marker,
.theme-hero-trigger::marker {
  content: '';
}

/* 控件文字用 --ink-2 而不是 --ink-3。
 * --ink-3 是给「装饰性元信息」的弱色（日版对比度 3.4、夜版 3.9），
 * 用来做正文以外的点缀没问题；但切换器和夜版开关是**可点击的控件**，
 * 弱到这个程度会让人看不出它能点。--ink-2 两版都是 7.0 左右，
 * 既够醒目，又仍比正文低一档。 */
.theme-switch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.theme-switch-trigger:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.theme-switch-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-switch-label {
  text-transform: uppercase;
}
.theme-switch-current {
  color: var(--ink);
  font-weight: 600;
}
.theme-switch-caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s;
}
.theme-switch-picker[open] .theme-switch-caret {
  transform: rotate(-135deg) translate(-1px, -1px);
}

/* 面板锚在**刊头内层容器**上，而不是按钮上。
   按钮可能贴在左边（窄屏），锚按钮的话右对齐的面板会伸出屏幕左侧；
   锚容器就永远是「贴着容器右缘往左展开」，任何宽度都不会横向溢出。 */
.theme-switch-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 2px;
  width: min(280px, calc(100vw - 44px));
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.theme-switch-panel-title {
  padding: 2px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.theme-switch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 0.18s, background 0.18s;
}
.theme-switch-item:hover {
  color: var(--ink);
  background: var(--accent-soft);
}
.theme-switch-item.is-current {
  color: var(--accent);
  background: var(--accent-soft);
}
.theme-switch-dot {
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.theme-switch-item.is-current .theme-switch-dot {
  opacity: 1;
}
.theme-switch-name {
  flex: 1;
  min-width: 0;
}
.theme-switch-state {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* 首页上的大块版：同样收成一个按钮，展开才是那排卡片 */

.theme-hero {
  width: 100%;
  max-width: var(--wrap);
  margin: 64px auto 0;
  padding: 0 28px;
}
.theme-hero-head {
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 3px solid var(--ink);
}
.theme-hero-kicker {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.theme-hero-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.theme-hero-note {
  margin: 0;
  max-width: var(--measure);
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* 首页这处不浮层：展开就把版面撑开，不会盖住页脚 */
.theme-hero-picker {
  display: block;
}
.theme-hero-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 0.18s, transform 0.18s;
}
.theme-hero-trigger:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.theme-hero-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-hero-trigger-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.theme-hero-trigger-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.theme-hero-caret {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s;
}
.theme-hero-picker[open] .theme-hero-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.theme-hero-panel {
  margin-top: 18px;
}
.theme-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 0.18s, transform 0.18s;
}
.theme-card:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}
.theme-card.is-current {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.theme-card-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.theme-card.is-current .theme-card-name {
  color: var(--accent);
}
.theme-card-desc {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.theme-card-flag {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.theme-card.is-current .theme-card-flag {
  color: var(--accent);
}

@media (max-width: 860px) {
  /* 刊头在窄屏折成单列，右侧这一组（日期 + 切换器 + 夜版开关）允许换行，
     否则 320px 下会横向溢出 */
  .masthead-side {
    flex-wrap: wrap;
    justify-content: center;
  }
  .theme-hero {
    margin-top: 48px;
    padding: 0 20px;
  }
  .theme-hero-title {
    font-size: 22px;
  }
  .theme-hero-grid {
    grid-template-columns: 1fr;
  }
}