/* 首页（余接の記）私有样式。只引用 tokens。 */
@layer page {

  .stage {
    min-height: 100dvh;
    display: flex;
    background: var(--black);
  }

  /* ---------- 左栏 · 竖排站名 + 字卡密文 ---------- */

  .rail {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-5) 34px;
    position: relative;
  }

  .wordmark {
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-hero);
    line-height: var(--leading-tight);
    letter-spacing: 0.08em;
    margin: 0 auto;
    color: var(--paper);
  }
  .wordmark em { font-style: normal; color: var(--red); }

  .rail-domain {
    position: absolute;
    left: 34px;
    top: 44px;
    writing-mode: vertical-rl;
    font-size: 13px;
    letter-spacing: var(--tracking-vertical);
    color: var(--gray-2);
  }

  .rail .colophon { margin-top: auto; }
  .colophon .dim { color: var(--gray-3); }
  .colophon .quote { color: var(--gray-2); }

  /* ---------- 右侧 · 三张回目卡 ---------- */

  .cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-blade);
    padding: var(--gap-blade) var(--gap-blade) var(--gap-blade) 0;
  }

  .card {
    flex: 1;
    min-height: 128px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    text-decoration: none;
  }
  /* 悬停是硬切：无过渡，直接换状态——字卡的时间感 */
  a.card:hover { filter: brightness(1.08); }
  a.card:hover .stamp, a.card:focus-visible .stamp { background: var(--red); color: var(--ink-on-red); }
  a.card:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }

  .card .kaime { width: 74px; flex-shrink: 0; }
  .card-name {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-title);
    letter-spacing: var(--tracking-display);
  }
  .card-desc { font-size: var(--text-desc); flex: 1; }
  .card .stamp { margin-left: auto; }

  /* 三层身份色与配套墨色 */
  .card--notes { background: var(--c-notes); color: var(--ink-on-paper); }
  .card--notes .kaime { color: var(--red); }
  .card--notes .card-desc { color: var(--gray-3); }

  .card--projects { background: var(--c-projects); color: var(--ink-on-red); }
  .card--projects .kaime { opacity: 0.85; }
  .card--projects .card-desc { color: var(--ink-on-red-dim); }

  .card--about { background: var(--c-about); color: var(--ink-on-black); border-top: 1px solid var(--black-line); }
  .card--about .kaime { color: var(--red); }
  .card--about .card-desc { color: var(--gray-1); }
  .card--about .stamp { background: var(--red); color: var(--ink-on-red); }

  /* ---------- 裏 · 只对 tailnet 成员显形的八张卡 ----------
     双列网格接在三张回目卡下面；[hidden] 时整段不占位。 */

  .ura {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(136px, auto);
    gap: var(--gap-blade);
    border-top: 1px solid var(--black-line);
    padding-top: var(--gap-blade);
  }
  .ura[hidden] { display: none; }

  .ura .card {
    flex: none;
    flex-wrap: wrap;
    align-content: center;
    gap: var(--space-1) var(--space-2);
    padding: 22px var(--space-3);
  }
  .ura .kaime { width: auto; }
  .ura .card-desc { flex-basis: 100%; order: 3; }

  .card--lesson { background: var(--c-lesson); color: var(--ink-on-paper); }
  .card--lesson .kaime { color: var(--red); }
  .card--lesson .card-desc { color: var(--gray-3); }

  .card--desk { background: var(--c-desk); color: var(--ink-on-red); }
  .card--desk .kaime { opacity: 0.85; }
  .card--desk .card-desc { color: var(--ink-on-red-dim); }
  .card--desk .stamp { background: var(--paper); color: var(--red); font-weight: var(--weight-label); }

  .card--comic { background: var(--c-comic); color: var(--ink-on-purple); }
  .card--comic .card-desc { color: var(--ink-on-purple-dim); }
  .card--comic .stamp { background: var(--paper); color: var(--c-comic); font-weight: var(--weight-label); }

  .card--admin { background: var(--c-admin); color: var(--ink-on-gold); }
  .card--admin .kaime, .card--admin .card-desc { color: var(--ink-on-gold-dim); }
  .card--admin .stamp { background: var(--black); color: var(--c-admin); font-weight: var(--weight-label); }

  /* ---------- 黑屏字卡（404） ---------- */

  .blackcard {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: var(--black);
    padding: 24px;
    text-align: center;
  }
  .blackcard-title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: clamp(40px, 8vw, 88px);
    letter-spacing: 0.1em;
    color: var(--paper);
  }
  .blackcard-title em { font-style: normal; color: var(--red); }
  .blackcard-sub { font-size: var(--text-body); color: var(--gray-1); line-height: var(--leading-dense); }
  .blackcard-sub code {
    font-family: var(--font-body);
    color: var(--paper);
    background: var(--black-soft);
    border: 1px solid var(--black-line);
    padding: 2px 8px;
  }
  .blackcard-back {
    font-size: var(--text-stamp);
    letter-spacing: var(--tracking-stamp);
    color: var(--paper);
    background: var(--red);
    padding: 10px 18px;
  }
  .blackcard-back:hover { color: var(--paper); background: var(--red-deep); }

  /* ---------- 窄屏最低保障（正式移动版另做） ---------- */
  @media (max-width: 820px) {
    .stage { flex-direction: column; }
    .rail { width: auto; padding: 28px 22px 18px; }
    .wordmark { writing-mode: horizontal-tb; font-size: 40px; margin: 0; }
    .rail-domain { position: static; writing-mode: horizontal-tb; margin-top: 4px; }
    .card { flex-wrap: wrap; padding: 18px 22px; gap: 10px var(--space-2); min-height: 0; }
    .card-desc { flex-basis: 100%; order: 3; }
    .card .stamp { margin-left: 0; }
    .ura { grid-template-columns: 1fr; grid-auto-rows: auto; }
  }
}