/* サイト固有のレイアウトだけを書く。色・書体・サイズ・余白は tokens.css の変数だけを使う。 */

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0;
  padding-inline: var(--space-4);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin-inline: auto; padding-block: var(--space-9) var(--space-8); }

/* identity: 型・姿勢・構造 の三色を 2:1:1 で並べる */
.brandbar { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 3px; width: 120px; margin-bottom: var(--space-5); }
.brandbar i:nth-child(1) { background: var(--brand-kata-on-light); }
.brandbar i:nth-child(2) { background: var(--brand-shisei-on-light); }
.brandbar i:nth-child(3) { background: var(--brand-kozo-on-light); }
[data-mode="curtain"] .brandbar i:nth-child(1) { background: var(--brand-kata-on-dark); }
[data-mode="curtain"] .brandbar i:nth-child(2) { background: var(--brand-shisei-on-dark); }
[data-mode="curtain"] .brandbar i:nth-child(3) { background: var(--brand-kozo-on-dark); }

.mast { border-left: 1px solid var(--ink); padding-left: var(--space-5); margin-bottom: var(--space-8); }
.mast .name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--size-h1); letter-spacing: 0.04em; line-height: 1.3; }
.mast .name a { color: inherit; text-decoration: none; }
.mast .tagline { margin: var(--space-2) 0 0; color: var(--muted); }

h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--size-h2); line-height: 1.4; margin: 0 0 var(--space-3); }
.eyebrow { font-size: var(--size-caption); font-weight: 500; letter-spacing: 0.18em; color: var(--muted); margin: var(--space-8) 0 var(--space-4); text-transform: uppercase; }
h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--size-lead); margin: 0 0 var(--space-1); }
p { margin: 0 0 var(--space-3); max-width: 62ch; }
.lead { font-family: var(--font-display); font-size: var(--size-lead); line-height: 1.75; }
.en { color: var(--muted); font-size: var(--size-small); }
a { color: var(--accent); text-underline-offset: 3px; }

.mvv { display: flex; gap: var(--space-5); font-family: var(--font-display); font-size: var(--size-lead); letter-spacing: 0.14em; margin: var(--space-5) 0; }

.item { border-top: 1px solid var(--line); padding-block: var(--space-5); }
.item:last-child { border-bottom: 1px solid var(--line); }
.item .label { font-family: var(--font-body); font-size: var(--size-small); color: var(--muted); margin-left: var(--space-2); }

dl.facts { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
ul { padding-left: 1.2em; margin: 0 0 var(--space-3); }

footer { margin-top: var(--space-9); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--size-caption); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
footer a { color: var(--muted); }

@media (max-width: 560px) {
  .wrap { padding-block: var(--space-8) var(--space-7); }
  .mast .name { font-size: var(--size-h2); }
  h1 { font-size: var(--size-h3); }
  dl.facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.facts dd { margin-bottom: var(--space-3); }
}