/* Guides (guides/render.js): long answers read on the light theme, one
   column at a reading width, the same type and buttons as the site. */

.guide {
  max-width: 780px; margin: 0 auto;
  padding: calc(96px + 3vh) var(--pad-x) 72px;
}
/* main.css makes every section a full screen for the home page: not here */
.guide section { display: block; min-height: 0; padding: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5em; font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }

.guide h1 {
  margin: .6em 0 .45em; font-size: clamp(2rem, 4.8vw, 3.4rem); line-height: 1.04;
  font-weight: 850; letter-spacing: -.02em; text-wrap: balance;
}
.guide:lang(ja) h1, .guide:lang(ja) h2, .guide:lang(ja) h3 { word-break: auto-phrase; }
.guide:lang(ko) { word-break: keep-all; }
.guide .lede { font-size: clamp(1.15rem, 1.7vw, 1.38rem); line-height: 1.5; margin: 0 0 .8em; }
.guide .meta { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin: 0 0 2.4em; }

.guide h2 { margin: 2.2em 0 .6em; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.guide h3 { margin: 1.6em 0 .35em; font-size: 1.15rem; line-height: 1.3; font-weight: 750; }
.guide p, .guide li { font-size: 1.08rem; line-height: 1.68; }
.guide p { margin: 0 0 1em; max-width: 68ch; }

.guide .steps { list-style: none; counter-reset: step; padding: 0; margin: 1.2em 0; }
.guide .steps li { counter-increment: step; position: relative; padding-inline-start: 2.8em; margin: 0 0 .9em; }
.guide .steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: .15em;
  width: 1.85em; height: 1.85em; border-radius: 50%; display: grid; place-items: center;
  background: var(--text); color: var(--bg); font-weight: 800; font-size: .9em;
}
.guide .list { padding-inline-start: 1.3em; margin: 1em 0; }
.guide .list li { margin: 0 0 .5em; }
.guide .list li::marker { color: var(--accent); }

/* where Puw comes in: set apart, with the way to try it */
.guide .puw {
  margin: 3.2em 0; padding: clamp(22px, 4vw, 40px);
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 24px;
}
.guide .puw h2 { margin-top: 0; }
.guide .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.guide .fine { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin: .9em 0 0; }

.guide .related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.guide .related a {
  display: block; padding: 16px 20px; border: 1px solid var(--card-border); border-radius: 16px;
  background: var(--card-bg); color: var(--text); text-decoration: none; font-weight: 750; line-height: 1.35;
}
.guide .related a:hover { border-color: var(--text); }
.guide .related small { display: block; margin-top: 6px; font-weight: 500; font-size: .95rem; color: var(--muted); }
.guide .hub-list { margin-top: 2em; }
.guide .note { margin-top: 3em; font-size: .85rem; color: var(--muted); }

.guide a:focus-visible, .guide .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }