/* 言葉の出し分け（themes/_lib.mjs の LANG_SCRIPT が決める） */
:root[data-lang="ja"] [data-l="en"],
:root[data-lang="en"] [data-l="ja"] { display: none !important; }

/*
  sawaya studio。
  ==========================================================================
  **この頁は、何かを言葉で説明しない。**

  だから地は何も主張しない。無彩色の紙と、1 本の罫だけ。
  代わりに、**棚に並ぶ札そのものが、その道具の顔**になっている。

  **札の組み方は 1 つだけ。**

      うしろ … その道具の「地」。見ただけでどの道具か分かるもの
      まんなか … その道具のロゴ

    recaday の札 …… 7:00 の空と流れる雲、まんなかにワードマーク
    テロップの札 …… 方眼紙、まんなかに看板

  地も字も、その道具の中で使っている値をそのまま持ってきている
  （空は skyTable.ts の 7:00、方眼と緑とオレンジは道具の ui/public/index.html）。

  **アプリの画面は持ちこまないこと。** 行や札やボタンを並べると、
  ここが小さな取扱説明になってしまう。見せたいのは中身ではなく、顔のほう。
*/
:root{
  /*
    **白と黒に見える範囲に収めること。**

    完全な無彩色（R=G=B）だと、地も字も冷たく硬くなる。
    赤をほんの数だけ足すと当たりがやわらぐが、**足しすぎると「茶色い頁」になる。**
    一度 #3a2e22 まで寄せたところ、地の色ではなく**字の色として茶が見えた。**

    目安は **R と B の差を 4 以内**。それを越えると色として気づかれる。
      地 #f7f7f6（差 1）／ 字 #1a1a18（差 2）／ 弱字 #6b6a67（差 4）

    **色みは、地から字までひと続きにすること。**
    ロゴだけ別の茶にしていたことがあるが、そこだけ浮いた。
    同じ向きで濃さだけを変えると、1 枚の紙に見える。

    地は #f7f7f6。ほとんど白（#faf9f7）だと札が浮かず、
    濃くする（#eae9e5）と地のほうが出てくる。その間。
  */
  --paper:#f7f7f6;
  --card:#ffffff;
  --ink:#1a1a18;
  --sub:#6b6a67;
  --faint:#8e8d8a;
  --line:#e4e3e0;
  --radius:14px;
  /* **ロゴと札の幅は、同じ値から取ること。**
     別々に書くと、片方だけ直したときに頭とお尻の幅が食い違う。 */
  --col:400px;
  /*
    **欧字は Saira、日本語は M PLUS 1。**

    書き分ける必要はない。**Saira には日本語が入っていない**ので、
    この順に並べておくだけで、欧字は Saira、日本語は M PLUS 1 に落ちる。
    どちらも可変 1 本（100〜900）なので、太さを変えてもファイルは増えない。
  */
  --ui:"Saira","M PLUS 1",-apple-system,BlinkMacSystemFont,"Segoe UI",
       "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  --label:var(--ui);
}

/* 欧字の書体。**Saira**（SIL OFL）。名乗りと、節の名前と、走る場所に使う。
   100〜900 の可変軸を 1 本で持っているので、**太さを変えてもファイルは増えない。**
   font-weight に幅を書いておかないと、ブラウザが自前で太らせてしまう。
   この頁に出てくる字だけに絞ってある（tools/subset-fonts.mjs）。 */
@font-face{
  font-family:"Saira";
  src:url("fonts/Saira-Variable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-display:swap;
}
/* 日本語の書体。**M PLUS 1**（SIL OFL）。Saira と組ませるために選んだ。
   角ばった骨格が Saira に近く、同じく可変 1 本で太さが揃う。
   recaday のキャプションが M PLUS 1p（同じ M+ の系列）なので、
   site の日本語が 2 系統に散らない。 */
@font-face{
  font-family:"M PLUS 1";
  src:url("fonts/MPLUS1-Variable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-display:swap;
}
/* 看板の書体。**道具に入っているものと同じ 1 本**を、使う字だけに絞って置いてある */
@font-face{
  font-family:"Telop Logo";
  src:url("fonts/851Gkktt-logo.woff2") format("woff2");
  font-display:swap;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.95;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

/* **すべて真ん中にそろえる。** 置いてあるものが少ない頁なので、
   左に寄せると右側だけが大きく空いて、余白が余りに見える */
main{max-width:560px;margin:0 auto;padding:0 20px 88px;text-align:center}
section{margin-top:clamp(34px,6vw,64px)}

h1{font-size:clamp(24px,5vw,36px);line-height:1.5;font-weight:800;
   letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
h2{font-size:clamp(17px,2.6vw,21px);line-height:1.6;font-weight:800;
   letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance}
h3{font-size:15px;font-weight:700;margin:0 0 4px}
/*
  **名前の付いていない段落だけに掛けること。**

  ここを素の p にしていたせいで、.logo と .eyebrow が左へずれた（実測 13px と 99px）。
  どちらも <p> なので max-width:46ch が効いて箱が狭くなり、そのうえで
  クラス側に margin:0 … と書いたぶん、**auto の左右余白まで打ち消していた。**

  名前を付けた段落（.logo / .eyebrow / .mark / .note）は、
  それぞれ自分の幅と余白を持っている。ここから外しておけば、
  クラス側で margin を書いても中心がずれない。
*/
p:not([class]){margin:0 auto 16px;max-width:46ch}
p:not([class]):last-child{margin-bottom:0}
a{color:var(--ink)}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* 名乗り。**大きくしない。**「誰か」より「何を作ったか」を先に見せる。
   **大文字に変換しないこと。** 名前は全部小さい字（sawaya studio）で、
   ここで uppercase を掛けると SAWAYA STUDIO になってしまう */
/* 名乗りとキャッチの置き場。
   **高さを、下の札（正方形）とそろえる。**
   札は幅 --col の 1:1 なので、高さも --col。狭い画面では札が中身の幅まで縮むので、
   こちらも同じだけ縮める（中身の幅 = 画面 - main の左右の余白 20px ずつ）。
   中身は、その中で上下のまんなかに置く。 */
.top{
  padding:clamp(40px,9vw,84px) 0 0;
  min-height:min(var(--col), calc(100vw - 40px));
  /* **grid にしないこと。** 列の幅が中身なりに縮んで、
     ロゴが 400px から 300px になった（実測）。
     縦に積んで真ん中に寄せたいだけなので、flex で足りる。
     flex なら、中身は横いっぱいに伸びたままになる。 */
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* 名乗り。**画面のいちばん上、まんなかに置く。**
   焼いた 1 枚（assets/sawaya-studio.svg）なので、字間はあちらで決めてある。

   **小さくしすぎると、ただの見出しに見える。**
   横に長い組み（比 8:1）なので、幅で 420px あたりまで取って、
   ようやく「ロゴが置いてある」と読める。 */
/* **左右の余白に auto を書かないこと。**
   .top は flex なので、auto を書くと「伸ばす」が打ち消されて中身なりの幅になり、
   ロゴが 400px から 300px に縮む（実測）。
   横に伸びたこの箱の中で、svg のほうが margin:0 auto で真ん中に来る。 */
.logo{margin:0 0 34px}
.logo svg{
  display:block;margin:0 auto;
  /* **下の札と同じ幅にそろえる。** 狭い画面では、そちらに合わせて縮む */
  width:min(100%,var(--col));height:auto;
  color:var(--ink);
}
.mark{font-family:var(--label);font-size:11.5px;font-weight:600;
      letter-spacing:.22em;color:var(--faint);margin:0 0 14px}

/* 節の名前。**両側に罫を引いて、真ん中に置く** */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.eyebrow::before,
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

.note{font-size:12.5px;line-height:1.85;color:var(--sub)}

/* ---------- キャッチコピー ---------- */
/* **1 つの塊にすること。** 行ごとに見出しを分けると、行間ではなく
   見出しどうしの余白が入って、2 つの別の文に見える。
   字詰めは tools/kerning.mjs が 1 字ずつ入れているので、ここでは触らない。 */
.catch{
  margin:0 auto 20px;max-width:var(--col);
  /* **ロゴより小さくすること。** ロゴの字の高さと同じにすると、
     並んだときにロゴが勝てず、名乗りが弱く見える。
     キャッチらしさは大きさではなく、字間の開きで出す */
  font-size:clamp(15px,2.9vw,19px);
  /* **太くしない。** 太字にすると見出しの顔になる。
     キャッチコピーは、細めの字を大きく開けて置くほうがそれらしく見える */
  font-weight:500;
  line-height:2.15;
  letter-spacing:.16em;
  /* **開けたぶんを、頭で戻す。**
     字間は「字のうしろ」に足されるので、最後の 1 字のうしろにも空きが残る。
     真ん中そろえだと、そのぶん左へ寄って見える */
  text-indent:.16em;
  text-wrap:balance;
}
/* その下の一行。**キャッチより弱く。** 主役は上 */
.lead{
  margin:0 auto;max-width:var(--col);
  font-size:12.5px;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--sub);
}

/* ============================================================
   棚。**札そのものが、その道具の顔。**
   ============================================================ */
/* **1 行につき 1 枚を、縦に並べる。** 横に 2 枚置くと、どちらも小さくなって
   「その道具の顔」ではなく「小さな絵」になる。
   幅いっぱいまで伸ばさないのは、**大きすぎると顔ではなく背景になる**から */
.shelf{list-style:none;margin:0 auto;padding:0;display:grid;
  gap:clamp(22px,4vw,38px);max-width:var(--col)}

.shelf li{position:relative}

/* 顔の入る枠。**角丸と影だけがこちらの持ちもので、中身は道具のもの**。
   **正方形。** recaday のワードマークは、もともとインスタの投稿（正方形）に
   合わせて焼いてあるので、この枠なら「短辺の 52%」がそのまま効く */
.face{
  position:relative;
  aspect-ratio:1/1;
  container-type:size;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(26,26,26,.05);
  transition:transform .16s ease, box-shadow .16s ease;
}
.shelf li:hover .face{transform:translateY(-2px);box-shadow:0 10px 26px rgba(26,26,26,.13)}
.shelf li:has(a:focus-visible) .face{outline:2px solid var(--ink);outline-offset:3px}

/* 札の下の名前。**顔の中には字を置かない**ので、名前はここに出る。
   名前と、走る場所を縦に積んで、札の真ん中に置く */
.shelf .name{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  margin:13px 0 0;
}
.shelf .name b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.shelf .name span{font-family:var(--label);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
/* 札の下に置く、ストアの黒い札。名前と Instagram のあいだ。
   **札そのものより上に置くこと**（下の .more と同じわけ）。
   Google Play の札が来たら、同じ高さで横に並ぶ */
.shelf .badges{position:relative;z-index:1;--badge:14px;margin-top:12px}
.shelf a.badge{color:#fff}
.shelf a.badge::after{content:none}
.shelf .badges + .more{margin-top:10px}

/* 札の下に置く、ほかの行き先（Instagram など）。

   **札そのものより上に置くこと。** 札は「どこを押しても飛ぶ」ようにしてあり、
   その当たり判定（.shelf a::after）が札ぜんぶを覆っている。
   上に出しておかないと、ここを押しても札のほうへ飛ぶ。 */
.shelf .more{
  position:relative;z-index:1;
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  margin-top:7px;
}
/* **並べた行き先は、それぞれ自分の上だけを押せるようにする。**
   札の当たり判定（.shelf a::after）は、いちばん近い position の付いた箱を覆う。
   a に position が無いと、それぞれの判定が .more ぜんぶに広がり、
   最後の 1 つ（Instagram）が手前の行き先をまるごと塞ぐ */
.shelf .more a{
  position:relative;
  font-family:var(--label);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
}
.shelf .more a:hover{color:var(--ink);border-bottom-color:var(--faint)}

.shelf a{text-decoration:none;color:inherit}
.shelf a::after{content:"";position:absolute;inset:0}  /* 札のどこを押しても飛ぶ */
.shelf a:focus-visible{outline:none}

/* ---------- recaday の顔 ----------
   うしろ … 7:00 の空と、流れる雲
   まんなか … ワードマーク */

/* 地の色。**空が描けない環境でも、ここが残る**（skyTable.ts の 7:00 の 3 色） */
.face--recaday{
  background:linear-gradient(to bottom,#5D8197 0%,#7097AD 52%,#CAC4A8 100%);
}
/* 空そのもの。**closed-test の頁と同じもの**（/assets/sky.js が描く）。
   縞で真似ていたことがあるが、**縞は雲にならない。** */
.face--recaday canvas{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
}
/* ワードマーク。**投稿とまったく同じ大きさ**（短辺の 52%）。
   53.9 は、焼いた 1 枚が余白を左右に持っているぶん（52 × 1.036）。
   ロゴのインク幅で 52% になる。

   **絵の中心と、字の中心は同じではない。** 焼いた 1 枚（1658 x 536）を測ると、
     上下 … 字は画像のちょうど中央。上下いっぱいに詰まっている（ずれ 0.0px）
     左右 … 左の余白 57px に対し、右は 3px。**字は右へ 27.5px 寄っている**
   絵をそのまま中央に置くと、そのぶん字が右へずれる。
   1.66% は 27.5 / 1658。**translate の % は自分の幅に対する比**なので、
   -51.66% でちょうど打ち消せる。

   closed-test と recaday の頁では、投稿と同じ「ぴったり中央より少し上」
   （top:47%）のまま。この札だけは、頁ぜんぶを真ん中にそろえたので中央に置く。 */
.face--recaday .lockup{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-51.66%,-50%);
  width:53.9cqmin;
  height:auto;
  filter:drop-shadow(0 0.2cqmin 0.6cqmin rgba(0,0,0,.28));
}

/* ---------- オートモザイクの顔 ----------
   うしろ … 白い紙
   まんなか … タイル 4 つのしるし

   **角を丸めない。** 道具が作るのは四角いタイルで、道具の形もそれに合わせてある。 */
.face--mosaic{background:#fff}
.face--mosaic .tiles{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:46cqmin;height:auto;
}

/* ---------- テロップスタジオの顔 ----------
   うしろ … 方眼紙
   まんなか … 看板

   方眼も緑もオレンジも、道具の ui/public/index.html と同じ値。 */
.face--telop{
  background-color:#fbf4e4;
  background-image:
    linear-gradient(#eee5cf 1px,transparent 1px),
    linear-gradient(90deg,#eee5cf 1px,transparent 1px);
  background-size:32px 32px;
}
/* 看板。緑の箱に白い字、オレンジのぼかさない影、黒の縁。

   **太らせない。** ゴチカクットは1ウェイトしか無いので、900 を求めると
   ブラウザが勝手に太らせて、角と隙間が潰れる。900 は書体が読めなかったとき用。

   **余白と角丸と影は、文字サイズに対する比で持つ。**
   道具の側（16px のとき padding 1px 11px / 角丸 8px / 影 3px）と同じ比。
   px で置くと、札の大きさが変わったときだけ看板の比率が崩れる。

   **overflow:hidden を掛けないこと。** この書体は字のインクが送り幅より
   わずかに外へ出るので、最後の一字（「オ」）が切り落とされる。 */
.face--telop .brand{
  /* 置き方は recaday のワードマークとそろえる。**ぴったり中央より少し上**。
     真ん中に置くと、下に沈んで見える。

     そのうえで、**影の半分だけ左上へ戻す。**
     影は右下へずらした面を 1 枚置くだけのものなので、枠のまんなかに
     箱を置くと、影のぶん重心が右下へ寄って見える。 */
  position:absolute;
  top:47%;left:50%;
  transform:translate(calc(-50% - 0.095em), calc(-50% - 0.095em));
  font-family:"Telop Logo",var(--ui);font-weight:900;font-synthesis-weight:none;
  font-size:7.5cqh;line-height:1.4;
  color:#fff;background:#2fa45f;
  border:2px solid #16211b;
  border-radius:0.5em;
  padding:0.06em 0.7em 0.1em;
  box-shadow:0.19em 0.19em 0 #f2913c;
  white-space:nowrap;
}

/* ---------- 顔を持たない道具 ---------- */
.face--plain{
  background:var(--card);
  display:grid;place-items:center;
}
.face--plain i{
  display:block;width:26cqh;height:26cqh;border-radius:6px;
  background:var(--tint,var(--line));
}

/* ---------- 連絡先 ---------- */
/* **真ん中に 1 列。** 2 列の表にすると、中央そろえの中でここだけ左右に散る */
.links{list-style:none;margin:0 auto;padding:0;display:grid;gap:10px;max-width:var(--col)}
.links li{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:14px}
.links b{font-family:var(--label);font-weight:600;color:var(--faint);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.chips li{font-size:12px;font-weight:600;padding:5px 11px;border-radius:99px;
  background:#fff;border:1px solid var(--line);color:var(--sub)}

footer{border-top:1px solid var(--line);margin-top:clamp(44px,8vw,88px);
  padding:20px 20px 40px;font-size:12px;color:var(--faint)}
.footin{max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 14px;
  align-items:center;justify-content:center;text-align:center}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}

/* ---------- ストアの黒い札（themes/_lib.mjs の badges()） ----------
   build が、どのテーマの css のうしろにも足す。
   **大きさは --badge だけで決める。** 札の高さは --badge の 3 倍。
   並べる札はどれも同じ高さになる（Apple と Google の札を並べたとき、
   高さが揃っていないと片方が偉そうに見える）。 */
.badges{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:calc(var(--badge, 16px) * .75);
}
a.badge{
  position:relative;
  display:inline-flex;align-items:center;
  gap:.45em;
  height:3em;
  padding:0 1.05em 0 .8em;
  font-size:var(--badge, 16px);
  border-radius:.56em;
  background:#000;color:#fff;
  border:1px solid #A6A6A6;
  text-decoration:none;
  white-space:nowrap;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;
  transition:filter .12s ease;
}
a.badge:hover{filter:brightness(1.3)}
a.badge:focus-visible{outline:2px solid currentColor;outline-offset:3px}
a.badge svg{width:1.6em;height:1.6em;margin-top:-.2em;flex:none}
a.badge span{display:flex;flex-direction:column;line-height:1.08;text-align:left}
a.badge b{font-size:1.32em;font-weight:600;letter-spacing:-.02em}
a.badge small{font-size:.7em;font-weight:500;letter-spacing:.01em}
a.badge[data-l="ja"] small{font-size:.74em;letter-spacing:.06em}