@charset "UTF-8";
/* ==========================================================================
   朝闻道 DaoPath — base.css
   设计语言：红色极简主义 × 包豪斯方块
   铁律：
     1. 世界上只有方块。全局 border-radius: 0，禁止圆形、禁止斜角。
     2. 只有三种颜色：红、墨、纸。没有渐变，没有柔光，没有模糊。
     3. 一切对齐到网格。2px 实线是唯一的装饰。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  /* 色彩 —— 勃艮第红 / 墨 / 纸 */
  --red:        #7b1f2e;
  --red-hot:    #9e2b3d;
  --red-deep:   #4a1019;
  --red-light:  #d08b96;
  --ink:        #101010;
  --ink-2:      #4a4a4a;
  --ink-3:      #8c8c8c;
  --paper:      #f3f0e9;
  --paper-2:    #ffffff;
  --line:       #101010;
  --line-soft:  rgba(16, 16, 16, .16);
  --line-paper: rgba(243, 240, 233, .28);

  /* 字体 —— 不加载任何外部字体，纯系统字体，零请求 */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial,
               "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC",
                "SimSun", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas,
               "Courier New", "PingFang SC", "Microsoft YaHei",
               "Noto Sans SC", monospace;

  /* 版心与间距 */
  --gutter: clamp(18px, 4vw, 44px);
  --max: 1480px;
  --narrow: 900px;
  --rule: 2px;
  --rule-thin: 1px;

  /* 动效 */
  --ease: cubic-bezier(.2, .85, .25, 1);
  --dur: .55s;
  --dur-fast: .22s;

  /* 层级 */
  --z-head: 100;
  --z-nav: 120;
}

/* --------------------------------------------------------------------------
   2. 复位
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; border-radius: 0; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

strong, b { font-weight: 800; }

hr {
  border: 0;
  border-top: var(--rule) solid var(--line);
  margin: 0;
}

::selection { background: var(--red); color: var(--paper-2); }

/* 焦点：只允许方块描边 */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. 排版
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-sans);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.03em;
  text-transform: none;
}

.t-hero   { font-size: clamp(3.6rem, 15vw, 12.5rem); }
.t-xxl    { font-size: clamp(2.4rem, 6.4vw, 5.2rem); }
.t-xl     { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
.t-lg     { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.t-md     { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }

.lead {
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 62ch;
}

.body-sm { font-size: .9375rem; line-height: 1.85; }

.mono {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}

.serif { font-family: var(--font-serif); }

/* 竖排——给古体诗用。依然是方块。 */
.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .18em;
}

/* --------------------------------------------------------------------------
   4. 工具类
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow { max-width: var(--narrow); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 999;
  transform: translateY(-140%);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
}
.skip-link:focus { transform: translateY(0); }

.c-red   { color: var(--red); }
.c-ink2  { color: var(--ink-2); }
.c-paper { color: var(--paper); }
.bg-red  { background: var(--red); color: var(--paper-2); }
.bg-ink  { background: var(--ink); color: var(--paper); }
.bg-paper2 { background: var(--paper-2); }

.rule-top    { border-top: var(--rule) solid var(--line); }
.rule-bottom { border-bottom: var(--rule) solid var(--line); }

.stack > * + * { margin-top: var(--stack, 20px); }

/* 小方块标记：品牌的基本单位 */
.sq {
  display: inline-block;
  width: .62em;
  height: .62em;
  background: var(--red);
  flex: none;
}
.sq--ink { background: var(--ink); }
.sq--paper { background: var(--paper); }

/* 无障碍：尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}