/* ==========================================================================
   about.css — /about/ only
   Sits on top of tokens.css + base.css + home.css + subpage.css, the same way
   contact.css, reviews.css and relax.css sit on the shared chrome. Everything
   structural (header, footer, nav, the flat subpage hero, bands, buttons,
   inset-split, land-quote, closing CTA, reveal) is inherited. Every value here
   references tokens.css — no hex, ever.

   Deliberately small. The hero and the active-nav rules come from subpage.css,
   which is the shared version of the flat Forest hero /contact, /reviews/ and
   /relax/ each carry their own copy of. Only the credits list and one spacing
   rule are unique to this page.
   ========================================================================== */

/* --- 4 · What we're about: the credits list -------------------------------
   A flowing text list, deliberately NOT a grid. The brief is that this reads
   as a living credits list: more makers get added over time, and a fixed grid
   of four would either break or need re-balancing every time one arrives.
   As a single column each new <li> just extends the list and nothing else on
   the page moves.

   Role and name stack: the role takes the site's small-caps label treatment
   (11px, 0.12em tracking, muted Forest) and the name sits under it at body
   size. That keeps the roles scannable without a rule, a border or a column
   between them. */
.credits {
  list-style: none;
  margin-block-start: var(--space-lg);
  padding: 0;
}
.credits li + li { margin-block-start: var(--space-md); }
.credits__role {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-on-light-2);
}
.credits__name {
  display: block;
  margin-block-start: var(--space-3xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-on-light);
}

/* The closing line under the list. Sits at body size, so a longer maker story
   can be dropped in above it later without the paragraph needing to change. */
.credits-note { margin-block-start: var(--space-lg); }

/* --- 5 · Closing CTA ------------------------------------------------------
   The standard .closing band, closing on booking exactly as the homepage,
   /contact, /reviews/ and /relax/ do: evocative h2, the $569-direct line,
   then the Check availability / phone pair.

   .closing__aside is the slot for a Meet the makers pointer, shipped `hidden`
   in the markup because §4 above IS the makers content today and a visible
   link would send the reader back up the page they just read. The rule stays
   here so that unhiding it needs no CSS change: it only has to sit the link
   off the CTA pair below it. */
.closing__aside { margin-block-end: var(--space-lg); }