/* Styles specific to the /guide/ section pages. Loaded after styles.css. */

.g-crumb{max-width:var(--wrap);margin:0 auto;padding:26px 0 0;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--mute)}
.g-crumb a{color:var(--teal);text-decoration:none}
.g-crumb a:hover{text-decoration:underline}
.g-crumb span{margin:0 8px;color:var(--rule)}

.g-hero h1{font-size:clamp(28px,4vw,40px);line-height:1.14}
.g-byline{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mute);
  margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);line-height:1.7}
.g-byline b{color:var(--ink-soft);font-weight:500}

.g-body h2{margin-top:44px}
.g-body h2:first-child{margin-top:0}
.g-body h3{margin-top:30px;font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:500}
.g-body p{font-size:15.5px;color:var(--ink-soft);line-height:1.68;margin-top:14px;max-width:70ch}
.g-body p strong{color:var(--ink);font-weight:600}
.g-body .pane{margin-top:26px}
.g-body .pane p{max-width:none;margin-top:0}

/* Tables. The guide carries wide matrices, so every one scrolls in its own box. */
.g-scroll{overflow-x:auto;margin-top:24px;border:1px solid var(--rule);background:var(--card)}
table.g{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
table.g.wide{min-width:820px}
table.g th{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);text-align:left;font-weight:500;
  padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:bottom;white-space:nowrap}
table.g td{padding:13px 16px;border-bottom:1px solid var(--rule);color:var(--ink-soft);
  line-height:1.5;vertical-align:top}
table.g tr:last-child td{border-bottom:0}
table.g td.k{color:var(--ink);font-weight:500}

/* Contents list on the guide index. */
.g-toc{margin-top:22px;border-top:1px solid var(--rule)}
.g-toc-row{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:16px 4px;
  border-bottom:1px solid var(--rule);text-decoration:none;align-items:baseline}
.g-toc-row:hover{background:var(--card)}
.g-toc-row .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal);
  font-variant-numeric:tabular-nums}
.g-toc-row .t b{display:block;font-family:'Newsreader',Georgia,serif;font-size:19px;
  font-weight:500;color:var(--ink);line-height:1.3}
.g-toc-row .t em{display:block;font-style:normal;font-size:14px;color:var(--mute);
  margin-top:4px;line-height:1.5}

/* Previous / next. */
.g-pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:52px}
.g-pager a{background:var(--card);padding:20px 22px;text-decoration:none;
  font-family:'Newsreader',Georgia,serif;font-size:17px;color:var(--ink);line-height:1.35}
.g-pager a:hover{background:var(--paper)}
.g-pager a span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.g-pager .g-next{text-align:right}
.g-pager .g-prev:only-child{grid-column:1}

@media (max-width:720px){
  .g-pager{grid-template-columns:1fr}
  .g-pager .g-next{text-align:left}
  .g-toc-row{grid-template-columns:40px 1fr;gap:12px}
}