:root {
  --ink: #0A2540;
  --blue: #1E5AA8;
  --sky: #E8F1FB;
  --sky-2: #B9D5F1;
  --fog: #F5F7FA;
  --line: #E4EAF2;
}
html { scroll-behavior: smooth; }
body {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
  background: #ffffff;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-serif-jp { font-family: "Noto Serif JP", serif; }
.font-num { font-family: Inter, "Noto Sans JP", sans-serif; font-feature-settings: "tnum"; }

/* subtle image placeholder */
.ph-image {
  background:
    linear-gradient(135deg, rgba(30,90,168,0.06) 0%, rgba(30,90,168,0.02) 100%),
    repeating-linear-gradient(45deg, #F5F7FA 0 12px, #EEF2F8 12px 24px);
  color: #5A78A1;
}
.ph-video {
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(30,90,168,0.12) 0%, rgba(10,37,64,0.85) 60%, #061830 100%);
  color: #C5D1E1;
}

/* hairline dividers */
.hairline { border-color: var(--line); }

/* nav link hover underline */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .3s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* section number label */
.sec-index {
  font-family: Inter, sans-serif;
  letter-spacing: 0.2em;
  font-size: 12px;
  color: #1E5AA8;
  font-weight: 500;
}

/* focus ring for a11y */
a:focus-visible, button:focus-visible {
  outline: 2px solid #1E5AA8;
  outline-offset: 3px;
  border-radius: 2px;
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 767px) {
  body { letter-spacing: 0.01em; }
}