/* 鯖江数学塾サイトの要素の既定値。数値はすべて tokens.css の変数から取る（直接の数値を書かない） */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  line-height: var(--lh);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t0);
  font-weight: 400;
}

/* ---------- 見出し（DESIGN.md §5 役割ごとの組み方） ---------- */
h1, h2, h3 {
  margin: 0;
  font-feature-settings: "palt";
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 300; line-height: 1.35; letter-spacing: 0.04em; }
h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.45; letter-spacing: 0.03em; }
h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.6;  letter-spacing: 0.02em; }

/* ---------- 本文 ---------- */
p { margin: 0 0 var(--y1); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

small, .small {
  font-size: var(--t-1);
  line-height: 1.75;
}

/* ---------- リンクとボタン（§8、§9） ---------- */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gray);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--ease);
}
a:hover { text-decoration-color: var(--ink); }
a:active { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.btn {
  display: inline-block;
  padding: calc(var(--y-half) - 1px) var(--x2);
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { background: var(--gray); border-color: var(--gray); color: var(--paper); }

/* ---------- ラベル（§9） ---------- */
.label {
  font-family: var(--f-mono);
  font-size: var(--t-1);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--gray);
}

/* 英字の大文字のラベルは字間を広げる */
.caps { letter-spacing: 0.08em; }

/* 見出しを読み上げにだけ残す */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 罫線（§7）。罫線の太さを余白から引いて行の格子を保つ ---------- */
.rule-top { border-top: var(--hair); padding-top: calc(var(--y1) - 1px); }
.rule-bold { border-top: var(--bold); padding-top: calc(var(--y1) - 2px); }

/* ---------- グリッド（§3） ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  max-inline-size: calc(var(--max) + 2 * var(--margin));
  margin-inline: auto;
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}
.span-all { grid-column: 1 / -1; }

/* 本文の欄: 行長は 40 字まで、幅は字の整数倍に切り下げる */
.measure {
  max-inline-size: var(--measure);
  inline-size: round(down, 100%, 1em);
}

/* ---------- 記事の 3 段組み（§4） ---------- */
.article-toc { grid-column: 1 / -1; margin-bottom: var(--y2); }
.article-body { grid-column: 1 / -1; min-width: 0; }
.article-body p { text-align: justify; }

/* 注: S と M では参照した文の直後に挟む */
.note {
  display: block;
  margin-block: var(--y-half);
  padding-top: calc(var(--y-half) - 1px);
  border-top: var(--hair);
  font-size: var(--t-1);
  line-height: 1.75;
  text-align: start;
}
.note-no, .ref {
  font-family: var(--f-mono);
  font-size: var(--t-1);
  color: var(--gray);
}
.ref { vertical-align: super; line-height: 0; margin-left: 0.1em; }
.note-no { display: block; }

@media (min-width: 64rem) {
  .article-toc {
    grid-column: 1 / span 3;
    align-self: start;
    position: sticky;
    top: var(--y2);
    margin-bottom: 0;
  }
  .article-body { grid-column: 4 / span 6; }

  /* 注: L では右の 3 段（10〜12 段）に浮かせる。
     本文の欄 W（6 段 + 5 溝）に対して、注の幅 = 3 段 + 2 溝 = W/2 − 溝/2、
     右へのはみ出し = 注の幅 + 溝 = W/2 + 溝/2 */
  .note {
    float: right;
    clear: right;
    width: calc(50% - var(--gutter) / 2);
    margin: 0 calc(-50% - var(--gutter) / 2) var(--y1) 0;
  }
}

/* ---------- 図版（§10） ---------- */
figure { margin: var(--y2) 0; }
figure svg { display: block; inline-size: 100%; block-size: auto; }
figcaption {
  margin-top: var(--y-half);
  font-size: var(--t-1);
  line-height: 1.75;
  color: var(--gray);
}
.fig-grid  { stroke: var(--fig-pale); stroke-width: 1; fill: none; }
.fig-axis  { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.fig-curve { stroke: var(--fig); stroke-width: 2; fill: none; }
.fig-arrow { fill: var(--ink); }
.fig-pt    { fill: var(--paper); stroke: var(--fig); stroke-width: 2; }
.fig-dot   { fill: var(--fig); }
.fig-num   { fill: var(--ink); font-family: var(--f-mono); }
.fig-label { fill: var(--ink); font-family: var(--f-sans); }
.fig-math  { fill: var(--fig); font-family: var(--f-math); font-style: italic; }