/* ===========================================================
   Liaison — Top Page
   Design tokens + base styles
   =========================================================== */

:root {
  --bg: #f4f1eb;
  --bg-2: #ece7dc;
  --ink: #1a1614;
  --ink-2: #3a332e;
  --ink-3: #6b6359;
  --line: #d9d2c5;
  --accent: #a81848;
  --accent-ink: #820e38;
  --paper: #fbf9f4;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Inter", "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
  --jpsans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--accent); color: var(--paper); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: 0.02em; }
p { margin: 0; line-height: 1.95; text-wrap: pretty; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(.16,.84,.3,1), transform 1s cubic-bezier(.16,.84,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }