/* mujo の販売サイト — 読む場 (hp)。値は tokens.css (25h デザインの生成物の写し) から引く。
   ここで役 (--washi など) を宣言し直さない。新しい値が要る時は DESIGN.md の YAML が先。 */
@import url("tokens.css");

:root { --ladder: reading; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: var(--read-body-ja);
  line-height: var(--lh-reading);
  letter-spacing: var(--ls-reading);
  /* 長い URL・英単語・{{置き場}} が画面幅を押し広げないようにする */
  overflow-wrap: anywhere;
  line-break: strict;
}
:lang(en) body, body:lang(en) {
  font-family: var(--serif-en);
  font-size: var(--read-body-en);
  line-height: var(--lh-reading-en);
  letter-spacing: var(--ls-reading-en);
}

/* 器。一行幅は字数 (em) で持つ */
.head, .page, .foot { max-width: var(--measure-reading); margin: 0 auto; }

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-in) var(--gap-group);
  padding: 1.5rem 0 0;
}
.head a, .head span {
  font-family: var(--ui-latin);
  font-size: var(--read-ui);
  letter-spacing: var(--tr-wide);
}
.head .home { color: var(--sumi); }
.head nav { display: flex; flex-wrap: wrap; gap: var(--gap-in) var(--gap-group); }
.head nav a { color: var(--muted); }
.head nav a, .foot a, .head .home {
  display: inline-flex;
  align-items: center;
  min-height: var(--row);
}

h1, h2, h3 { font-weight: 500; line-height: var(--lh-tight); text-wrap: balance; }
h1 { font-size: var(--read-display); margin: 3rem 0 1.4rem; letter-spacing: var(--ls-conversation); }
.page.doc h1 { font-size: var(--read-h1); margin: 1.6rem 0 0.9rem; }
h2 { font-size: var(--read-h2); margin: 3.5rem 0 0.9rem; }
h3 { font-size: var(--read-h3); margin: 0 0 0.5rem; }
p { margin: 0 0 1.2rem; text-wrap: pretty; }
strong { font-weight: 700; }

.lead { font-size: var(--read-lead); line-height: 1.7; }
.small { font-size: var(--read-caption); color: var(--muted); max-width: var(--measure-reading); }
.label {
  margin: 0 0 0.4rem;
  font-family: var(--ui-latin);
  font-size: var(--read-label);
  letter-spacing: var(--tr-label);
  color: var(--muted);
}

a { color: var(--ruri); text-decoration: none; }
p a, li a, td a { text-decoration: underline; text-decoration-thickness: var(--sw-hairline); text-underline-offset: 0.22em; }
a:hover { text-decoration: underline; text-decoration-thickness: var(--sw-hairline); text-underline-offset: 0.22em; }
a:focus-visible { outline: var(--sw-voice) solid var(--ruri); outline-offset: 3px; }

ul, ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
li { margin-bottom: 0.5rem; }

/* 今の状態 (まだ売っていない) — 自分の声の補足。面にも左罫にもしない */
.state { margin: 2rem 0 0; padding: 1rem 0; border-top: var(--sw-hairline) solid var(--hairline); border-bottom: var(--sw-hairline) solid var(--hairline); }
.state p { margin: 0; }

/* 3 層 — 押して飛ぶ箱ではないので、影も面も持たず罫で区切る */
.tiers { margin: 0; padding: 0; list-style: none; }
.tier { margin: 0; padding: 1.6rem 0; border-top: var(--sw-hairline) solid var(--hairline); min-width: 0; }
.tier:last-child { border-bottom: var(--sw-hairline) solid var(--hairline); }
.tier p { margin: 0 0 0.9rem; }
.tier p:last-child { margin-bottom: 0; }
.price { font-size: var(--read-h2); font-weight: 500; line-height: var(--lh-tight); letter-spacing: 0; font-family: var(--gothic); }
.price .alt { font-size: var(--read-caption); font-weight: 400; color: var(--muted); margin-left: 0.4em; }

/* 買う口 — 通常の声量 (塗りなし + line の枠)。未設定の間は押せない形で出す */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--row);
  padding: 0.55rem 1.4rem;
  border: var(--sw-hairline) solid var(--line);
  border-radius: var(--r-site-md);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: var(--read-button);
  letter-spacing: var(--ls-tool);
  text-decoration: none;
}
a.btn:hover { text-decoration: none; color: var(--ruri); }
.btn[aria-disabled="true"] { opacity: var(--op-disabled); cursor: default; }

/* 連載の一覧と本文 */
.toc { list-style: none; padding: 0; margin: 0 0 1rem; }
.toc li { margin: 0; border-top: var(--sw-hairline) solid var(--hairline); }
.toc li:last-child { border-bottom: var(--sw-hairline) solid var(--hairline); }
.toc a { display: flex; flex-wrap: wrap; gap: 0 var(--gap-group); align-items: center; min-height: var(--row); padding: 0.4rem 0; }
.toc .when { color: var(--muted); font-size: var(--read-caption); }
.entry { margin: 3.5rem 0 0; padding-top: 1.6rem; border-top: var(--sw-hairline) solid var(--hairline); }
.entry h2 { margin-top: 0.2rem; }
.entry blockquote, .quote { margin: 0 0 1.2rem; padding: 0.1rem 0 0.1rem 0.9rem; border-left: var(--sw-voice) solid var(--ruri); }

/* 取り決めの表。表は一行幅の対象外 (器の幅に従う) */
.kv { width: 100%; max-width: none; border-collapse: collapse; margin: 0 0 1.2rem; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 0.55rem 0; border-bottom: var(--sw-hairline) solid var(--hairline); font-size: var(--read-caption); }
.kv th { width: 34%; padding-right: 1rem; font-weight: 500; }
@media (max-width: 30rem) {
  .kv, .kv tbody, .kv tr, .kv th, .kv td { display: block; width: auto; }
  .kv th { border-bottom: 0; padding-bottom: 0.15rem; }
  .kv td { padding-top: 0; }
}

.foot {
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: var(--sw-hairline) solid var(--hairline);
  font-size: var(--read-caption);
  color: var(--muted);
}
.foot p { margin: 0 0 0.4rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--gap-group); }

@media (prefers-reduced-motion: no-preference) {
  a, .btn { transition: color var(--motion-fast) var(--ease); }
}