/* Hallmark · macro: Index-First / Long Document / Conversational FAQ
 * · genre: editorial · theme: Newsprint · enrichment: none (typography + real screenshots)
 * · nav: N9 Edge-aligned · footer: Ft1 Mast-headed
 * · pre-emit critique: P5 H4 E5 S4 R5 V5
 */

@layer reset, base, components;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    overflow-x: clip;
    scroll-behavior: smooth;
  }

  body {
    overflow-x: clip;
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img {
    display: block;
    max-width: 100%;
  }

  button {
    font: inherit;
  }

  a {
    color: inherit;
  }
}

@layer base {
  h1,
  h2,
  h3 {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    line-height: 1.14;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  h1 {
    line-height: 1.08;
  }

  p {
    max-width: 65ch;
  }

  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .skip-link {
    position: fixed;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: var(--z-modal);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-ink);
    color: var(--color-paper);
    font-size: var(--text-sm);
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: none;
  }
}

@layer components {
  /* ---- 导航：N9 边缘对齐极简 ---- */
  .nav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky-nav);
    background: color-mix(in oklch, var(--color-paper) 92%, var(--color-transparent));
    border-block-end: var(--border) solid var(--color-rule);
    backdrop-filter: blur(8px);
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: 72rem;
    margin-inline: auto;
    min-height: 58px;
    padding-inline: var(--page-gutter);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .nav__links {
    display: none;
    align-items: center;
    gap: var(--space-lg);
  }

  .nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-ink-2);
    text-decoration: none;
    white-space: nowrap;
  }

  .nav__links a[aria-current="page"] {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .nav__toggle {
    min-height: 44px;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--border) solid var(--color-rule-2);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink);
    cursor: pointer;
    white-space: nowrap;
  }

  .nav__mobile {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--page-gutter) var(--space-md);
    border-block-start: var(--border) solid var(--color-rule);
  }

  .nav__mobile[hidden] {
    display: none;
  }

  .nav__mobile a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-ink-2);
    text-decoration: none;
  }

  /* ---- 页面容器与标题 ---- */
  .wrap {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--page-gutter);
  }

  .page-head {
    padding-block: var(--space-3xl) var(--space-xl);
  }

  .page-head h1 {
    max-width: 18ch;
    font-size: var(--text-display);
  }

  .page-head .lede {
    margin-block-start: var(--space-md);
    color: var(--color-muted);
  }

  .page-body {
    padding-block-end: var(--space-4xl);
  }

  .section {
    margin-block-start: var(--space-3xl);
  }

  .section h2 {
    font-size: var(--text-2xl);
  }

  .section p {
    margin-block-start: var(--space-md);
  }

  /* ---- 首页：项目简介 + 文章索引 ---- */
  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
  }

  .intro__text h1 {
    font-size: var(--text-display);
  }

  .intro__text p {
    margin-block-start: var(--space-md);
  }

  .intro__media {
    border: var(--border) solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    overflow: hidden;
  }

  .intro__media img,
  .intro__media video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .index-list {
    display: grid;
    gap: 0;
    border-block-start: var(--border) solid var(--color-rule);
  }

  .index-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-lg);
    padding-block: var(--space-lg);
    border-block-end: var(--border) solid var(--color-rule);
    text-decoration: none;
  }

  .index-row h3 {
    font-size: var(--text-lg);
  }

  .index-row p {
    color: var(--color-muted);
  }

  .index-row__meta {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  /* ---- 文档正文（Long Document） ---- */
  .doc-body {
    max-width: 68ch;
    margin-inline: auto;
  }

  .doc-body h2 {
    margin-block-start: var(--space-3xl);
  }

  .doc-body h3 {
    margin-block-start: var(--space-xl);
  }

  .doc-body p,
  .doc-body ul,
  .doc-body ol,
  .doc-body pre {
    margin-block-start: var(--space-md);
  }

  .doc-body ul,
  .doc-body ol {
    padding-inline-start: var(--space-lg);
  }

  .doc-body pre {
    padding: var(--space-md) var(--space-lg);
    border: var(--border) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    overflow-x: auto;
  }

  .doc-body img {
    margin-block-start: var(--space-lg);
    border: var(--border) solid var(--color-rule);
    border-radius: var(--radius-md);
  }

  figure {
    margin-block-start: var(--space-lg);
  }

  figcaption {
    margin-block-start: var(--space-xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  /* ---- FAQ：对话式 ---- */
  .faq {
    max-width: 68ch;
    margin-inline: auto;
  }

  .faq details {
    border-block-end: var(--border) solid var(--color-rule);
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 52px;
    padding-block: var(--space-sm);
    cursor: pointer;
    color: var(--color-ink);
    font-weight: 600;
    list-style: none;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    content: "+";
    color: var(--color-accent);
    font-family: var(--font-mono);
  }

  .faq details[open] summary::after {
    content: "−";
  }

  .faq details > p {
    padding-block-end: var(--space-lg);
    color: var(--color-ink-2);
  }

  /* ---- 页脚：Ft1 报头式 ---- */
  .footer {
    border-block-start: var(--border) solid var(--color-rule);
    background: var(--color-paper-2);
  }

  .footer__inner {
    display: grid;
    gap: var(--space-md);
    padding-block: var(--space-2xl);
  }

  .footer__brand {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
  }

  .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .footer__links a {
    color: var(--color-ink-2);
    text-decoration: none;
  }

  .footer__meta {
    display: grid;
    gap: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .footer__icp {
    font-family: var(--font-mono);
  }

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

  .footer__icp a:hover {
    text-decoration: underline;
  }

  .footer__notice {
    color: var(--color-ink-2);
  }
}

@media (min-width: 40rem) {
  .index-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

@media (min-width: 60rem) {
  .nav__links {
    display: flex;
  }

  .nav__toggle {
    display: none;
  }

  .intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}