/* 17craft.com 入口だけのページ。2026-10-20 に作り直し（ゲームサイトの style.css とは切り離した）
   方針：巨大なワードマーク＋差し色1色＋非対称。根拠は docs/specs/0001-redesign-2026-10.md */
:root{
  --bg:#fff;--ink:#0e0e0e;--ink-2:#555;--line:#e6e6e6;
  --accent:#ff4a1c; /* 差し色は1色だけ。文字には使わず「.」と小さな印だけに使う */
  --display:"Inter Tight","Noto Sans JP",system-ui,sans-serif;
  --sans:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:inherit}

.site-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:var(--gutter) var(--gutter) 0;font-size:13px;letter-spacing:.04em}
.tag{margin:0;color:var(--ink-2);line-height:1.7}
.quiet-nav{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.quiet-nav a{text-decoration:none;display:flex;gap:10px;align-items:baseline}
.quiet-nav a .num{font-family:var(--display);font-size:11px;color:var(--ink-2)}
.quiet-nav a .label{border-bottom:1px solid currentColor;padding-bottom:1px}
.quiet-nav a:hover .label,.quiet-nav a:focus-visible .label{border-bottom-width:2px;border-color:var(--accent)} /* 差し色は文字に使わない（白地で 3.4:1 しかない） */

main{flex:1;display:flex;align-items:flex-end;padding:0 var(--gutter)}
.wordmark{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(72px,27vw,500px);line-height:.82;letter-spacing:-.02em;white-space:nowrap;
  /* 文字の下の余白を詰め、左下に置く（非対称） */
  margin-left:-.04em;padding-bottom:.06em}
.wordmark .ch{display:inline-block}
.wordmark .dot{color:var(--accent)}

.site-foot{display:flex;justify-content:space-between;gap:16px;padding:18px var(--gutter) calc(var(--gutter)*.6);border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}

/* 動き：テキストリビール（Text reveal）＋スタッガー（Stagger）。JS が無くても最終形で表示される */
.js .wordmark .ch{animation:rise .9s var(--ease-out) both;animation-delay:calc(var(--i)*60ms + 120ms)}
.js .wordmark .dot{animation:pop .5s var(--ease-out) both;animation-delay:720ms}
.js .site-head,.js .site-foot{animation:fade .8s ease-out both;animation-delay:600ms}
@keyframes rise{from{transform:translateY(.5em);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(0)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .wordmark .ch,.js .wordmark .dot,.js .site-head,.js .site-foot{animation:none}}