/* Tak — 极简个人博客。配色与开关灯参照 darioamodei.com */
@font-face {
  font-family: "Tak Latin";
  src: url("/fonts/latin-d6cbbd146d.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013, U+2022, U+2026, U+2032-2033, U+20AC, U+2122, U+2190, U+2192;
}
@font-face {
  font-family: "Tak Serif";
  src: url("/fonts/regular-c10ac3bbaa.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tak Serif";
  src: url("/fonts/bold-55e9657b4a.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ivory-light: #faf9f5;
  --ivory-medium: #f0eee6;
  --ivory-dark: #e8e6dc;
  --cloud-light: #d1cfc5;
  --cloud-medium: #b0aea5;
  --slate-light: #5e5d59;
  --slate-medium: #3d3d3a;
  --slate-dark: #1f1e1d;

  --bg: var(--ivory-medium);
  --text: var(--slate-dark);
  --text-2: var(--slate-light);
  --border: var(--cloud-light);
  --code-bg: var(--ivory-dark);

  --serif: "Tak Latin", "Tak Serif", Georgia, "Songti SC", "STSong", serif;
  --measure: 600px;
  --gutter: 1.25rem;
}
:root[data-color-mode="dark"] {
  --bg: var(--slate-dark);
  --text: var(--ivory-medium);
  --text-2: var(--cloud-medium);
  --border: var(--slate-light);
  --code-bg: #2c2b29;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-color-mode="light"]) {
    --bg: var(--slate-dark);
    --text: var(--ivory-medium);
    --text-2: var(--cloud-medium);
    --border: var(--slate-light);
    --code-bg: #2c2b29;
    color-scheme: dark;
  }
}

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

html {
  font-size: 19px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
}
@media (max-width: 600px) {
  html { font-size: 18px; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  line-break: strict;
  transition: background-color .25s ease, color .25s ease;
}

main, footer.site, header.site {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color .2s;
}
a:hover { color: var(--text-2); }

/* 页头：名字 + 开关灯 */
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.35rem;
}
header.site .brand {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  letter-spacing: 0;
}
header.site .brand:hover { color: inherit; }

.switch {
  position: relative;
  display: none;
  flex: none;
  width: 40px;
  height: 20px;
}
:root[data-color-mode] .switch { display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; appearance: none; }
.switch label {
  position: absolute;
  inset: 0;
  border: 1px solid var(--slate-dark);
  border-radius: 2rem;
  background: var(--ivory-light);
  cursor: pointer;
}
.switch label::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slate-dark);
  transition: transform .2s;
}
:root[data-color-mode="dark"] .switch label::before { transform: translateX(20px); }
.switch input:focus-visible + label { outline: 2px solid var(--text); outline-offset: 2px; }

/* 目录按钮与目录 */
.toc-btn {
  display: none;
  position: absolute;
  left: 0.6rem;
  top: 1.15rem;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}
:root[data-color-mode] .toc-btn { display: block; }
.toc-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.toc-btn .i-close, :root[data-toc="open"] .toc-btn .i-menu { display: none; }
:root[data-toc="open"] .toc-btn .i-close { display: block; }

.toc { display: none; }
:root[data-toc="open"] .toc { display: block; }
.toc-title { font-weight: 700; margin: 0 0 0.9rem; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 0.6rem; line-height: 1.45; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--text); }

@media (min-width: 1100px) {
  .toc {
    position: fixed;
    top: 6.4rem;
    left: 1.25rem;
    width: min(10rem, calc(50vw - var(--measure) / 2 - var(--gutter) - 2.5rem));
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    font-size: 0.95rem;
  }
}
@media (max-width: 1099px) {
  header.site:has(.toc-btn) { padding-left: calc(var(--gutter) + 2.4rem); }
  .toc-btn { left: calc(var(--gutter) - 10px); }
  .toc {
    position: fixed;
    inset: 4.4rem 0 0;
    z-index: 10;
    padding: 1rem var(--gutter) 2rem calc(var(--gutter) + 2.4rem);
    background: var(--bg);
    overflow-y: auto;
    font-size: 1.05rem;
  }
}

/* 正文区 */
main { padding-top: 2.4rem; padding-bottom: 2rem; }

h1, h2, h3 { font-weight: 700; letter-spacing: 0; }

.intro p { margin: 0 0 1.1em; }
.intro .tagline { color: var(--text-2); }
h2.section { font-size: 1.25rem; line-height: 1.5; margin: 2.4rem 0 0.7rem; }
.list { margin: 0; padding-left: 1.15em; }
.list li { margin: 0 0 0.55em; }
.list li::marker { color: var(--text); }
.empty { color: var(--text-2); margin: 0; }

.tag {
  display: inline-block;
  vertical-align: 0.15em;
  margin-left: 0.5em;
  padding: 0 0.45em;
  font-size: 0.62rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.post h1 {
  font-size: 2.75rem;
  line-height: 1.22;
  margin: 0;
}
.post .date {
  color: var(--text-2);
  font-size: 0.9rem;
  margin: 2rem 0 1.8rem;
}
@media (max-width: 600px) {
  main { padding-top: 1.8rem; }
  .post h1 { font-size: 2.05rem; line-height: 1.3; }
  .post .date { margin-top: 1.4rem; }
}

.prose p { margin: 0 0 1.15em; }
.prose h2 { font-size: 1.3rem; line-height: 1.5; margin: 2.2em 0 0.7em; }
.prose h3 { font-size: 1.08rem; line-height: 1.5; margin: 1.9em 0 0.6em; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.prose li { margin: 0.3em 0; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 1.1em;
  border-left: 2px solid var(--border);
  color: var(--text-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }
.prose img { max-width: 100%; height: auto; display: block; margin: 1.8em auto; }
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
  letter-spacing: 0;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.prose pre {
  background: var(--code-bg);
  padding: 0.9rem 1.1rem;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  line-height: 1.6;
  margin: 0 0 1.15em;
}
.prose pre code { background: none; padding: 0; font-size: 0.78rem; }
.signoff { margin-top: 2.6em !important; }

/* 页脚 */
footer.site {
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--text-2);
}
footer.site p { margin: 0; }
footer.site a { color: inherit; text-decoration-color: var(--border); }
footer.site a:hover { color: var(--text); }

::selection { background: var(--text); color: var(--bg); }