/* RONDO — 部品
   全ページが使う語彙。ここに置くのは名前が語彙になるものだけで、
   1 ページの中の 1 か所にしか出てこない節は home.css に書く。
   部品は面のことを知らない。--fg と --rule を見るだけにするので、紙の上でも墨の上でも同じクラスがそのまま使える。 */

/* 版面 */

/* 中央に 1180px の箱を置かない。箱にすると罫が箱の端で止まって、「背景に紙を敷いた」ように見える。
   本文の行長は --measure-* が段の側で押さえているので、版面を広げても行長は伸びない。 */
.sheet {
    width: 100%;
    padding: 0 var(--gutter-x);
}

/* 罫 */
.rule {
    display: block;
    width: 100%;
    height: var(--rule-w);
    border: none;
    margin: 0;
    background-color: var(--rule);
}

/* 天面 */

/* 白いカプセルを敷かず、文字と部品だけを置く。mix-blend-mode: difference で、
   白い文字は白地の上では黒に、黒地の上では白のままになる。
   掛けるのは入れ物の .nav。position: fixed は自前の重ね合わせ文脈を作るので、
   中の要素に掛けても .nav (透明) としか合成されず、白地で消える。 */
.nav {
    position: fixed;
    top: 22px;
    right: 26px;
    z-index: var(--z-nav);

    display: flex;
    align-items: center;
    gap: var(--space-5);

    color: var(--paper);
    mix-blend-mode: difference;
}

/* 天面に hover の動きを付けない。ポインタを載せただけで動くと、押す前に位置が変わる。
   色は currentColor に寄せる。.nav が difference で反転するので、
   決め打ちすると黒い節の上で消える。 */
.nav-link,
.nav-btn {
    color: inherit;
    font-family: var(--font-nav);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--dur) var(--ease);
}

/* 乗せても下線は引かない。薄くすると灰色になるので、見た目は変えない。
   いま見ているページにも引かない。読み上げには aria-current="page" で伝わる。 */

.nav-btn {
    padding: var(--space-1) var(--space-4);
    border: var(--rule-w) solid currentColor;
    border-radius: var(--radius-pill);
}

.nav-ctrl {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: var(--control-size);
    height: var(--control-size);
    padding: 0 var(--space-2);
    border: var(--rule-w) solid currentColor;
    border-radius: var(--radius-pill);
    background: transparent;
    /* button はブラウザ既定の color を持っていて、親の色を受け継がない。
       書かないと黒のまま残り、.nav の difference で白い地と打ち消し合って消える。 */
    color: inherit;
    font-family: var(--font-nav);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    cursor: pointer;
    transition: opacity var(--dur) var(--ease);
}

.nav-ctrl svg {
    width: var(--control-icon);
    height: var(--control-icon);
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
}

/* 押せる範囲を 44px まで広げる。見た目は 36px のまま */
.nav-ctrl::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--tap-size);
    height: var(--tap-size);
    transform: translate(-50%, -50%);
}

/* 言語の案内 (site.js の bootLangSuggest が出す)。形は .nav-ctrl のままで、
   文字だけ天面の行き先と同じ大文字にする。天面なので、載せても動かさない (§5.4) */
.nav-suggest {
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-menu-wrap {
    position: relative;
}

/* 一覧は天面の中に置かない (site.js が body の直下に出す)。
   .nav の difference は中身ごと掛かるので、中に置くと一覧まで反転する。
   位置は開くときに site.js の placeMenu が丸ボタンから計算して入れる。 */
.nav-menu {
    position: fixed;
    z-index: var(--z-menu);

    display: flex;
    flex-direction: column;
    /* いちばん長い言語名「Português (BR)」とコードが 1 行に収まる幅 */
    min-width: 190px;
    /* 上下に余白を持たない。乗せた行を墨で塗ったときに、最初と最後の行が枠まで届くように */
    padding: 0;

    /* 角を丸めず、影も付けない。墨の細い罫で囲むだけにする。
       角丸と影のついた箱は OS の部品のようで、ポスターの版面から浮く。 */
    border: var(--rule-w) solid var(--rule);
    background: var(--paper);

    /* 開く動き。ボタンの側の端から、箱が縦に開いていく。
       閉じているあいだは見えず、押せず、読み上げもしない (visibility)。
       display: none にしないのは、開く前に幅を測って置き場所を決めるため */
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition:
        clip-path var(--dur-fast) var(--ease),
        visibility 0s linear var(--dur-fast);
}

.nav-menu[data-side="above"] {
    clip-path: inset(100% 0 0 0);
}

.nav-menu.open {
    visibility: visible;
    clip-path: inset(0);
    transition:
        clip-path var(--dur-pop) var(--ease-pop),
        visibility 0s;
}

.nav-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--tap-size);
    padding: 0 var(--space-4);

    border: none;
    background: linear-gradient(var(--ink), var(--ink)) no-repeat right center / 0% 100%;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-label-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;

    /* 開くとき、上から 1 行ずつ下から出てくる。サイトの文字の出方 (.tl-inner) と同じ向き。
       行ごとの遅れ (--i) は site.js が開くときに入れる。1 行 0.02 秒で、11 言語でも 0.6 秒で出そろう */
    opacity: 0;
    transform: translateY(0.6em);
    transition:
        background-size var(--dur-slow) var(--ease-pop),
        color var(--dur-fast) var(--ease),
        opacity var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.nav-menu.open .nav-menu-item {
    opacity: 1;
    transform: none;
    transition:
        background-size var(--dur-slow) var(--ease-pop),
        color var(--dur-fast) var(--ease),
        opacity var(--dur-pop) var(--ease-pop) calc(var(--i, 0) * var(--stagger) / 6),
        transform var(--dur-pop) var(--ease-pop) calc(var(--i, 0) * var(--stagger) / 6);
}

/* 乗せたとき。行を墨で塗って白抜きにする。強さは色ではなく面の反転で作る。
   薄くするだけでは、押せる行に見えない。
   墨は左から伸び、外すと右へ抜ける (伸びるときは左、縮むときは右を基準にする)。 */
.nav-menu-item:focus-visible {
    outline: none;
    background-position: left center;
    background-size: 100% 100%;
    color: var(--paper);
}

@media (hover: hover) {
    .nav-menu-item:hover {
        background-position: left center;
        background-size: 100% 100%;
        color: var(--paper);
    }
}

.nav-menu-item:is(:hover, :focus-visible) .nav-menu-code {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu.open .nav-menu-item {
        transition-delay: 0s;
    }
}

.nav-menu-item[aria-current="true"],
.nav-menu-item[aria-current="page"] {
    font-weight: var(--weight-bold);
}

.nav-menu-page {
    font-family: var(--font-nav);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* ページの一覧を開くボタン。行き先が隠れる狭い画面でだけ出す */
.nav-pages {
    display: none;
}

.nav-menu-code {
    color: var(--fg);
    font-size: var(--text-label-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

@media (max-width: 899px) {
    .nav {
        top: 16px;
        right: 16px;
        gap: var(--space-4);
    }

    .nav-link {
        display: none;
    }

    .nav-pages {
        display: block;
    }
}

@media (max-width: 767px) {
    .nav {
        gap: var(--space-nav-sp);
    }
}

/* 言語の案内は、幅 375px (いま出ている iPhone でいちばん狭い幅) より狭い画面では出さない。
   いちばん長い「PORTUGUÊS」で、天面が 375px の画面の左端から 21px まで伸びる。
   それより狭いと、画面の左右の余白 (16px) に食い込む */
@media (max-width: 374px) {
    .nav-suggest {
        display: none;
    }
}

/* 見出し */

/* 章の上に置く行。番号と英字ラベルを置き、残りを罫で右まで渡す。
   罫は ::after が末尾で伸びる。.eyebrow-rule を子に置くと、そこで伸びる形 (罫の右にも日付などを置ける)
   も書いてあるが、使っているページはいまは無い。 */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-4);

    margin-bottom: var(--space-7);
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label-wide);
    text-transform: uppercase;
}

.eyebrow:not(:has(.eyebrow-rule))::after {
    content: "";
    flex: 1;
    height: var(--rule-w);
    background: var(--rule);
}

/* 特大。版面を作るためのもので、読ませる見出しではない */
.display {
    font-weight: var(--weight-bold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}

.display-1 {
    font-size: var(--text-display-1);
}

.display-4 {
    font-size: var(--text-display-4);
}

/* 和文の特大。欧文の 0.95 では行が接するので少し開ける */
.display-5 {
    font-size: var(--text-display-5);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-title);
}

.title {
    font-size: var(--text-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-title);
}

.lede {
    max-width: var(--measure-text);
    color: var(--fg);
    font-size: var(--text-lead);
    line-height: var(--leading-snug);
}

.note {
    max-width: var(--measure-text);
    color: var(--fg);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body-jp);
}

/* 色の段。ここ以外で灰色を書かない */
.muted {
    color: var(--fg);
}

/* 一覧 */
.list {
    max-width: var(--measure-text);
}

.list > li {
    padding: var(--space-3) 0;
    border-top: var(--rule-w) solid var(--rule);
}

.list > li:first-child {
    border-top: none;
}

.rows > li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-6) 0;
    border-top: var(--rule-w) solid var(--rule);
}

.rows > li:last-child {
    border-bottom: var(--rule-w) solid var(--rule);
}

@media (max-width: 599px) {
    .rows > li {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

/* 図 */
.figure {
    margin: var(--space-7) 0;
}

.figure img,
.figure video {
    width: 100%;
    height: auto;
    border-radius: var(--radius-figure);
}

/* 端末 (使い方の画面写真)。黒い縁がないと、画面写真が紙の上の四角い絵に見えて、
   アプリの画面だと分かりにくい。
   縁の太さと角は、トップの主要な機能の端末 (home.css の .feature-phone) と同じ式で、
   端末の幅に比例させる。縁の角は、画面の角の丸みに縁の太さを足して、画面の角と同心にする。 */
.phone {
    --phone-w: var(--phone-figure-w);
    width: var(--phone-w);
    max-width: 100%;
    padding: calc(var(--phone-w) * var(--device-bezel-ratio));
    border-radius: calc(var(--phone-w) * (var(--screen-radius-ratio) * (1 - 2 * var(--device-bezel-ratio)) + var(--device-bezel-ratio)));
    background: var(--ink);
}

/* 画面。角は端末の画面と同じ丸み (--screen-radius-ratio) で切る。
   16px だと画面写真の中のシートの丸い角より小さく、角が 2 重に見える。
   横は幅、縦は高さに対する割合で書いて、角を円にする */
.figure .phone img {
    display: block;
    border-radius: calc(var(--screen-radius-ratio) * 100%) / calc(var(--screen-radius-ratio) * 100% * 1206 / 2622);
}

@media (max-width: 767px) {
    .phone {
        margin-inline: auto;
    }
}

/* ラベル */
.label {
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--fg);
}

.label-wide {
    letter-spacing: var(--tracking-label-wide);
}

.label-faint {
    color: var(--fg);
}

.label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
}

.label-row-top {
    padding-bottom: var(--space-4);
    border-bottom: var(--rule-w) solid var(--rule);
}

.label-row-bottom {
    align-items: flex-end;
    padding-top: var(--space-4);
    border-top: var(--rule-w) solid var(--rule);
}

/* ボタン。形はカプセル 1 つだけで、暗いとき用の修飾子は作らない (面の色を反転させて塗る) */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--tap-size);
    padding: var(--space-3) var(--space-7);

    border: var(--rule-w) solid var(--fg);
    border-radius: var(--radius-pill);
    background: var(--fg);
    color: var(--surface);

    font-size: var(--text-label-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;

    transition:
        transform var(--dur-pop) var(--ease-snap),
        opacity var(--dur) var(--ease);
}

.btn:hover {
    transform: scale(1.06);
    opacity: 1;
}

.btn:active {
    transform: scale(0.94);
    transition-duration: var(--dur-fast);
}

/* ページの終わり (フッター)。全ページ同じものを assets/js/site.js が 1 か所から出す */
.finale {
    width: 100%;
    /* 本文との間を空ける。黒い面が本文に接すると、切れ目が分からない */
    margin-top: var(--section-y-lg);
    padding: var(--section-y) 0 var(--space-8);
}

/* 直前の節が自分で下を空けているときは、ここで足さない。
   トップの facts は天地 128px ずつ持っているので、足すと下だけ 256px になり、
   見出しの上 (128px) と釣り合わない。 */
.facts-section + .finale {
    margin-top: 0;
}

/* トップの最後のモザイクの帯は、フッターの黒にすき間なく付ける */
.mosaic-section + .finale {
    margin-top: 0;
}

.finale .colophon-cols {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr;
    gap: var(--gap-col-lg);
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--gutter-x) var(--gap-col);
    border-bottom: var(--rule-w) solid var(--rule);
}

.colophon-title {
    margin-bottom: var(--space-4);
    color: var(--fg);
    font-size: var(--text-title);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-title);
}

.colophon-lead {
    max-width: 560px; /* 標語が 2 行で収まる幅 */
    margin-bottom: var(--space-7);
    color: var(--fg);
    font-size: var(--text-body);
    line-height: var(--leading-body-jp);
    /* 1 文だけの紹介なので、語の途中 (「記録す / る」) で折らない。
       和文の折れ目は site.js の訳に <wbr> で書いてある (tools/insert-wbr.py)。
       auto-phrase は iPhone の Safari が未対応。韓国語は空白で折る (keep-all が無いと、1 語の途中で折れる) */
    text-wrap: pretty;
}

html[lang="ja"] .colophon-lead,
html[lang="ko"] .colophon-lead {
    word-break: keep-all;
}

.colophon-head {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-2);
    border-bottom: var(--rule-w) solid var(--rule);
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label-wide);
    text-transform: uppercase;
}

/* 同じ列に 2 つめの見出しを置くとき (Pages の下の Follow)。上の一覧と間をあける */
.colophon-links + .colophon-head-next {
    margin-top: var(--space-7);
}

.colophon-links {
    margin: 0;
    padding: 0;
    color: var(--fg);
    font-size: var(--text-label);
    line-height: var(--leading-list);
}

.colophon-links a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.colophon-links a:hover {
    color: var(--fg);
}

.finale-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 上と下を同じにする。margin-top と padding-top を足すと上下でずれるので、padding だけで取る。
       --section-y-lg (128px) では上下が空きすぎるので、一段下の --section-y にする */
    padding: var(--section-y) var(--gutter-x);
    border-bottom: var(--rule-w) solid var(--rule);
    overflow: hidden;
}

/* スマホでは --section-y を詰めていないので、もう一段下の段にする */
@media (max-width: 767px) {
    .finale-banner {
        padding-block: var(--section-y-sm);
    }
}

.finale-banner img {
    width: 100vw;
    max-width: var(--page-max);
    height: auto;
}

.finale-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);

    max-width: 1600px; /* 奥付の行。ページの最大幅より一段狭くする */
    margin: 0 auto;
    padding: var(--space-8) var(--gutter-x) 0;

    color: var(--fg);
    font-size: var(--text-label-xs);
    letter-spacing: var(--tracking-label);
}

@media (max-width: 899px) {
    .finale .colophon-cols {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* スクロールで現れる。入場は文字 (.tl-line / .tl-inner) と、それ以外 (.aos) の 2 つだけ */

/* 行ごとに出す文字。site.js (bootLines) が、ブラウザが折り返した行を測って包む。
   .tl-line が行の窓で、下の縁で切る。.tl-inner が中身で、窓の下から上がってくる。
   窓は上と左右にも余裕を持たせる。行間を詰めた大見出しは、字面が行の箱からはみ出すので、
   ぴったりで切ると字の頭と足が欠ける。下の縁は、行間 0.8 の欧文の足が収まるところまで下げる。
   測った行で固定するので、行の中では折り返さない (幅が変わったら site.js が測り直す) */
.tl-line {
    display: block;
    white-space: nowrap;
    clip-path: inset(-0.5em -1em -0.25em -1em);
}

/* 字間は親から受け継ぐ。base.css の * が字間を 0 に戻すので、
   書かないと行に分けたとたんに見出しの詰め (--tracking-display) が消える。
   行の長さは分ける前 (詰めた字間) で測るので、字間が戻ると行が測ったより長くなり、
   画面の右端からはみ出す。 */
.tl-line,
.tl-inner {
    letter-spacing: inherit;
}

/* 行の 126% 下から、3° 傾けて透明で始める (selora.modulify.website と同じ)。 */
.tl-inner {
    display: block;
    opacity: 0;
    transform: translateY(126%) skewY(3deg);
    transition:
        transform var(--dur-line) var(--ease-line),
        opacity var(--dur-line) var(--ease-line);
    /* --i は、一度に入ってきた行を画面の上から数えた段の番号 (site.js の revealLines) */
    transition-delay: calc(var(--i, 0) * var(--line-stagger));
}

.tl-in .tl-inner {
    opacity: 1;
    transform: none;
}

/* 文字に添う罫。左端を起点に、0 から横へ伸ばして引く (site.js の claimRuleTargets)。
   線だけの要素 (.rule と hr) は要素そのものを伸ばす */
.tl-rule-self {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-rule) var(--ease-line);
    transition-delay: calc(var(--rule-i-top, 0) * var(--line-stagger));
}

.tl-rule-self.tl-rule-in {
    transform: none;
}

/* 文字の入れ物の上下の罫は、罫の色だけ透明にして、その要素の背景に同じ太さの線を描き、
   幅を 0 から 100% へ伸ばす。背景は罫の下まで敷かれる (border-box) ので、線は罫と同じ場所に出る。
   罫の太さは残すので、組みは動かない。上下の両方に罫があるものは、2 本とも同じ時に引く */
.tl-rule-top,
.tl-rule-bottom {
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    transition: background-size var(--dur-rule) var(--ease-line);
}

.tl-rule-top {
    border-top-color: transparent !important;
    background-image: linear-gradient(var(--tl-rule-top-c), var(--tl-rule-top-c));
    background-position: left top;
    background-size: 0% var(--tl-rule-top-w);
    transition-delay: calc(var(--rule-i-top, 0) * var(--line-stagger));
}

.tl-rule-bottom {
    border-bottom-color: transparent !important;
    background-image: linear-gradient(var(--tl-rule-bottom-c), var(--tl-rule-bottom-c));
    background-position: left bottom;
    background-size: 0% var(--tl-rule-bottom-w);
    transition-delay: calc(var(--rule-i-bottom, 0) * var(--line-stagger));
}

.tl-rule-top.tl-rule-bottom {
    background-image:
        linear-gradient(var(--tl-rule-top-c), var(--tl-rule-top-c)),
        linear-gradient(var(--tl-rule-bottom-c), var(--tl-rule-bottom-c));
    background-position: left top, left bottom;
    background-size: 0% var(--tl-rule-top-w), 0% var(--tl-rule-bottom-w);
}

.tl-rule-top.tl-rule-in {
    background-size: 100% var(--tl-rule-top-w);
}

.tl-rule-bottom.tl-rule-in {
    background-size: 100% var(--tl-rule-bottom-w);
}

.tl-rule-top.tl-rule-bottom.tl-rule-in {
    background-size: 100% var(--tl-rule-top-w), 100% var(--tl-rule-bottom-w);
}

.aos {
    opacity: 0;
    /* 現れるときの移動量。これ以上動かすと、目で追う必要が出る */
    transform: translateY(12px);
    transition:
        opacity 400ms var(--ease),
        transform 400ms var(--ease);
}

.aos.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .aos {
        opacity: 1;
        transform: none;
    }
}

/* JS が動かないと、ふわっと出る要素が透明のまま残る。
   .visible を付けるのは site.js なので、スクリプトが切られているときは最初から見せる */
@media (scripting: none) {
    .aos {
        opacity: 1;
        transform: none;
    }
}

/* 読みもののページの部品。トップの版面が正なので、大きさも罫も余白もそちらと同じ段から取る。
   写すのは骨で、特大の文字そのものではない (読ませる画面で display-1 を使うと、版面は似ても読めなくなる)。 */

@media (max-width: 767px) {
    .page-head {
        padding: var(--section-y-sm) 0 var(--space-6);
    }
}

/* 目次と本文。目次は本文の上に全幅で置き、本文は 1 カラムにする。
   横に貼り付けると、スクロールが 2 つになって、どちらが動いているのか分からなくなる。 */
.stack {
    padding-top: var(--gap-col);
}

.stack-body {
    min-width: 0;
}

/* 目次の下に罫を引かない。区切りは余白だけで作る。 */
.index {
    margin-bottom: var(--section-y);
}

/* 扉のすぐ下に来るときは、黒い面から離す。
   扉の下余白は黒の内側なので、紙に出たところで空きが無くなる */
.page-head + .index {
    margin-top: var(--section-y);
}

.index-head {
    margin-bottom: var(--space-5);
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label-wide);
    text-transform: uppercase;
}

.index > ul {
    columns: 3;
    column-gap: var(--gap-col);
}

.index-group {
    break-inside: avoid;
    margin-bottom: var(--space-6);
}

.index-group > a {
    display: block;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: var(--rule-w) solid var(--rule);
    color: var(--fg);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    text-decoration: none;
}

.index-group ul a,
.index > ul > li > a {
    display: block;
    padding: var(--space-2) 0;
    color: var(--fg);
    font-size: var(--text-body-sm);
    line-height: var(--leading-snug);
    text-decoration: none;
}

.index a:hover {
    color: var(--fg);
    transform: translateX(8px);
}

.index-flat > ul {
    columns: 6;
}

/* 1 項目 (版番号と日付) を列の途中で割らない。
   割れると「Ver 3.4.1」が列の下に、その日付が次の列の頭に離れて置かれる。 */
.index-flat li {
    break-inside: avoid;
}

@media (max-width: 959px) {
    .index > ul {
        columns: 2;
    }

    .index-flat > ul {
        columns: 3;
    }
}

@media (max-width: 599px) {
    .index > ul,
    .index-flat > ul {
        columns: 1;
    }
}

/* 問いと答え。トップの .facts-grid と同じ組み方で、溝を 0 にして罫で継ぐ。
   問いだけを拾って読めるように、左に問い、右に答えを置く。 */
.qa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 0;
    border-top: var(--rule-w) solid var(--rule);
    scroll-margin-top: var(--space-6);
}

.qa-q {
    padding: var(--space-8) var(--gap-col) var(--space-8) 0;
    color: var(--fg);
    font-size: var(--text-subtitle);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.qa-body {
    padding: var(--space-8) 0 var(--space-8) var(--gap-col);
    border-left: var(--rule-w) solid var(--rule);
}

.qa-a {
    max-width: var(--measure-text);
    color: var(--fg);
    font-size: var(--text-body);
    line-height: var(--leading-body-jp);
}

.qa-a + .qa-a {
    margin-top: var(--space-4);
}

.faq .qa-q {
    font-size: var(--text-body-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-none);
}

@media (max-width: 899px) {
    .qa {
        grid-template-columns: minmax(0, 1fr);
    }

    .qa-q {
        padding: var(--space-6) 0 var(--space-3);
    }

    .qa-body {
        padding: 0 0 var(--space-6);
        border-left: none;
    }
}

/* 手順。番号は CSS が数える。HTML に数字を書かない */
.steps {
    counter-reset: step;
    margin: var(--space-5) 0 0;
}

.steps > li {
    counter-increment: step;
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-6);
    border-top: var(--rule-w) solid var(--rule);
    color: var(--fg);
    font-size: var(--text-body);
    line-height: var(--leading-body-jp);
}

.steps > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: var(--space-3);
    left: 0;
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: inherit;
}

.steps > li strong {
    color: var(--fg);
    font-weight: var(--weight-bold);
}

/* 補足。箱で囲わず、上の罫と小さい字だけで落とす。
   左に縦線を引かない。生成された UI に特有の形になる (DESIGN.md §6)。
   この版面の区切りは横の罫で作る。 */
.callout {
    max-width: var(--measure-text);
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    border-top: var(--rule-w) solid var(--rule);
    color: var(--fg);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body-jp);
}

.release {
    padding: var(--section-y) 0;
    border-bottom: var(--rule-w) solid var(--rule);
}

.release:last-of-type {
    border-bottom: none;
}

.release .display-5 {
    margin-bottom: var(--space-5);
}

.release .lede {
    max-width: var(--measure-text);
    margin-bottom: var(--space-7);
    word-break: normal;
}

@media (max-width: 959px) {
    .release {
        padding: var(--section-y-sm) 0;
    }
}

.changes {
    margin-bottom: var(--space-7);
}

.changes > li {
    padding: var(--space-4) 0;
    border-bottom: var(--rule-w) solid var(--rule);
}

/* 罫は列の幅いっぱいに渡し、文だけ行長を詰める (DESIGN.md §3.5)。
   span は行の中の要素なので、block にしないと幅の指定が効かない */
.changes > li > * {
    display: block;
    max-width: var(--measure-text);
}

.changes > li:last-child {
    border-bottom: none;
}

.changes > li strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--fg);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
}

.changes > li p,
.changes > li span {
    color: var(--fg);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body-jp);
}

/* 1 行で終わる項目。見出しと本文を分けない */
.changes-tight > li > * {
    color: var(--fg);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body-jp);
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: var(--space-8);
    border-top: var(--rule-w) solid var(--rule);
    border-left: var(--rule-w) solid var(--rule);
}

.cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    border-right: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
}

.card-num {
    margin-bottom: var(--space-4);
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.card-img {
    margin-bottom: var(--space-4);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0;
}

.card h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    word-break: normal;
}

.card p {
    color: var(--fg);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body-jp);
    word-break: normal;
}

/* 横並びの画面写真。溝を空けるとカードの並びに戻る (DESIGN.md §4.2) */
.shots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: var(--space-7);
    border-top: var(--rule-w) solid var(--rule);
    border-left: var(--rule-w) solid var(--rule);
}

.shots figure {
    margin: 0;
    border-right: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
}

.shots figcaption {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-top: var(--rule-w) solid var(--rule);
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.shot {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-figure);
}

/* 上下に余らせておく。視差で流れても枠の中が空かない */
.shot img,
.card-img img {
    position: relative;
    top: -5%;
    width: 100%;
    height: 110%;
    object-fit: cover;
}

.shot-wide {
    margin-bottom: var(--space-7);
}

@media (max-width: 959px) {
    .cards,
    .cards-4 {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-7);
    }

    .shots {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
}

/* 読みものをポスターの版面に寄せる */

/* 章の頭。番号は振らない。目次から飛んで拾い読みするので、番号があっても現在地の助けにならない。 */
.chapter {
    padding: var(--section-y-lg) 0 var(--section-y);
    border-top: var(--rule-w) solid var(--rule);
}

.chapter-label {
    margin-bottom: var(--gap-col);
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label-wide);
    text-transform: uppercase;
}

@media (max-width: 899px) {
    .chapter {
        padding: var(--section-y) 0 var(--section-y-sm);
    }
}

.shots .shot {
    border-radius: 0;
}

.shot-wide .shot,
.release .shot-wide {
    border-radius: 0;
    border: var(--rule-w) solid var(--rule);
}

.chapter > .display,
.release > .display {
    margin-bottom: var(--gap-col);
    padding-bottom: var(--space-5);
    border-bottom: var(--rule-w) solid var(--rule);
}

.chapter > .display {
    font-size: var(--text-display-4);
}

.release > .display {
    font-size: var(--text-display-3);
}

/* 3D の舞台。読みものの節にも置くので components.css に持つ。
   3 つとも同じ骨で、高さだけ変える。中身は assets/js/home.js が描く。 */
.stage {
    position: relative;
    width: 100%;
}

.stage + .stage {
    border-top: var(--rule-w) solid var(--rule);
}

.stage-abstract {
    height: 220vh;
}

.stage-mock {
    height: 240vh;
}

.stage-sticky {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.stage-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-canvas);
    width: 100%;
    height: 100%;
}

/* 下に来た面で白黒が入れ替わる。天面 (.nav) と同じ理屈。
   3D には幕をかけず (§5.7)、影も暈しも当てない (§5.3) ので、
   画面写真や図形の白の上で白い文字が消えるのを防ぐのは反転しかない。
   掛けるのは入れ物の .stage-overlay。中の文字に掛けると、
   .stage-overlay (透明) としか合成されず、白地で消える。
   .stage-sticky は position: sticky で自前の重ね合わせ文脈を持つので、
   反転は舞台の中で閉じる。 */
.stage-overlay {
    position: relative;
    z-index: var(--z-overlay);
    mix-blend-mode: difference;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: var(--section-y) var(--gutter-x) var(--space-8);
    pointer-events: none;
}

.stage-center {
    max-width: var(--measure-text);
    margin-top: auto;
    margin-bottom: var(--gap-col);
}

.stage-title {
    margin-bottom: var(--space-5);
}

.stage-desc {
    color: var(--fg);
    font-size: var(--text-body);
    line-height: var(--leading-snug);
}

.stage-desc + .stage-desc {
    margin-top: var(--space-4);
}

/* PC でだけ効かせる改行 (思想の説明の文の切れ目)。
   改行の手前の文が 1 行に収まる幅 (1200px 以上) でだけ効かせる。
   それより狭いと、文の途中で折れたところにさらに改行が入り、短い行が残って段落が崩れる */
@media (max-width: 1199px) {
    br.br-pc {
        display: none;
    }
}

/* トップページと同じ作りの部品。黒い節に置くのは短い文だけにする。長い本文を黒地で読ませない */

/* モチーフ。ロゴタイプを割った 20 の図形 (assets/graphics/asset_2〜21) を、
   節の切れ目に置く。決まりは docs/DESIGN.md §4.4。
   図形は inline の svg で置く。fill: var(--fg) なので、黒い面に入れば自動で白くなる。
   img にすると色を反転させる指定が要る。 */
.motif {
    display: flex;
    align-items: center;
    gap: 0; /* 図形どうしを継いで 1 つの帯に見せる */
}

.motif svg {
    flex-shrink: 0;
    width: clamp(140px, 16vw, 280px);
    height: auto;
    aspect-ratio: 1 / 1;
    fill: var(--fg);
}

/* 幅を等分にしない。6 つで 1 周する */
.motif svg:nth-child(2n) { width: clamp(100px, 11.5vw, 200px); }
.motif svg:nth-child(3n) { width: clamp(170px, 20vw, 350px); }

/* 図形を継いで帯や板にするところ (.motif・.poster-shape・.tile・.mosaic) で、継ぎ目の細い線をなくす。
   図形は枡に隙間なく並べているが、枡の境が画面の画素の途中に落ちると
   (幅が割り切れない画面、ブラウザの拡大・縮小、横へ流して端数の位置で止まったとき)、
   隣り合う黒い面の縁がそれぞれ半端に塗られて、境に白い細い線が出る。
   図形の縁を、同じ色で外へ 0.6px だけ太らせて、隣へ重ねる。どの端数でも、片方が必ず画素を塗りきる。
   non-scaling-stroke なので、図形の大きさや拡大率に関わらず太らせる幅は一定。
   .tile は use で defs の図形を引くので、vector-effect は defs の側 (.glyph-defs) に置く */
.motif svg,
.poster-shape,
.tile,
.mosaic-track svg {
    overflow: visible;
    stroke: var(--fg);
    stroke-width: 1.2px;
    stroke-linejoin: round;
}

.motif svg > *,
.poster-shape > *,
.mosaic-track svg > *,
.glyph-defs [id^="tile-"] {
    vector-effect: non-scaling-stroke;
}

/* 帯。左右の端まで届かせ、高さで切る。図形は罫の上に立つ。
   黒い節のすぐ下に置くと、切り口が黒に隠れて、図形が黒から
   生えてきたように見える */
.motif-band {
    height: clamp(88px, 11vw, 190px);
    margin: 0 calc(-1 * var(--gutter-x)) var(--section-y);
    align-items: flex-end;
    overflow: hidden;
    border-bottom: var(--rule-w) solid var(--rule);
}

/* 罫からぶら下げる。黒い節のすぐ上に置く */
.motif-band.motif-hang {
    margin: var(--section-y) calc(-1 * var(--gutter-x)) 0;
    align-items: flex-start;
    border-top: var(--rule-w) solid var(--rule);
    border-bottom: 0;
}

.motif-band.motif-end {
    justify-content: flex-end;
}

/* 和文は文節で折る (使い方・更新履歴・プライバシーポリシー・利用規約の <main>)。
   本文はサイト全体で行末まで詰める (base.css) が、この 4 ページは文を列の幅いっぱいまで使う。
   詰めると「通 / 知」のように語の途中で折れ、行が長いぶん、折れた字が目につく。
   折れ目は HTML の <wbr> が持つ (tools/insert-wbr.py)。keep-all で文節の中を折らせず、<wbr> のところだけで折る。
   word-break: auto-phrase は、iPhone の Safari が対応していないので使わない。
   * まで掛けるのは、部品ごとの word-break: normal (.release .lede など) に負けないため */
html[lang="ja"] .wrap-fill,
html[lang="ja"] .wrap-fill * {
    word-break: keep-all;
}

/* 見出しの text-wrap: pretty (base.css) は外す。短い問いや版、条文の見出しが並ぶので、
   均すと早めに折れて、手で改行したように見える */
html[lang="ja"] .wrap-fill :is(h1, h2, h3, h4) {
    text-wrap: wrap;
}

/* 使い方・更新履歴・プライバシーポリシー・利用規約は、文を列の幅いっぱいまで使う。行長の決まり (--measure-*) の例外。
   本文の幅 (34em) で止めると、列の右に大きな空きが残る。図 (.phone .figure-wide) の幅はそのまま */
.wrap-fill :is(.lede, .note, .list, .qa-a, .callout, .changes > li > *, .page-doc p, .page-doc li, .page-doc ul) {
    max-width: none;
}

/* 流れる帯 (使い方と更新履歴の開き)。帯の中に図形の列 (.motif-track) を 1 本入れ、
   帯より長くして、スクロールに合わせて列ごと横へ送る (home.js の initMotifCarousel)。
   帯は動かない。動きを減らす設定では送らない */
.motif-carousel {
    display: block;
}

.motif-track {
    display: flex;
    align-items: flex-end;
    width: max-content;
    height: 100%;
    will-change: transform;
}

/* 流れる帯の図形は切らない。帯の高さにそろえて丸ごと見せる。
   数を並べて模様にする使い方なので、詰めた帯 (.stream) と同じく「詰めるときは切らない」(§4.4)。
   大きく切る帯と同じ大きさ (幅を 6 つで 1 周させる) のままだと、背の高い図形の上半分が帯の上端で切れる */
.motif-carousel .motif-track svg,
.motif-carousel .motif-track svg:nth-child(2n),
.motif-carousel .motif-track svg:nth-child(3n) {
    width: auto;
    height: 100%;
}

@media (max-width: 599px) {
    .motif svg,
    .motif svg:nth-child(2n),
    .motif svg:nth-child(3n) {
        width: 104px;
    }

    .motif-band {
        height: 68px;
    }
}

/* 記録の 3 ページ (更新履歴・プライバシーポリシー・利用規約)。
   読ませるページではなく、目次から目当ての章へ飛んで引くページなので、版面を分けた。
   扉を黒くして本編と切り、事実 (版・日付・対象) を扉の右に表で置く。
   本文は罫だけで章を切り、図も色面も置かない。 */

.page-head {
    /* .sheet の左右の余白ぶんだけ外へ出す。100vw だと巻き取りの帯のぶん
       (7px) はみ出して、左右にずれる */
    margin: 0 calc(-1 * var(--gutter-x));
    padding: var(--section-y-lg) var(--gutter-x) var(--section-y);
}

.page-head-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--gap-col-lg);
    max-width: var(--page-max);
    margin: 0 auto;
}

.page-title {
    font-size: var(--text-display-2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}

.page-title-jp {
    margin-top: var(--space-4);
    font-size: var(--text-display-5);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-title);
    /* p だが見出しなので、文節で折る (base.css)。行末まで詰めると、
       スマホで「プライバシーポリ／シー」と語の途中で折れる */
    word-break: auto-phrase;
    text-wrap: pretty;
}

.page-facts {
    margin: 0;
}

.page-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-3) 0;
    border-top: var(--rule-w) solid var(--rule);
}

.page-facts > div:last-child {
    border-bottom: var(--rule-w) solid var(--rule);
}

.page-facts dt {
    flex-shrink: 0;
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label-wide);
    text-transform: uppercase;
}

.page-facts dd {
    margin: 0;
    color: var(--fg);
    font-size: var(--text-body-sm);
    text-align: right;
}

.page-doc {
    padding-top: var(--section-y);
}

/* 目次が上にあるときは、目次の下余白が同じ役をするので足さない
   (足すと 96 + 96 = 192px 空く) */
.index + .page-doc {
    padding-top: 0;
}

/* 見出しの 3 段 (章・小見出し・本文) は、罫・大きさ・余白で分ける。
   罫は章 (h2) の頭にだけ引く。段落や箇条書きの行にまで引くと、章の罫と行の罫が同じに見えて、
   どこからが章なのか分からなくなった */
.page-doc h2 {
    margin-top: var(--section-y);
    padding-top: var(--space-5);
    border-top: var(--rule-w) solid var(--rule);
    font-size: var(--text-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-title);
    scroll-margin-top: var(--space-8);
}

html[lang="ja"] .page-doc h2 {
    line-height: var(--leading-heading-jp);
}

/* 最初の章は上を空けない。目次の下余白が同じ役をする */
.page-doc > *:first-child > h2:first-child,
.page-doc h2:first-child {
    margin-top: 0;
}

.page-doc h3 {
    margin-top: var(--space-8);
    color: var(--fg);
    font-size: var(--text-lead);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
}

.page-doc p,
.page-doc li {
    max-width: var(--measure-text);
    color: var(--fg);
    font-size: var(--text-body);
    line-height: var(--leading-body-jp);
}

.page-doc ul {
    max-width: var(--measure-wide);
}

/* 余白は近さで見せる。見出しは自分の本文に寄せ、本文どうしはそれより離し、行どうしはさらに近づける */
.page-doc :is(h2, h3) + :is(p, ul) {
    margin-top: var(--space-4);
}

.page-doc :is(p, ul) + :is(p, ul) {
    margin-top: var(--space-5);
}

.page-doc li + li {
    margin-top: var(--space-4);
}

.page-doc a {
    color: var(--fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4) var(--gap-col);
    margin-top: var(--section-y);
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

@media (max-width: 959px) {
    .page-head-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .page-head {
        padding-top: var(--section-y);
    }
}

/* 更新履歴。版ごとの頭。版番号と日付を 1 行にまとめ、通し番号は振らない。
   版番号そのものが順番を持っている。 */
.release-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-7);
}

.release-no {
    color: var(--fg);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label-wide);
    text-transform: uppercase;
}

.release-num {
    display: block;
    margin-top: var(--space-2);
    color: var(--fg);
    font-size: var(--text-display-4);
    font-weight: var(--weight-bold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}

.release-date {
    flex-shrink: 0;
    color: var(--fg);
    font-size: var(--text-label-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    font-variant-numeric: tabular-nums;
}

.index-date {
    display: block;
    margin-top: 2px; /* 段の外。版番号と日付を 1 つの塊に見せる詰め */
    color: var(--fg);
    font-size: var(--text-label-xs);
    font-variant-numeric: tabular-nums;
}

/* いまの版は面をひっくり返す。「最新」の札は読まないと分からないが、面は見た瞬間に分かる。
   ここから下が過去の版という切れ目にもなる。 */
.release-current {
    margin: 0 calc(-1 * var(--gutter-x)) var(--section-y);
    padding: var(--section-y) var(--gutter-x) var(--section-y-lg);
}

.release-current > .release-head {
    padding-top: 0;
    border-top: none;
}

/* 押したときの手応え。控えめな動きは「効いていない」ように見えるので、
   載せたときと押したときははっきり分かるところまで付ける。
   動きを減らす設定のときは base.css が transition ごと止める。
   ここで書いているのは transition だけなので、JS 側の囲いは要らない。 */

/* 一覧の行。載せると罫が左から伸びて、行が右へ寄る */
.colophon-links a,
.index a {
    position: relative;
    display: inline-block;
    transition: transform var(--dur-pop) var(--ease-pop);
}

/* 押せる範囲は文字の外まで広げる。フッターの「X」は 1 文字で幅が 9px しかなく、
   押した瞬間に右へ 8px 寄せると、指やポインタの下から抜けて遷移しない。
   左右は --tap-reach ずつ広げ、幅は --tap-size を下回らせない。
   上下は広げない。行どうしが詰まっているので、広げると下の行に押した先を取られる */
.colophon-links a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--tap-reach));
    width: max(calc(100% + 2 * var(--tap-reach)), var(--tap-size));
}

.colophon-links a::after,
.index a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-pop) var(--ease-pop);
}

.colophon-links a:hover,
.colophon-links a:hover::after,
.index a:hover::after {
    transform: scaleX(1);
}

/* 目次の下線は項目の箱の中 (下端) に引く。箱の 2px 下にはみ出していると、
   段組みの目次で列の最後の項目に載せたとき、その下線が次の列の頭に送られて出る */
.index a::after {
    bottom: 0;
}

.colophon-links a:active,
.index a:active {
    transform: translateX(8px) scale(0.97);
    transition-duration: var(--dur-fast);
}

.page-doc a,
.qa-body a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness var(--dur) var(--ease);
}

.page-doc a:hover,
.qa-body a:hover {
    text-decoration-thickness: 3px;
}

/* 目次から飛んだ先。見出しを一度だけ白黒反転させて、どこへ来たか分かるようにする。
   薄くして戻すと途中が灰色になるので、steps で切り替えて途中の段を作らない。 */
@keyframes arrive {
    0% {
        background-color: var(--fg);
        color: var(--surface);
    }

    100% {
        background-color: transparent;
        color: inherit;
    }
}

.page-doc h2:target,
.qa:target > .qa-q,
.release:target > .release-head {
    animation: arrive var(--dur-invert) steps(1, end);
}

/* 日本語の大きい見出しは、すべて W7 (700) にそろえる。
   Hiragino の W8・W9 は欧文の Heavy・Black より黒く詰まって見えるので、一段落として欧文と釣り合わせる。
   訳で差し替わる見出しは、日本語のときだけ落とす。英語ほかの言語では元の太さのまま */
html[lang="ja"] :is(.page-title-jp, .chapter > .display, .qa-q, .memory-headline) {
    font-weight: var(--weight-bold);
}