/* RONDO — 地
   リセットと、何も指定しなかったときの見え方。ここには部品を書かない。部品は components.css へ。 */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    letter-spacing: var(--tracking-none);
}

html {
    background-color: var(--surface);
    color: var(--fg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* 欧文のカーニングを常に使う。auto のままだと、小さい文字で切るブラウザがある。
       和文には効かないので、和文は下の palt で詰める */
    font-kerning: normal;
    font-feature-settings: var(--font-feature-text);

    /* clip にすること。hidden はスクロール容器を作り、position: sticky が死ぬ */
    overflow-x: clip;

    /* 天面が固定なので、ページ内リンクで飛んだ先が隠れないように逃がす */
    scroll-padding-top: var(--section-y-sm);

    /* scroll-behavior: smooth を入れない。慣性スクロール (Lenis、site.js) と二重にかかる。
       ページ内リンクの送りも Lenis が受け持つ。 */
}

/* 慣性スクロール (Lenis) が求める指定。lenis@1.3.26 の lenis.css と同じ */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

body {
    background-color: var(--surface);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    overflow-x: clip;

    /* 和文の折り返し。本文は文節で早めに折らず、行末まで詰めて流す。
       文節で折ると、手で改行したように見える。見出しだけ下で文節に戻す。
       行頭に句読点を来させない (line-break: strict) のは本文も見出しも同じ */
    word-break: normal;
    line-break: strict;
    overflow-wrap: break-word;
    hanging-punctuation: allow-end;
}

::selection {
    background: var(--fg);
    color: var(--surface);
}

/* 見出しに既定の大きさを持たせない。段は部品の側で選ぶ。
   折り返しだけ地で決めておく。手で <br> を入れないため。
   見出しは文節で折る。行末まで詰めると、語の途中で 1〜2 字だけ次の行に落ちる */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    word-break: auto-phrase;
    text-wrap: pretty;
}

/* 本文。欧文は最後の行が 1 語だけにならないよう整える (pretty)。
   和文はそれで手前の行が早く折れるので、行末まで詰める。
   :where で重みを p と同じにしておき、見出し扱いの p (.feature-title など) が部品の側で上書きできるようにする */
p {
    text-wrap: pretty;
}

:where(html[lang="ja"]) p {
    text-wrap: wrap;
}

/* 欧文の見出しは、長い 1 語が行に入りきらないとき、ハイフンを入れて語の切れ目で折る。
   スマホのドイツ語のキャッチで「Kartentagebuc／h」と語の途中で素のまま折れた。
   和文・中国語・韓国語には効かせない (ハイフンを入れる言語ではない) */
:where(html:not([lang="ja"]):not([lang="ko"]):not([lang^="zh"])) :is(h1, h2, h3, h4) {
    hyphens: auto;
}

a {
    color: inherit;
}

img,
svg,
video,
canvas,
picture {
    display: block;
    max-width: 100%;
}

/* height: auto を地で入れる。
   HTML の width / height 属性は入れておくこと（読み込み前に場所が決まり、
   ページが飛び跳ねない）。ただし width だけ CSS で上書きすると、
   height 属性の値がそのまま残って画像が縦に伸びる。 */
img {
    height: auto;
}

ul,
ol {
    list-style: none;
}

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

.num,
time,
[data-nums] {
    font-variant-numeric: tabular-nums;
}

/* キーボードで辿れること。マウスでは出さない */
:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
}

/* 動きを減らす設定のとき。
   CSS で止まるのは transition と animation だけで、JS が毎フレーム
   transform を書くもの（3D・流れる帯・慣性スクロール）は止まらない。
   動きを足すときは JS の側にも囲いを作ること。 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}