/* nowthy.com の共通の意匠（2026-09-10 に各ページの <style> から括り出した）。
 *
 * それまでは「色・字・余白の正本はあちら。変えるときは三つとも直すこと」という注記を
 * 頼りに、同じ規則を 9 枚の HTML に写していた。ここが唯一の正本。
 * ページ固有の物（Petit Fire のつまみ、Callulu の cue の一覧、記事の CTA…）は
 * そのページの <style> に残す。**ここを変えたら HTML の ?v= を上げること**
 * （/assets/* は 1 日キャッシュ ＋ stale-while-revalidate 7 日）。
 *
 * body に付ける印:
 *   （無印）   ハブ・製品ページ・グッズ。幅 68rem、行間 1.65
 *   .reading   記事・規約・一覧・404。幅 42rem、行間 1.7、見出しは本文の字組
 *   .ja        和文。字体を前に置き、行間を広く、見出しの詰めをやめる
 * header に付ける印:
 *   .bar             追従する帯（ぼかし・下線）
 *   .bar             狭いときはハンバーガー（#nav-toggle と nav#site-nav、assets/nav.js）。2026-09-16 に全部の面で揃えた
 *   .plain           素の帯（記事・規約・一覧）
 */

:root {
  --bg: #0f1115;
  --bg-lift: #171a21;
  --line: #262b36;
  --line-warm: #4a3a2e;  /* 前に出すカードの縁（ハブの Petit Fire、Callulu の直販） */
  --text: #f4f6fa;
  --muted: #9ea6b8;
  --muted-2: #8a92a6;    /* muted より一段引く（無い物の行）。地に対して 4.9:1 */
  --accent: #ff5c42;   /* 屋号の赤。Petit Fire のページはアプリの赤 #ff453a で上書きする */
  --ink-on-accent: #1a0f0c;  /* 赤いボタンの上の字 */
  --blue: #077fd9;
  --measure: 34rem;    /* 本文の一行の長さ */

  /* ---- 目盛り（2026-09-11 に全面から集めて一本にした。面ごとの数字は置かず、ここを指す）----
   * 字の大きさ: 見出しは 2 段（大／小）、本文の周りは 4 段。
   *   --h1 面の頭（ハブ・製品）／--h1-small 屋号の和文・グッズ／--h2 節／--h2-small 小さな面の節
   *   --h3 カードの題（1.15rem）／--h4 項目の題（1rem・字間 0.06em）
   *   --fs-1 0.95 カードの本文・箇条／--fs-2 0.9 注・日付・ナビ・つまみの題／--fs-3 0.85 細字・小さな札
   *   --fs-kicker 0.8 大文字の見出し札（字間 0.06em・600）
   * 角丸: --r-card 12（カード・箱）／--r-media 10（絵・動画）／--r-ui 8（押す物・入力・呼びかけ）／--r-pill 999／--r-code 4
   * 余白: --hero-top 5 / --hero-bottom 4（カードが続く面は 3）／--section 4／--pad-card 1.6×1.7 / --pad-card-lg 2.2×2.4／--gap-cards 1.5 */
  --h1: clamp(2.2rem, 5.5vw, 3.6rem);
  --h1-small: clamp(1.9rem, 4.6vw, 2.9rem);
  --h2: clamp(1.6rem, 3.4vw, 2.2rem);
  --h2-small: clamp(1.35rem, 2.8vw, 1.8rem);
  --h3: 1.15rem;
  --h4: 1rem;
  --lead: clamp(1.05rem, 2.2vw, 1.3rem);
  --fs-1: 0.95rem;
  --fs-2: 0.9rem;
  --fs-3: 0.85rem;
  --fs-kicker: 0.8rem;
  --track: 0.06em;     /* 大文字の札と項目の題の字間 */
  --r-card: 12px;
  --r-media: 10px;
  --r-ui: 8px;
  --r-pill: 999px;
  --r-code: 4px;
  --hero-top: 5rem;
  --hero-bottom: 4rem;
  --section: 4rem;
  --pad-card: 1.6rem 1.7rem;
  --pad-card-lg: 2.2rem 2.4rem;
  --gap-cards: 1.5rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(135deg, #343a4e 0%, var(--bg) 55%, #0a0b0f 100%) no-repeat fixed;
  color: var(--text);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.reading { line-height: 1.7; }
body.ja {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.85;
}
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
body.reading .wrap { max-width: 42rem; }
a { color: var(--text); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
body.reading h1, body.reading h2, body.reading h3 { line-height: 1.2; }
body.ja h1, body.ja h2, body.ja h3 { line-height: 1.4; letter-spacing: 0.01em; }
p strong, li strong { color: var(--text); font-weight: 600; }

/* ---- 印と名前 ----------------------------------------------------------
 * 屋号のページは顔（n・o が目、w が口）、製品のページはその製品の印。
 * **30px なので単色**（色つきは濃い地の 48px 以上。outputs/Nowthy-Brand/README.md「文字色」）。
 * 印は HTML に直に書く（<img> だと /assets/* の縁のキャッシュに顔の版が縛られる。2026-09-10 に踏んだ） */
.brand { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; color: var(--text); text-decoration: none; }
.brand .mark { width: 30px; height: 30px; color: var(--text); flex: none; }
.brand span, .brand a { color: inherit; text-decoration: none; white-space: nowrap; }

/* ---- 追従する帯（ハブ・製品ページ・グッズ） ---- */
header { padding: 0; }
.bar { position: sticky; top: 0; z-index: 50;
  background: rgba(15, 17, 21, 0.86); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 1rem; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.bar .brand { margin-right: auto; }
.bar nav { display: flex; gap: 1.4rem; align-items: center; }
/* 押せる高さを 24px 以上に（2026-09-16。帯のナビは 22px、足元は 17px だった）。字の位置は変えず、上下に余白を足す */
.bar nav a { color: var(--muted); text-decoration: none; font-size: var(--fs-2); white-space: nowrap; padding-block: 0.3rem; }
.bar nav a:hover { color: var(--text); }
/* ---- 狭い画面のメニュー（2026-09-16 に全部の面で揃えた。前は Callulu の面の <style> だけにあった）----
 * 題目は開け閉めのボタンの下に縦に並べる。開け閉めは assets/nav.js。前の横に流す形（.nav-scroll）は 2026-09-23 に規則ごと外した */
#nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-ui);
  color: var(--text); padding: 0.45rem 0.6rem; cursor: pointer; line-height: 0; }
#nav-toggle svg { width: 18px; height: 14px; }
#nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 46rem) {
  #nav-toggle { display: inline-flex; }
  .bar nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 0.5rem 1.5rem 1rem; }
  .bar nav.is-open { display: flex; }
  .bar nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .bar nav a:last-child { border-bottom: none; }
}

/* ---- 本文へ移動（2026-09-16）。キーボードで最初に Tab を押したときだけ見える ---- */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--bg-lift); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-ui); padding: 0.55rem 0.95rem; text-decoration: none; font-size: var(--fs-2); }
.skip:focus { top: 0.6rem; }

/* ---- Mac に送る（2026-09-16。assets/send-to-mac.js が指で触る画面のときだけ出す）---- */
.to-mac[hidden] { display: none; }  /* `display: flex` は [hidden] の既定より強い。2026-09-16、
   Mac でも箱が出たままだったのはこれが原因（JS は hidden を外していなかった） */
.to-mac { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 1.4rem 0 0; max-width: var(--measure); }
.to-mac .to-mac-note { color: var(--muted); font-size: var(--fs-2); flex: 1 1 14rem; }

/* 動きを減らす設定の人には、面内リンクの滑りも無くす（灯りの JS と Callulu の CSS は元から見ている） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- 素の帯（記事・規約・一覧・404） ---- */
header.plain { padding: 2rem 0 0; }
header.plain .wrap { display: flex; align-items: center; gap: 1.2rem; }
header.plain .brand { margin-right: auto; }
header.plain nav a { color: var(--muted); text-decoration: none; font-size: var(--fs-2); padding-block: 0.3rem; }
header.plain nav a:hover { color: var(--text); }

/* ---- 面の頭 ---- */
.hero { padding-top: var(--hero-top); padding-bottom: var(--hero-bottom); }
.hero h1 { font-size: var(--h1); font-weight: 600; }
.hero p.lead { font-size: var(--lead); color: var(--muted); max-width: var(--measure); margin: 1.4rem 0 0; }
.note { color: var(--muted); font-size: var(--fs-2); margin-top: 1.6rem; }
/* まだ押せないものは破線の箱。押せないことが見た目で分かるように */
/* 2026-09-11: 破線の箱はボタンに見えて押されるので、素の一行にした（色は muted、印に点） */
.soon { display: inline-flex; align-items: center; gap: 0.5rem; margin: 2.2rem 0 0; padding: 0;
  color: var(--muted); font-size: var(--fs-1); line-height: 1.4; }
.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: 0.6; flex: none; }

/* ---- 節 ---- */
section { padding: var(--section) 0; border-top: 1px solid var(--line); }
section > .wrap > h2 { font-size: var(--h2); font-weight: 600; }
section p { max-width: var(--measure); color: var(--muted); }

/* ---- 押すもの ---- */
.go { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.4rem; border-radius: var(--r-ui);
  background: var(--accent); color: var(--ink-on-accent); font-weight: 600; text-decoration: none; font-size: 1rem; }
.go:hover { filter: brightness(1.08); }
/* 縁だけの控えめな押し場所（グッズの「Buy on SUZURI」、和文ページのリンク） */
.go.quiet { background: transparent; color: var(--text); font-weight: 500; font-size: var(--fs-2);
  border: 1px solid var(--line); padding: 0.5rem 0.9rem; }
.go.quiet:hover { filter: none; border-color: var(--muted); }
.alt { color: var(--muted); font-size: var(--fs-1); text-decoration: none; border-bottom: 1px solid var(--line);
  padding-bottom: 0.15rem; transition: color .15s, border-color .15s; }
.alt:hover, .alt:focus-visible { color: var(--text); border-color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; margin: 1.6rem 0 0; }

/* ---- 枠（呼びかけ・規約の要約・記事の締め） ---- */
.callout, .summary, .cta { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-ui);
  background: var(--bg-lift); padding: 1.2rem 1.4rem; margin-top: 2rem; max-width: var(--measure); }
.callout p, .summary p { margin: 0; }

/* ---- Notes 欄（publish.py が目印の間を書き換える） ---- */
.notes { list-style: none; padding: 0; margin: 2rem 0 0; max-width: var(--measure); }
.notes li { border-top: 1px solid var(--line); padding: 0.9rem 0; }
.notes .kind { display: block; color: var(--accent); font-size: var(--fs-kicker); font-weight: 600; }
.notes a { font-weight: 600; text-decoration: none; }
.notes a:hover { text-decoration: underline; }
.notes .date { display: block; color: var(--muted); font-size: var(--fs-3); margin-top: 0.15rem; }


/* ---- 足元 ---- */
footer { border-top: 1px solid var(--line); padding: 3rem 0 4rem; color: var(--muted); font-size: var(--fs-2); }
/* 足元のリンクは行の中の字なので、上下の余白は行の高さを変えずに押せる範囲だけを広げる */
footer a { color: var(--muted); padding-block: 0.3rem; }
footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
footer h3 { font-size: var(--fs-kicker); letter-spacing: var(--track); text-transform: uppercase; color: var(--text); margin-bottom: 0.6rem; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin: 0.3rem 0; }
footer .fine { margin: 2.5rem 0 0; }
body.reading footer { margin-top: 5rem; padding: 2.5rem 0 4rem; }

/* ---- 読む面の本文（記事・規約） ---- */
body.reading .title { padding-top: 3.5rem; }
body.reading h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 600; }
body.reading h2 { font-size: 1.25rem; font-weight: 600; margin: 2.6rem 0 0.6rem; }
body.reading h3 { font-size: 1.05rem; font-weight: 600; margin: 1.8rem 0 0.4rem; }
body.reading p, body.reading li { color: var(--muted); }
body.reading ul, body.reading ol { padding-left: 1.2rem; }
body.reading li { margin-bottom: 0.4rem; }
body.reading code { font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text);
  background: var(--bg-lift); border: 1px solid var(--line); border-radius: var(--r-code); padding: 0 0.3em; }
body.reading blockquote { margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 3px solid var(--line); }
body.reading blockquote p { margin: 0; }
.updated { color: var(--muted); font-size: var(--fs-2); margin-top: 1rem; }

/* ---- 共通の部品（2026-09-11。面ごとに書いていた同じ物を一つに。どこも使っていなかった .card・.h3・.h4 は 2026-09-23 に外した）---- */
.kicker { color: var(--muted); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: var(--track);
  text-transform: uppercase; margin: 0 0 0.5rem; }
.is-lead .kicker, .is-full .kicker { color: var(--accent); }
.media { display: block; width: 100%; height: auto; border-radius: var(--r-media); border: 1px solid var(--line); }
figcaption { color: var(--muted); font-size: var(--fs-2); margin-top: 0.7rem; }
/* 押す物の縁だけの版（つまみの列・試す欄・和文の札）。.go.quiet と同じ寸法 */
.btn-quiet { display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; font-size: var(--fs-2); font-weight: 500;
  color: var(--text); background: var(--bg-lift); border: 1px solid var(--line); border-radius: var(--r-ui); padding: 0.5rem 0.9rem;
  cursor: pointer; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.btn-quiet:hover { border-color: var(--muted); }
.btn-quiet:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-quiet[aria-pressed="true"] { border-color: var(--accent); }
.btn-quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 屋号は小文字（2026-09-11）。大文字にする札・見出しの中でも小文字のまま見せる */
.lc { text-transform: none; }
/* 動画と静止画の対（2026-09-11）。動きを減らす設定では静止画だけを出す */
/* 面ごとの `.app .shot { display: block }` などに負けないよう !important（負けて 2 枚重なった。2026-09-11） */
.v-still { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .v-motion { display: none !important; }
  .v-still { display: block !important; }
}

/* ---- 左上の道（2026-09-11）----
 * 製品の面・規約・記事では「nowthy › いまの面」。nowthy は常に屋号の家（/）へ。
 * nowthy の面（ハブ・グッズ・プレス・404）は今までどおり .brand だけ。
 * <nav> にしないのは、.bar nav の規則（色・流し・ハンバーガー）に巻き込まれないため */
/* 道は縮ませない（縮むと字が隣のナビに重なった。2026-09-11）。縮んで横に流れるのはナビの方 */
.path { display: flex; align-items: center; gap: 0.55rem; margin-right: auto; flex: none; }
.bar .path .brand, header.plain .path .brand { margin-right: 0; color: var(--muted); }
.path .brand .mark { color: var(--muted); }
.path .brand:hover, .path .brand:hover .mark { color: var(--text); }
.path .sep { color: var(--muted); font-size: var(--fs-2); }
.path .here { display: flex; align-items: center; gap: 0.5rem; color: var(--text); font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.path .here .mark { width: 24px; height: 24px; color: var(--text); flex: none; }
@media (max-width: 46rem) {
  .path .here .mark { display: none; }   /* 狭いときは製品の印を外して、字だけ */
}