/* Questions (#questions). Section-scoped styles; included from the Questions block in index.html.

   Decisions, for HANDOFF at merge (Samuel's brief, 21 October):
   - Full-width rows, with text capped. The list, its rows and the
     hairlines between them span the full content width of the shared
     .wrapper container (set by --shell-max and --shell-inset): the same left
     edge as every section's heading and the same right edge as the nav's
     content at desktop widths. Nothing in this file names the edge itself.
     Only the text is capped: each question at 760px (47.5rem), wrapping on
     the left, and each answer at a 680px measure (42.5rem).
   - The right edge on phones (Samuel, 21 October): the list stays on the
     shared wrapper. At 390 the gate is the list against the heading and
     the other sections, not the nav: the wrapper's content ends at 366,
     while the nav, which sets its own right padding on phones (8px under
     768px, 4px under 360px), ends at 382. The nav's phone padding gets
     reconciled in the page-wide edge pass, not here.
   - The summary row: the question on the left, the plus flush with the
     row's right edge, at least 16px clear of the question (24px here: the
     row keeps 40px on its right, the plus is 16px wide). The plus is
     centred on the question's first line, so on a question that wraps it
     stays level with the first line rather than the middle of the block.
   - The question size step (21 October): at desktop the questions are one
     step up, 28px at 1512, in proportion down to the phone's size, 22px at
     390, which is unchanged (26.04px at 1146). Fraunces, as before, at
     line-height 1.5, as before (rounded to a whole pixel, below). Under the
     760px cap the longest question ("I don't know much about websites or
     software. Does that matter?") takes two lines from 1189px wide upward in
     Chromium, from about 1187px in WebKit. From 768px a question that
     wraps has its lines balanced (text-wrap: balance), so no word is left
     alone on its last line ("matter?" was, at 1512). Below 768px the
     questions and the answers take text-wrap: pretty (21 October), so the
     last line keeps a second word: at 320 six lines had ended on one word,
     at 390 one ("starts."), at 360 and 414 two each. Measured after: none
     in WebKit at 320, 360, 390, 414 or 767, and none in Chromium from 360;
     at 320 Chromium's pretty still leaves "contract?" and "matter?" alone.
   - Hover and focus (21 October): on hover, and on keyboard focus
     (:focus-visible), the question turns deep emerald #0E6B49, a colour
     transition of 150ms, instant under reduced motion; no underline and
     nothing moves. The plus is deep emerald already, so it stays as it is.
     The hover applies only where the pointer can hover, so a tap on a phone
     does not leave the question green.
   - The one-screen fit target (21 October): at a 1512 by 860 window, the
     heading "Questions" and all six rows closed, down to the last hairline,
     fit at one scroll position below the nav with at least 24px to spare at
     the bottom, counting the nav at 64px (past the hero it measures 57px:
     56px and its 1px rule). The question is never under 26px to get there;
     the row padding and the gap between the heading and the list are what
     may be tuned. Measured 21 October in Chromium, with the heading's top at
     64px: the last hairline at 752.6px, 107px to spare, with no tuning
     needed beyond the whole-pixel rows below.
   - The answer, when open, sits under its question on the same left edge:
     Hanken Grotesk, 18px at desktop and 17px on phones in proportion
     between (the Founder copy's size), line-height 1.55, ink #12140F.
   - Kept as they were: native details and summary, all six closed on load
     (no open attribute), so every answer is readable with no script; the deep emerald (#0E6B49) plus whose upright
     fades on open (opacity only, 220ms, none under reduced motion); nothing
     animates height; the heading and its treatment; the section's spacing;
     the six questions, word for word.
   - The copy changes, the only words changed:
     "Who owns the work?" now answers "You do. Once the work is paid for,
     it is yours, as set out in your agreement, and the accounts behind it
     are set up in your name wherever the provider allows." (was "You do.
     Once the work is paid for, everything we build and every account
     behind it is in your name.")
     "Am I tied into a contract?" now answers "Only to the work we agree.
     We both sign the scope and price, we deliver what was agreed, and you
     pay in the stages set out. Ongoing support, if you want it, has no
     minimum term." (was "Only to the work we agree. Once the scope and
     price are agreed, we both sign: we deliver what was agreed, and you pay
     for it in the stages set out. Ongoing support, if you want it, has no
     minimum term.")
   - From the sign-off critique (21 October), none of them visible in
     normal use:
     A focused question is kept clear of the fixed nav. Shift+Tab back up
     from the form had left the question under the nav (34.5px under its
     foot at 1512, 34.2px at 390). The summaries first took the page's 88px
     scroll margin, which helped only where the browser scrolled (5.9px
     under it was left at 390, a question already on screen); at the merge
     html { scroll-padding-top: 88px } in the shared styles took over from
     that margin and from the 88px scroll margin on section[id] and
     main [id], so focus clears the nav as well as anchor jumps.
     In forced colours (Windows High Contrast) the plus is drawn in
     CanvasText; its bars are backgrounds, which forced colours removes.
     Every closed row is a whole number of pixels tall: the row's padding
     is 22.5px (was 1.4rem, 22.4px) and the question's line-height is 1.5
     of its size rounded to a whole pixel (42px at 1512, 33px at 390, as
     before). At 87.78px a row, each 1.5px bar of the plus fell on a
     different fraction of a pixel and drew thin on some rows and thick on
     others, at 1x and at 2x; now the six closed rows draw alike. The
     rounding sits under @supports, and without round() the line-height
     stays 1.5.
   - The old Questions CSS in index.html's styles (.qa-list's measure, and
     the .qa, .qa-q, .qa-x and .qa .section-lead rules under "Questions: one
     measure, ruled") was deleted at the merge (21 October). What this file
     did not restate moved here unchanged: the list's top margin, the
     hairlines, the summary's reset (block, no marker, pointer, no margin),
     the plus's box, bars, turn and fade, the focus ring and the answer's
     padding. The computed styles of every element in the section are the
     same as before the move, in Chromium and WebKit, closed and open. */

#questions {
  --qa-q: clamp(22px, calc(0.5348vw + 19.9142px), 28px); /* the question's size: 22px at 390, 28px at 1512 */
  --qa-lh: 1.5; /* the question's line-height, as inherited before */
  --qa-py: 22.5px; /* the row's padding above and below the question: with a whole-pixel line, a whole-pixel row */
  --qa-body: clamp(17px, calc(0.0892vw + 16.652px), 18px); /* the answer's size: 17px at 390, 18px at 1512 */
}

/* the list, its rows and their hairlines: the wrapper's full content width */
#questions .qa-list { max-width: none; margin-top: clamp(2rem, 3.5vw, 3rem); }
#questions .qa { border-top: 1px solid var(--line); }
#questions .qa:last-of-type { border-bottom: 1px solid var(--line); }

/* the row: the question on the left, room on the right for the plus and
   its clearance; no disclosure triangle */
#questions .qa-q {
  position: relative; display: block; list-style: none; cursor: pointer; margin: 0;
  padding: var(--qa-py) calc(16px + 1.5rem) var(--qa-py) 0;
  font-size: var(--qa-q); line-height: var(--qa-lh);
}
#questions .qa-q::-webkit-details-marker { display: none; }
#questions .qa-q::marker { content: ''; }
#questions .qa-q:focus-visible { outline: 2px solid #0E6B49; outline-offset: 4px; border-radius: 4px; }

/* the question's text, capped so a long one wraps on the left; from 768px
   its lines are balanced, so no word sits alone on the last one */
#questions .qa-t { display: block; max-width: 47.5rem; }
@media (min-width: 768px) {
  #questions .qa-t { text-wrap: balance; }
}
/* on phones the questions and the answers keep a second word on their last
   line */
@media (max-width: 767px) {
  #questions .qa-t, #questions .qa .section-lead { text-wrap: pretty; }
}

/* hover and keyboard focus: the question turns deep emerald, colour only
   (the plus is deep emerald already) */
#questions .qa-t { transition: color 150ms ease; }
@media (hover: hover) {
  #questions .qa-q:hover .qa-t { color: #0E6B49; }
}
#questions .qa-q:focus-visible .qa-t { color: #0E6B49; }
@media (prefers-reduced-motion: reduce) {
  #questions .qa-t { transition: none; }
}

/* the plus, flush with the row's right edge and centred on the question's
   first line: the row's top padding, then half a line (its em is the
   question's size), less half the plus. Two thin deep emerald bars; the
   upright fades when the answer opens, and nothing turns */
#questions .qa-x { position: absolute; right: 0; top: calc(var(--qa-py) + var(--qa-lh) * 0.5em - 8px); width: 16px; height: 16px; }
#questions .qa-x::before, #questions .qa-x::after { content: ''; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1.5px; background: #0E6B49; transition: opacity 220ms ease; }
#questions .qa-x::after { transform: rotate(90deg); }
#questions .qa[open] .qa-x::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #questions .qa-x::before, #questions .qa-x::after { transition: none; }
}

/* whole-pixel rows: the question's line rounded to a whole pixel, so every
   closed row is a whole number of pixels tall and the six pluses draw alike */
@supports (width: round(1.5px, 1px)) {
  #questions { --qa-lhpx: round(calc(var(--qa-q) * var(--qa-lh)), 1px); }
  #questions .qa-q { line-height: var(--qa-lhpx); }
  #questions .qa-x { top: calc(var(--qa-py) + var(--qa-lhpx) / 2 - 8px); }
}

/* forced colours remove backgrounds, which is how the bars are drawn */
@media (forced-colors: active) {
  #questions .qa-x::before, #questions .qa-x::after { forced-color-adjust: none; background: CanvasText; }
}

/* the answer, under its question on the same left edge, on its own measure */
#questions .qa .section-lead {
  max-width: 42.5rem; padding: 0 0 1.6rem;
  font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 400;
  font-size: var(--qa-body); line-height: 1.55;
  color: #12140F;
}