/* ============================================================
   SUMI — Base : 版面 / タイポ / 共通モーション
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: 2;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 紙の質感 — 外部通信なしの SVG ノイズ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

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

:focus-visible {
  outline: 2px solid var(--shu);
  outline-offset: 4px;
}

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

/* ---------- 版面 ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { position: relative; }

/* ---------- タイポ部品 ---------- */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin-inline: 0;  /* hr の UA 既定（auto 中央寄せ）を打ち消す */
  transform-origin: left;
}

/* ---------- リンク：左から引かれる朱の下線 ---------- */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--shu);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 520ms var(--ease);
}
.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- 出現アニメーション ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* 罫線が横に伸びる */
.draw {
  transform: scaleX(0);
  transition: transform 1200ms var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.draw.in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .draw { transform: scaleX(1); }
}