/* Kenta Mizuno Design System v1.5 — tokens
   正本は DESIGN.md。値を変えるときは DESIGN.md / tokens.json と揃えること。
   フォント読み込み:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"> */

:root {
  /* color */
  --mk-paper: #ffffff;
  --mk-ink: #3b3b3b;
  --mk-ink-2: #737373;
  --mk-ink-3: #b5b5b5;
  --mk-line: #e6e6e6;
  --mk-soft: #f4f4f3;

  /* font */
  --mk-font-en: "Inter", "Noto Sans JP", sans-serif;
  --mk-font-jp: "Noto Sans JP", "Inter", sans-serif;

  /* type scale */
  --mk-fs-hero: clamp(32px, 9.2vw, 120px);
  --mk-fs-display: clamp(56px, 11vw, 120px);
  --mk-fs-36: 36px;
  --mk-fs-24: 24px;
  --mk-fs-16: 16px;
  --mk-fs-14: 14px;
  --mk-fs-13: 13px;
  --mk-fs-12: 12px;
  --mk-fs-11: 11px;

  /* spacing (8px base) */
  --mk-space-4: 4px;
  --mk-space-8: 8px;
  --mk-space-12: 12px;
  --mk-space-16: 16px;
  --mk-space-24: 24px;
  --mk-space-32: 32px;
  --mk-space-48: 48px;

  /* whitespace: 区切りは余白だけ。要素内8 / 項目間24 / まとまり間64 / セクション間192 */
  --mk-gap-inside: 8px;
  --mk-gap-item: 24px;
  --mk-gap-group: 64px;
  --mk-gap-section: 192px;

  /* grid */
  --mk-cols: 12;
  --mk-gutter: 24px;
  --mk-margin: clamp(16px, 4vw, 48px);
  --mk-max: 1296px;

  /* shape / outline（区切りの罫線は使わない。輪郭だけ） */
  --mk-radius-full: 9999px;
  --mk-outline: 1px solid var(--mk-line);

  /* motion */
  --mk-ease: cubic-bezier(.2, .7, .2, 1);
  --mk-dur-fast: 160ms;
  --mk-dur-base: 400ms;
  --mk-dur-slow: 800ms;
  --mk-stagger: 60ms;

  /* photo grain */
  --mk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 1024px) {
  :root {
    --mk-gap-section: 160px;
  }
}

@media (max-width: 640px) {
  :root {
    --mk-cols: 4;
    --mk-gutter: 16px;
    --mk-gap-group: 48px;
    --mk-gap-section: 112px;
  }
}

body {
  background: var(--mk-paper);
  color: var(--mk-ink);
  font-family: var(--mk-font-jp);
  font-size: var(--mk-fs-16);
  line-height: 28px;
  letter-spacing: .04em;
}

.mk-wrap {
  max-width: var(--mk-max);
  margin-inline: auto;
  padding-inline: var(--mk-margin);
}

.mk-grid {
  display: grid;
  grid-template-columns: repeat(var(--mk-cols), minmax(0, 1fr));
  column-gap: var(--mk-gutter);
}

.mk-label {
  font-family: var(--mk-font-en);
  font-size: var(--mk-fs-11);
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mk-ink-2);
}

.mk-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--mk-soft);
}

.mk-photo::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: var(--mk-grain);
  background-size: 220px;
  opacity: .38;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* motion: JSが <html> に .js-motion を付けたときだけ隠す。.is-in で表示 */
.js-motion .mk-rv {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--mk-dur-slow) var(--mk-ease), transform var(--mk-dur-slow) var(--mk-ease);
}

.js-motion .mk-rv.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}

/* composition: 写真だけ画面端まで切り出す（文字は不可） */
:root {
  --mk-bleed: calc(var(--mk-margin) + max(0px, (100vw - var(--mk-max)) / 2));
}

html, body { overflow-x: clip; }

.mk-bleed-r { margin-right: calc(-1 * var(--mk-bleed)); }
.mk-bleed-l { margin-left: calc(-1 * var(--mk-bleed)); }
.mk-bleed-x { margin-inline: calc(-1 * var(--mk-bleed)); }

.mk-statement {
  font-family: var(--mk-font-jp);
  font-size: 36px;
  line-height: 52px;
  font-weight: 700;
  letter-spacing: .01em;
}