/*******************************************************************************
CUSTOM STYLES
*******************************************************************************/

/*
 * Self-hosted CJK serif fonts keep Chinese typography consistent on iOS,
 * macOS, Windows, and Linux. Latin glyphs still come from Tufte's et-book.
 */
@font-face {
  font-family: "FQY Source Han Serif";
  src: url("/assets/fonts/source-han-serif-sc-regular-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FQY Source Han Serif";
  src: url("/assets/fonts/source-han-serif-sc-semibold-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

html,
body {
  font-family: et-book, "FQY Source Han Serif", "Source Han Serif SC", "Songti SC", STSong, "Noto Serif CJK SC", serif;
}

/* Homepage hero */
.home-hero {
  width: 55%;
  margin-bottom: 3rem;
}

.home-hero > h2 {
  margin: 0 0 1rem;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.home-hero > p {
  width: 100%;
  margin: 0.75rem 0;
  font-size: 1.25rem;
  line-height: 1.65;
}

.homepage-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1.1rem;
  margin-top: 1.6rem;
}

.homepage-actions a:any-link {
  font-size: 1.05rem;
  text-decoration-thickness: 1px;
}

.homepage-actions .home-primary-action {
  padding: 0.5rem 0.85rem;
  border: 1px solid currentColor;
  border-radius: 0.3rem;
  text-decoration: none;
}

/* Typst showcase navigation */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  width: 55%;
  margin: 1.5rem 0 2.5rem;
}

.capability-card:any-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.7rem;
  box-sizing: border-box;
  padding: 0.85rem 0.95rem;
  color: var(--theme-text);
  background-color: var(--theme-code-bg);
  border: 1px solid var(--theme-code-border);
  border-radius: 0.35rem;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.capability-card:hover,
.capability-card:focus-visible {
  border-color: #8f3b2e;
  outline: none;
  transform: translateY(-1px);
}

.capability-number {
  grid-row: 1 / 3;
  align-self: center;
  color: #a34a3b;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

.capability-card strong {
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
}

.capability-description {
  color: color-mix(in srgb, var(--theme-text) 66%, transparent);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Typst showcase actions */
.showcase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 2rem;
}

a.showcase-button:any-link {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 1px solid #8f3b2e;
  border-radius: 0.3rem;
  background-color: #8f3b2e;
  color: #fff !important;
  text-decoration: none;
}

.showcase-button:hover {
  filter: brightness(1.08);
}

a.showcase-button-secondary:any-link {
  background-color: transparent;
  color: #8f3b2e !important;
}

/* Markdown-style callouts */
.callout {
  --callout-accent: #4487c5;
  --callout-bg: #eef6ff;
  box-sizing: border-box;
  width: 55%;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  color: var(--theme-text);
  background: var(--callout-bg);
  border: 1px solid color-mix(in srgb, var(--callout-accent) 35%, transparent);
  border-left: 0.28rem solid var(--callout-accent);
  border-radius: 0.35rem;
}

.callout-note {
  --callout-accent: #3278b7;
  --callout-bg: #eef6ff;
}

.callout-tip {
  --callout-accent: #2f8650;
  --callout-bg: #edf8f0;
}

.callout-warning {
  --callout-accent: #ad7415;
  --callout-bg: #fff7e6;
}

.callout-important {
  --callout-accent: #7f50b2;
  --callout-bg: #f7efff;
}

.callout-title {
  margin-bottom: 0.35rem;
  color: var(--callout-accent);
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.callout-title::before {
  content: "◆";
  margin-right: 0.45rem;
  font-size: 0.75em;
}

.callout-body,
.callout-body > p {
  width: 100%;
  margin: 0;
}

html[data-theme="dark"] .callout,
html:not([data-theme]) .callout {
  --callout-bg: color-mix(in srgb, var(--callout-accent) 13%, var(--theme-bg));
}

html[data-theme="dark"] .showcase-button-secondary,
html:not([data-theme]) .showcase-button-secondary {
  color: #e9a99f !important;
  border-color: #e9a99f;
}

/* The generated TOC is intentionally secondary, but remains readable. */
.toc-sidebar {
  width: min(13rem, 14vw);
  color: color-mix(in srgb, var(--theme-text) 62%, transparent);
}

.toc-sidebar a:any-link {
  padding: 0.25rem 0 0.25rem 0.7rem;
  font-size: 1.08rem;
  line-height: 1.35;
}

.toc-sidebar .toc-h2 a:any-link {
  color: var(--theme-text);
  font-size: 1.15rem;
  font-weight: 700;
}

.toc-sidebar .toc-h3 a:any-link {
  font-size: 1.02rem;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) .callout-note {
    --callout-bg: #eef6ff;
  }

  html:not([data-theme]) .callout-tip {
    --callout-bg: #edf8f0;
  }

  html:not([data-theme]) .callout-warning {
    --callout-bg: #fff7e6;
  }

  html:not([data-theme]) .callout-important {
    --callout-bg: #f7efff;
  }

  html:not([data-theme]) .showcase-button-secondary {
    color: #8f3b2e !important;
    border-color: #8f3b2e;
  }
}

@media (max-width: 760px) {
  header.site-header:has(.site-nav) {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  header.site-header:has(.site-nav)::-webkit-scrollbar {
    display: none;
  }

  .site-nav {
    width: max-content;
    min-width: 100%;
    gap: 0.2rem;
    white-space: nowrap;
  }

  .site-nav a:any-link {
    flex: 0 0 auto;
    padding: 0.2rem 0.45rem;
    font-size: 1.05rem;
  }

  .theme-toggle-btn {
    flex: 0 0 auto;
    margin-right: 0.75rem;
  }

  .home-hero,
  .capability-grid,
  .callout {
    width: 100%;
  }

  .capability-grid {
    grid-template-columns: 1fr;
  }

  .home-hero > h2 {
    font-size: 2.5rem;
  }
}