/* ---- guides.css — /guides and the guide pages -----------------------------
   These pages are long-form reading, which nothing else on this site is. The
   whole sheet is therefore about one thing: making a column of text
   comfortable to read on a phone at arm's length, in a workshop, by somebody
   who did not come here to admire a layout.

   No columns, no sidebar, no pull quotes, no reading-progress bar. A single
   measure down the middle-left of the page and generous space between
   sections. The restraint is the design. */

/* ---- A guide page ---------------------------------------------------------
   Left-aligned rather than centred. A centred column of body copy makes every
   paragraph's first word land in a different place, which is exactly what the
   eye uses to find the start of the next line. */
.guide__inner > * + * {
  margin-top: var(--space-8);
}

.guide__question {
  max-width: 24ch;
}

@media (min-width: 48rem) {
  .guide__question {
    max-width: 30ch;
  }
}

/* ---- The answer -----------------------------------------------------------
   The most important element on the page and the reason these pages exist.
   Someone landing here from a search has one question, and the reply is the
   first thing under the heading, set larger than the body and marked with the
   accent rule so it reads as the answer rather than as an introduction.

   It is also the paragraph an AI assistant is most likely to lift, which is
   the other reason it stands alone: it has to make sense with nothing else
   attached to it. */
.guide__answer {
  max-width: 44rem;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 2px solid var(--accent);

  font-size: var(--text-lg);
  color: var(--ink);
}

.guide__section {
  max-width: var(--measure);
}

.guide__section > * + * {
  margin-top: var(--space-4);
}

.guide__section h2 {
  font-size: var(--text-xl);
  color: var(--ink);
}

.guide__list {
  margin: 0;
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}

/* The follow-up questions. Separated from the body above by a rule, because
   they answer different questions and running them on would read as more of
   the same argument. */
.guide__also {
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}

.guide__qa + .guide__qa {
  margin-top: var(--space-6);
}

.guide__qa h3 {
  font-size: var(--text-lg);
  color: var(--ink);
}

.guide__qa p {
  margin-top: var(--space-2);
}

/* ---- The link to a plan ---------------------------------------------------
   One per guide, at the end, and deliberately quiet. A guide that turns into an
   advert halfway down gets closed by the person reading and skipped by the
   assistant summarising it, which loses both readers to save one sentence.

   So: no button, no panel, no colour beyond the hairline. It looks like a
   footnote because that is its standing on the page. */
.guide__plan {
  max-width: var(--measure);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
}

.guide__plan-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: var(--space-2);

  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.guide__plan-link:hover {
  text-decoration-color: var(--accent);
}

/* The way back to the index, sitting in the eyebrow above the question. Set
   inline it measured 58x16, which is a long way under the 44px tap minimum on
   a page whose readers are holding a phone in one hand. inline-flex with the
   minimum height gives it a real target without moving the text, since the
   eyebrow is a line of its own anyway. */
.guide__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);

  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
}

.guide__back:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

/* ---- The index ------------------------------------------------------------
   Question and full answer for every guide, rather than a list of titles with
   a teaser. Two reasons, and neither is generosity: a list of headlines gives
   an assistant nothing to quote, and a visitor whose question is answered here
   and who leaves satisfied is a better outcome than one made to click for it. */
.guide-index {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-12);
}

.guide-index__item {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.guide-index__q {
  font-size: var(--text-xl);
  max-width: 34ch;
}

.guide-index__q a {
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.guide-index__q a:hover {
  text-decoration-color: var(--accent);
}

.guide-index__a {
  margin-top: var(--space-4);
  max-width: var(--measure);
}