/* mizu — i4u.jp のデザイン。墨色の水面の上に、読むための面を浮かべる。
   トークンは primitive(生値) → semantic(役割) の2層。部品からは semantic だけを参照する。 */

:root {
  color-scheme: light dark;

  /* --- primitive: 墨（わずかに寒色に振った無彩色。純グレーより「墨」に見える） --- */
  --sumi-20: oklch(0.20 0.008 250);
  --sumi-33: oklch(0.33 0.008 250);
  --sumi-44: oklch(0.44 0.008 250);
  --sumi-47: oklch(0.47 0.006 250);

  /* --- semantic ---
     背景が動く（水面）ので、色は「最悪ケースの背景」から逆算してある。
       水面に直接載る文字  : 水面の最暗 176 に対して 4.5:1 → 66 以下 = --sumi-33
       カードの上に載る文字: カード面 ≥233（白80%が水面176に載った値）に対して 4.5:1 */
  --text-default: var(--sumi-20);
  --text-muted: var(--sumi-44);
  --text-faint: var(--sumi-47);
  --text-on-water: var(--sumi-33);
  --surface: rgb(255 255 255 / 0.8);
  --surface-hover: rgb(255 255 255 / 0.9);
  --surface-quiet: rgb(255 255 255 / 0.66);
  --hairline: rgb(16 18 22 / 0.16);
  --hairline-strong: rgb(16 18 22 / 0.28);
  --focus: oklch(0.42 0.01 250);
  --water-fallback: #cdd0d4;

  /* --- 余白（8pt グリッド） --- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* --- 角丸（同心円: 外 20 / 内 10） --- */
  --r-card: 20px;
  --r-chip: 999px;

  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic UI", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 暗いほうの水面は稜線が明るく光る（最明 100）。白いガラス面だと波が透けて
       文字のコントラストが崩れるので、カードは逆に「濃いガラス」にして墨を沈める。 */
    --text-default: oklch(0.96 0.003 250);
    --text-muted: oklch(0.80 0.005 250);
    --text-faint: oklch(0.70 0.006 250);
    --text-on-water: oklch(0.93 0.004 250); /* 水面の最明 100 に対して 4.5:1 */
    --surface: rgb(14 16 20 / 0.55);
    --surface-hover: rgb(14 16 20 / 0.7);
    --surface-quiet: rgb(14 16 20 / 0.42);
    --hairline: rgb(255 255 255 / 0.16);
    --hairline-strong: rgb(255 255 255 / 0.3);
    --focus: oklch(0.9 0.01 250);
    --water-fallback: #121417;
  }
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--water-fallback);
  color: var(--text-default);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  /* 日本語の行が水面の上でにじまないよう、字面を締める */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

/* --- 水面（装飾レイヤー。読み上げ対象にしない・操作を奪わない） --- */
#mizu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* --- 版面 --- */
.sheet {
  position: relative;
  z-index: 1;
  /* 日本語本文が 1 行 15〜40 字に収まる幅 */
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(var(--sp-2xl), 12vh, 120px) var(--sp-lg) var(--sp-3xl);
}

.hero {
  margin-bottom: var(--sp-2xl);
}

.logo {
  margin: 0;
  font-size: clamp(48px, 11vw, 76px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.logo__4 {
  /* モノクローム。色ではなく「浮き」で 4 を立てる */
  display: inline-block;
  font-weight: 700;
}

.lead {
  margin: var(--sp-md) 0 0;
  font-size: 17px;
  line-height: 1.8;
  /* 水面の上に直接載る文字 */
  color: var(--text-on-water);
}

/* --- リンク一覧 --- */
.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-md);
}

.item {
  margin: 0;
  /* grid の子は既定で min-width:auto。長い語が入ると版面を押し広げるので切る */
  min-width: 0;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 途中で改行できない長い文字列（URL 的な名前など）でも横スクロールを出さない */
  overflow-wrap: anywhere;
  /* タップ領域は 44px を大きく上回る */
  min-height: 132px;
  padding: var(--sp-lg);
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  color: inherit;
  text-decoration: none;
  /* 水位に応じて毎フレーム transform を書き換えるので合成レイヤーに固定する */
  will-change: transform;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

a.card:hover {
  background: var(--surface-hover);
  border-color: var(--hairline-strong);
}

a.card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.card--soon {
  background: var(--surface-quiet);
  border-style: dashed;
}

.card--soon .card__jp,
.card--soon .card__desc {
  color: var(--text-muted);
}

.card__jp {
  font-size: 25px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card__name {
  margin-top: var(--sp-xs);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

.card__desc {
  margin-top: var(--sp-md);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
}

.card__foot {
  margin-top: auto;
  padding-top: var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
}

.chip {
  min-width: 0;
  min-height: 26px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-chip);
  border: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.go,
.soon {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.go {
  color: var(--text-default);
}

.soon {
  color: var(--text-faint);
  letter-spacing: 0.08em;
}

.ic {
  transition: transform var(--dur) var(--ease);
}

a.card:hover .ic {
  transform: translateX(3px);
}

/* --- 脚注 --- */
.foot {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--hairline);
  /* 水面の上に直接載る文字 */
  color: var(--text-on-water);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.foot p {
  margin: 0;
}

/* 2 カラムに割れる幅から並べる（1 行の字数を保ったまま面を増やす） */
@media (min-width: 720px) {
  .sheet {
    max-width: 940px;
  }
  .links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-md);
  }
  .lead {
    font-size: 18px;
  }
}

/* 動きに弱い人には水面を静止させる（mizu.js 側でも同じ判定でループを止める） */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .card {
    will-change: auto;
  }
}