/* Guide pages (website/guide/*.html) — reading layout in the catalogue world. */
html[data-l="en"] [data-l="ja"], html[data-l="ja"] [data-l="en"] { display: none !important; }
.gwrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; padding: 32px calc(var(--gut) + var(--tabs)) 64px var(--gut); }
.gside { position: sticky; top: 88px; align-self: start; display: grid; gap: 16px; }
.gside .back { font: 600 14px var(--display); text-decoration: none; border-bottom: 1px solid var(--chromate); justify-self: start; }
html[lang="ja"] .gside .back { font-family: var(--jp); }
.gside nav { display: grid; border-top: 2px solid var(--ink); }
.gside nav a { padding: 10px 0 10px 12px; border-bottom: 1px solid var(--zinc-2); text-decoration: none; font: 600 15px var(--display); }
html[lang="ja"] .gside nav a { font-family: var(--jp); }
.gside nav a:hover { background: var(--zinc-3); }
.gside nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--cyan); background: var(--zinc-3); }
.gnote { font: 500 13px var(--display); color: var(--ink-3); padding: 12px; border: 1px dashed var(--zinc); border-radius: var(--r); }
html[lang="ja"] .gnote { font-family: var(--jp); }

.prose { max-width: 820px; font-size: 17px; line-height: 1.7; }
html[lang="ja"] .prose { font-family: var(--jp); line-height: 1.9; }
.prose h1 { font: 900 clamp(34px, 3.6vw, 52px)/1.05 var(--display); font-variation-settings: "wdth" 112; letter-spacing: -.02em; margin: 8px 0 18px; }
html[lang="ja"] .prose h1 { font-family: var(--jp); line-height: 1.3; letter-spacing: 0; }
.prose h2 { font: 800 26px/1.2 var(--display); font-variation-settings: "wdth" 108; margin: 44px 0 12px; padding-top: 14px; border-top: 2px solid var(--ink); }
.prose h3 { font: 700 19px/1.3 var(--display); margin: 28px 0 8px; }
html[lang="ja"] .prose h2, html[lang="ja"] .prose h3 { font-family: var(--jp); }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose li { margin: 4px 0; }
.prose img { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: var(--r); background: #1b1b1d; margin: 6px 0 4px; }
.prose code, .prose kbd { font: 500 .88em var(--mono); background: var(--zinc-3); padding: 1px 5px; border-radius: var(--r); }
.prose strong { font-weight: 700; }
.prose a { color: var(--cyan-ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 16px; }
.prose th, .prose td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--zinc-2); vertical-align: top; }
.prose th { border-top: 2px solid var(--ink); font-weight: 700; }
.prose blockquote { margin: 0 0 16px; padding: 10px 16px; background: var(--chromate-2); border-radius: var(--r); }
.prose .pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; border-top: 2px solid var(--ink); padding-top: 16px; }
.prose .pn a { text-decoration: none; display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--r); }
.prose .pn a:hover { background: var(--ink); color: var(--paper); }
.prose .pn small { font: 600 12px var(--mono); color: inherit; opacity: .7; }
.prose .pn b { font: 800 17px var(--display); }
html[lang="ja"] .prose .pn b { font-family: var(--jp); }
.prose .pn-next { text-align: right; grid-column: 2; }

@media (max-width: 900px) {
  .gwrap { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; }
  .gside { position: static; }
  .gside nav { grid-template-columns: 1fr 1fr; }
}