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

/* hidden always hides, whatever display a class gives the element. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 19px; }
p { margin: 0; }
p, li { text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.18em; }
a:hover { color: var(--action); }

:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 2px; }

img, svg { display: block; max-width: 100%; }
code { font-family: var(--font-mono); font-size: 0.9em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--surface); color: var(--text); padding: 10px 14px; border-radius: var(--radius-small); font-weight: 700;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Japanese: the system's Japanese faces after the Latin ones, phrase-aware line breaks, and a
   little more line height. */
:lang(ja) { --font-body: "Manrope", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; }
:lang(ja) { --font-display: "Montserrat Alternates", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; }
body:lang(ja), :lang(ja) body { line-height: 1.8; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; line-height: 1.35; letter-spacing: 0; }
:lang(ja) p, :lang(ja) li { line-break: strict; }