/* Noeta Studio — 見た目の実装
   ────────────────────────────────────────────────
   ★ 値の出どころは DESIGN.md（"Quiet White"）。DESIGN.md 側に数値を書き戻さない。
   ★ 参照した型 = shiftbrain.com（2026-08-11 に computed style を実測）

   ⚠️ この3つを外すと壊れる
    1. border-radius は全要素 0。例外なし
    2. アクセント色を持たない。無彩色だけ（作品の色が唯一の色）
    3. letter-spacing のマイナスは【欧文だけの要素】に当てる。
       和文に効かせると字が詰まって汚くなる（.role / .copy / .desc には当てない）
*/

:root{
  --bg:#FFFFFF;
  --bg-alt:#FAFAFA;
  --fg:#121212;          /* 純黒ではない。わずかに柔らかい黒 */
  --fg-muted:#6E6E6E;
  --fg-faint:#9B9B9B;
  --line:#E5E5E5;

  --latin:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --jp:'YakuHanJP','Noto Sans JP',sans-serif;
  --mix:'YakuHanJP','Hanken Grotesk','Noto Sans JP',sans-serif;

  --max:1440px;
  --edge:4rem;
  --gap-section:10rem;
  --gap-block:12rem;
}
@media (max-width:900px){
  :root{ --edge:1.5rem; --gap-section:6rem; --gap-block:7rem; }
}

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--mix); font-size:0.9375rem; line-height:2;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h2{ font-size:inherit; font-weight:inherit; }

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

/* ---- nav --------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:10;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max); margin:0 auto; padding:1.25rem var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
/* ⚠️ 屋号。text-transform を掛けない（NOETA STUDIO になる） */
.brand{
  font-family:var(--latin); font-size:1rem; font-weight:500;
  letter-spacing:-0.01em; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:0.6rem;
}
/* ロゴマーク。⚠️ 唯一の有彩色（DESIGN.md 付記 §A の例外） */
.mark{ width:24px; height:24px; flex:none; display:block; }
.foot-brand{ display:inline-flex; align-items:center; gap:0.5rem; }
.foot-brand .mark{ width:18px; height:18px; }
.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  font-family:var(--latin); font-size:0.8125rem; font-weight:400;
  text-decoration:none; color:var(--fg-muted);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.nav-links a:hover{ color:var(--fg); border-bottom-color:var(--fg); }

/* ---- lead -------------------------------------------------------------- */
.lead{ padding-block:clamp(5rem,14vw,11rem) clamp(4rem,10vw,8rem); }
.lead p{
  /* 欧文だけ＝マイナスの字間を当ててよい */
  font-family:var(--latin);
  font-size:clamp(2.25rem,5vw,4rem);
  font-weight:300; line-height:1.16; letter-spacing:-0.03em;
}
/* ⚠️ 狭い画面で語が1つだけ取り残されるのを防ぐ（375pxで "nothing." が孤立した） */
.nb{ white-space:nowrap; }

/* ---- label ------------------------------------------------------------- */
/* ⚠️ uppercase が掛かる。ここに屋号を入れない */
.label{
  font-family:var(--latin); font-size:0.6875rem; font-weight:500;
  line-height:1; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--fg-muted);
  padding-bottom:1.5rem; border-bottom:1px solid var(--fg);
  margin-bottom:var(--gap-section);
}

/* ---- works ------------------------------------------------------------- */
.works{ padding-bottom:var(--gap-section); }

.work{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem); align-items:start;
  padding-top:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--line);
}
.work + .work{ margin-top:var(--gap-block); }

.work-text{ display:flex; flex-direction:column; align-items:flex-start; }
.no{
  font-family:var(--latin); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.2em; color:var(--fg-faint); line-height:1;
}
/* アイコンPNGの地は白。白地に置くとグリフだけが残る＝枠も角丸も付けない */
.icon{ width:56px; height:56px; margin-top:2.5rem; }
.name{
  /* アプリ名は全部ASCII＝マイナスの字間を当ててよい */
  font-family:var(--latin);
  font-size:clamp(1.75rem,3.4vw,2.75rem);
  font-weight:300; line-height:1.2; letter-spacing:-0.025em;
  margin-top:1.5rem;
}
/* ↓ ここから和文。マイナスの字間を当てない */
.role{ font-family:var(--jp); font-size:1rem; line-height:1.7; color:var(--fg-muted); margin-top:0.75rem; }
.copy{ font-family:var(--jp); font-size:1rem; line-height:1.7; margin-top:1.75rem; }
.desc{ font-family:var(--jp); font-size:0.9375rem; line-height:2; color:var(--fg-muted); margin-top:1.25rem; max-width:34em; }
/* ★複利の一行（「〜ほど、〜なる」）。冒頭で主張せず、ここで4回、具体的に示す */
.compound{ font-family:var(--jp); font-size:1rem; line-height:1.7; margin-top:1.75rem; }

/* 価格と約束。App Store へ送る前に、いくらで何が無いかを先に言う */
.meta{ font-family:var(--mix); font-size:0.8125rem; line-height:1.9;
       color:var(--fg-muted); margin-top:2rem; }

.store{
  font-family:var(--latin); font-size:0.8125rem; font-weight:400;
  text-decoration:none; margin-top:1rem;
  padding-bottom:3px; border-bottom:1px solid var(--fg);
}
.store span{ display:inline-block; margin-left:0.4em; transition:transform .25s ease; }
.store:hover span{ transform:translateX(4px); }

.work-shots{ display:flex; gap:clamp(0.75rem,1.6vw,1.5rem); }
/* ⚠️ 高さだけ決めて width:auto ＝ 比率は元のまま（切り取らない） */
.work-shots img{ height:clamp(360px,40vw,620px); width:auto; border:1px solid var(--line); }

@media (max-width:900px){
  .work{ grid-template-columns:1fr; }
  .work-shots{ overflow-x:auto; }
  .work-shots img{ height:clamp(320px,78vw,460px); flex:none; }
}

/* ---- tools ------------------------------------------------------------- */
/* iPhone のアプリではない道具（パソコンのブラウザで動く）。器は Works と同じ `.work`。
   違いは3つだけ ＝ ①アイコンが無い ②状態の1行（公開中／開発中）がある ③右は写真でなく線画 */
.tools{ padding-bottom:var(--gap-section); }

/* アイコン（56px＋上2.5rem）が無いぶん、名前の頭が上がりすぎる。同じだけ下げて Works と揃える */
.tool .name{ margin-top:3rem; }
/* 触れないものを触れるように見せない＝「開発中」はここに必ず書く */
.status{
  font-family:var(--mix); font-size:0.8125rem; line-height:1.6;
  color:var(--fg-faint); margin-top:0.75rem;
}
.tool .role{ margin-top:0.35rem; }

/* 右の線画。枠の1px はスクショと同じ扱い（.work-shots img と同じ --line） */
.work-figure{ border:1px solid var(--line); background:var(--bg); align-self:start; }
.work-figure svg{ display:block; width:100%; height:auto; }
/* 拡大縮小しても線は1px＝枠の1pxと太さが揃う（縮むと線だけ細く薄く見えるのを防ぐ） */
.work-figure svg *{ vector-effect:non-scaling-stroke; }

/* `App Store →` と同じ見た目のテキストリンク（ボタンにしない）
   ⚠️ 2026-08-14 現在どこからも使っていない（3本とも開発中になり「触ってみる →」を外したため）。
   公開できる道具が出たときに使うので消さない */
.try{
  font-family:var(--mix); font-size:0.8125rem; font-weight:400;
  text-decoration:none; margin-top:2.5rem;
  padding-bottom:3px; border-bottom:1px solid var(--fg);
}
.try span{ display:inline-block; margin-left:0.4em; transition:transform .25s ease; }
.try:hover span{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .try span{ transition:none; } }

/* ---- contact ----------------------------------------------------------- */
.contact{ padding-block:var(--gap-section); border-top:1px solid var(--line); }
.contact .label{ margin-bottom:calc(var(--gap-section) / 2); }
.mail{
  font-family:var(--latin); font-size:0.9375rem; text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid var(--fg);
}

/* ---- footer ------------------------------------------------------------ */
.foot{ border-top:1px solid var(--line); padding-block:2.5rem; }
.foot .wrap{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--latin); font-size:0.75rem; color:var(--fg-muted);
}

/* ---- 動きは最小 --------------------------------------------------------- */
.rv{ opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .7s ease; }
.rv.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .store span{ transition:none; }
}