/* ============================================================
   MUCCHOSTUDIO — Design Tokens (v1)
   Quiet Structure × Street Heat
   UIは無彩色。色彩は作品から生まれる。
   ============================================================ */

:root{
  /* --- color (無彩色 UI) --- */
  --bg:#0A0A0B;
  --bg-raise:#121214;

  --fg:#EDEDEA;
  --fg-dim:#8C8C88;
  --fg-faint:#5A5A57;

  --line:#26262A;
  --line-2:#3A3A40;

  --inv-bg:#EDEDEA;
  --inv-fg:#0A0A0B;

  /* Theme 01 作品色（実画像 IMG_8239 から抽出した電気的な青） */
  --work:#10C0F0;
  --focus:var(--work);

  /* --- motion --- */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);

  /* --- spacing: UI（密）--- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* --- spacing: Spatial（疎・沈黙）--- */
  --spatial-1:80px;
  --spatial-2:112px;
  --spatial-3:160px;
  --spatial-4:200px;
  --spatial-5:280px;

  /* --- layout --- */
  --page-margin:clamp(20px, 6vw, 96px);
  --content-max:1440px;
  --text-max:66ch;
  --artwork-max:860px;

  /* --- typography families ---
     和欧は1つの宣言で解決：英字→Latin, 和字→Noto が字形カバレッジで自動フォールバック */
  --font-ui:"Inter","Noto Sans JP",system-ui,-apple-system,sans-serif;
  --font-display:"Fraunces","Noto Serif JP",Georgia,serif;
  --font-jp:"Noto Sans JP",system-ui,sans-serif;
  --font-jp-serif:"Noto Serif JP",serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* --- type scale (clamp: desktop上限 / mobile下限) --- */
  --fs-hero:clamp(40px, 7vw, 128px);
  --fs-h1:clamp(34px, 5.2vw, 88px);
  --fs-h2:clamp(26px, 3.4vw, 52px);
  --fs-h3:clamp(20px, 2.2vw, 32px);
  --fs-body-lg:clamp(17px, 1.4vw, 22px);
  --fs-body:clamp(15px, 1vw, 17px);
  --fs-caption:clamp(12px, 0.9vw, 13px);
  --fs-nav:12px;
  --fs-num:clamp(12px, 1vw, 15px);

  /* --- section rhythm --- */
  --section-y:clamp(88px, 14vw, 200px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-ui);
  font-weight:400;
  line-height:1.6;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--fg);color:var(--bg)}

/* ---------- focus (keyboard only) ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- shared primitives ---------- */
.wrap{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--page-margin)}
.eyebrow{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-caption);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)}
.num{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-num);letter-spacing:.1em;color:var(--fg-dim)}
.hairline{height:1px;background:var(--line);border:0}

/* text link (下線のみ / 静か) */
.tlink{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--fg);
  background-image:linear-gradient(var(--fg),var(--fg));background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:4px;transition:background-size .3s var(--ease-out),color .3s var(--ease-out)}
.tlink:hover,.tlink:focus-visible{background-size:100% 1px}
.tlink.on-work{color:var(--fg)}
.tlink.on-work:hover{background-image:linear-gradient(var(--work),var(--work))}

/* --- reveal (初回1回のみ) --- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}
.rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s}

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