:root {
  /* Brand palette - oklch(L C H) */
  --color-white: #fbfbfb;
  --color-black: #333333;
  --color-text: #4a2a35;

  --color-pink-50: oklch(0.97 0.02 350);
  --color-pink-100: oklch(0.94 0.04 350);
  --color-pink-200: oklch(0.88 0.08 355);
  --color-pink-300: oklch(0.8 0.12 355);
  --color-pink-400: oklch(0.72 0.17 355);
  --color-pink-500: oklch(0.66 0.2 0);
  --color-pink-600: oklch(0.58 0.22 5);
  --color-pink-700: oklch(0.5 0.2 10);

  --color-yellow-300: oklch(0.9 0.14 95);
  --color-yellow-400: oklch(0.84 0.17 90);

  --color-cream: oklch(0.97 0.04 90);
  --color-cream-2: oklch(0.95 0.06 80);

  --color-blue-300: oklch(0.82 0.12 230);
  --color-accent: oklch(0.7 0.2 25);

  /* Layout */
  --max-width: 1200px;
  --header-block-size: 88px;

  /* Typography */
  /* 16 -> 18 */
  --font-size-base: clamp(16px, 15.6px + 0.125vw, 18px);
  /* 14 -> 16 */
  --font-size-sm: clamp(14px, 13.6px + 0.125vw, 16px);
  /* 12 -> 13 */
  --font-size-xs: clamp(12px, 11.8px + 0.0625vw, 13px);
  /* 24 -> 40 */
  --font-size-h2: clamp(24px, 20.8px + 1vw, 40px);
  /* 28 -> 56 */
  --font-size-h1: clamp(28px, 22.4px + 1.75vw, 56px);

  --font-en: "Fredoka", "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui,
    sans-serif;

  interpolate-size: allow-keywords;
}

[id],
:focus {
  scroll-margin-block-start: var(--header-block-size);
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-pink-50);
  overflow-x: hidden;
}

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

ul {
  list-style: none;
}

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

:where(h1, h2, h3, h4, h5) {
  line-height: 1.2;
  font-family: var(--font-jp);
  font-weight: 700;
  word-break: auto-phrase;
}

:where(p) {
  word-break: auto-phrase;
}

:where(button, [type="button"], [type="submit"]) {
  touch-action: manipulation;
  font-family: inherit;
}

/* Scroll-driven: reveal on entry */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-scale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  .reveal--scale {
    animation-name: reveal-scale;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}