/* 《凭什么》— A stark, editorial design system.
   Ink on bone. One drop of blood. No ornament.
   Reimagined from the 医美神话叙事学 base tokens toward a colder register. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;700;900&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* — families — */
  --f-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  --f-serif:   "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-sans:    "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* — palette: bone / ink / blood — */
  --bone:     #F2EEE4;   /* warm paper */
  --bone-2:   #E8E2D3;   /* deeper paper */
  --bone-3:   #D9D1BE;
  --cream:    #FAF7EF;   /* soft white */
  --ink:      #141014;   /* main ink */
  --ink-2:    #2A242B;
  --ink-3:    #534A55;
  --ink-4:    #8C8290;
  --ink-5:    #B8B0B8;

  --blood:    #B01822;   /* single accent — seal red */
  --blood-d:  #7F1018;
  --blood-l:  #D84450;

  --seal:     #C4302B;   /* chop/stamp red */

  /* — semantic — */
  --bg:        var(--bone);
  --bg-2:      var(--bone-2);
  --paper:     var(--cream);
  --fg:        var(--ink);
  --fg-2:      var(--ink-2);
  --fg-muted:  var(--ink-3);
  --fg-faint:  var(--ink-4);
  --fg-ghost:  var(--ink-5);
  --accent:    var(--blood);
  --accent-d:  var(--blood-d);
  --rule:      rgba(20,16,20,0.18);
  --rule-soft: rgba(20,16,20,0.08);

  /* dark — used for cover, dialog mockups */
  --dark-bg:   #0D0A0D;
  --dark-fg:   #F2EEE4;

  /* — spacing (8pt) — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px; --s11: 192px;

  /* — type scale — */
  --t-hero:   clamp(120px, 20vw, 280px);
  --t-d1:     clamp(72px, 10vw, 140px);
  --t-d2:     clamp(48px, 6vw, 80px);
  --t-h1:     clamp(40px, 5vw, 64px);
  --t-h2:     32px;
  --t-h3:     22px;
  --t-body-l: 19px;
  --t-body:   16px;
  --t-sm:     14px;
  --t-xs:     12px;
  --t-micro:  11px;

  --lh-tight: 0.95;
  --lh-snug:  1.25;
  --lh-read:  1.85;

  --ls-hero:   -0.04em;
  --ls-tight:  -0.02em;
  --ls-wide:   0.18em;
  --ls-widest: 0.28em;

  --max-prose: 680px;
  --max-wide: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-serif);
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ornamental hairline block */
.rule      { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule-soft { height: 1px; background: var(--rule-soft); border: 0; margin: 0; }
.rule-ink  { height: 2px; background: var(--ink); border: 0; margin: 0; }

/* eyebrow label */
.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

/* punctuation-as-art helpers */
.mark-q {
  font-family: var(--f-serif);
  font-weight: 900;
  color: var(--blood);
  line-height: 1;
}

/* scrollbar calm */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--blood); outline-offset: 3px; }

/* selection */
::selection { background: var(--blood); color: var(--cream); }