/* =============================================================
   摩登娱乐 · MODERN COLLAGE —— 01 tokens
   设计系统：后现代孟菲斯拼贴（纸白 + 墨黑 + 珊瑚 + 钴蓝 + 薄荷 + 丁香）
   cascade layers: reset → tokens → base → util
   ============================================================= */

@layer reset, tokens, base, shell, blocks, views, util;

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

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

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

  ul, ol { padding: 0; list-style: none; }

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

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

  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

  input, textarea, select { font: inherit; color: inherit; }

  :focus-visible {
    outline: 3px solid var(--mo-cobalt);
    outline-offset: 3px;
  }

  table { border-collapse: collapse; width: 100%; }
}

@layer tokens {
  :root {
    /* ---- 纸张与墨色 ---- */
    --mo-paper: #f5efe1;
    --mo-paper-soft: #fbf7ec;
    --mo-card: #fffdf7;
    --mo-ink: #17130f;
    --mo-ink-mid: #4b4138;
    --mo-ink-soft: #7a6d60;
    --mo-line: #d9cfba;

    /* ---- 孟菲斯色板 ---- */
    --mo-coral: #ff4b2b;
    --mo-coral-soft: #ffd9d0;
    --mo-cobalt: #2b3cff;
    --mo-cobalt-soft: #d8dcff;
    --mo-mint: #7fecbb;
    --mo-mint-soft: #d5fbec;
    --mo-lilac: #c8a6ff;
    --mo-lilac-soft: #ecdeff;
    --mo-sun: #ffcf4d;
    --mo-sun-soft: #ffeec2;

    /* ---- 结构 ---- */
    --mo-edge: 3px;
    --mo-shift: 8px;
    --mo-shift-sm: 5px;
    --mo-radius: 2px;
    --mo-wrap: 1180px;
    --mo-wrap-slim: 880px;
    --mo-gap: clamp(18px, 3vw, 34px);
    --mo-pad-x: clamp(16px, 4vw, 44px);
    --mo-section-y: clamp(52px, 7vw, 96px);

    /* ---- 字体 ---- */
    --mo-sans: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
    --mo-mono: "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
    --mo-serif: "Songti SC", "SimSun", Georgia, serif;

    /* ---- 底纹 ---- */
    --mo-dots: radial-gradient(var(--mo-ink) 1px, transparent 1.4px);
    --mo-grid: linear-gradient(to right, rgba(23, 19, 15, .07) 1px, transparent 1px),
               linear-gradient(to bottom, rgba(23, 19, 15, .07) 1px, transparent 1px);
    --mo-stripe: repeating-linear-gradient(45deg, var(--mo-ink) 0 3px, transparent 3px 9px);

    /* ---- 动效 ---- */
    --mo-ease: cubic-bezier(.22, .85, .28, 1);
    --mo-fast: .18s;
    --mo-mid: .34s;
  }
}

@layer base {
  html { scroll-behavior: smooth; }

  body {
    min-height: 100vh;
    font-family: var(--mo-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--mo-ink);
    background-color: var(--mo-paper);
    background-image:
      var(--mo-dots),
      linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-size: 22px 22px, 100% 100%;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -.02em;
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); }
  h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
  h3 { font-size: clamp(1.12rem, 1.9vw, 1.4rem); }
  h4 { font-size: 1.05rem; }

  p { color: var(--mo-ink-mid); }

  strong { font-weight: 800; color: var(--mo-ink); }

  ::selection {
    background: var(--mo-sun);
    color: var(--mo-ink);
  }

  .mo-skip {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 999;
    padding: 10px 18px;
    background: var(--mo-ink);
    color: var(--mo-paper);
    border-radius: var(--mo-radius);
    transition: top var(--mo-fast) var(--mo-ease);
  }
  .mo-skip:focus { top: 12px; }
}

@layer util {
  .mo-wrap {
    width: 100%;
    max-width: var(--mo-wrap);
    margin-inline: auto;
    padding-inline: var(--mo-pad-x);
  }

  .mo-wrap--slim { max-width: var(--mo-wrap-slim); }

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

  .mo-mark {
    background: linear-gradient(transparent 58%, var(--mo-sun) 58% 94%, transparent 94%);
    padding-inline: 2px;
  }

  .mo-mark--mint { background: linear-gradient(transparent 58%, var(--mo-mint) 58% 94%, transparent 94%); }

  .mo-flip { display: inline-block; transform: rotate(-2.4deg); }

  .mo-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  [data-mo-reveal] {
    opacity: 1;
    transform: none;
  }

  .mo-js [data-mo-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--mo-ease), transform .5s var(--mo-ease);
  }

  .mo-js [data-mo-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mo-js [data-mo-reveal] { opacity: 1; transform: none; transition: none; }
    .mo-ticker__track { animation: none !important; }
  }
}