/*
 * About — who we are, plus the two culture photo strips.
 *
 * Destinations 11 and 12 (rfnAboutCulture1 / rfnAboutCulture2), which need
 * EXACTLY 10 images each — see the note at each strip.
 *
 * @package Refinery
 *
 * Lifted verbatim from the <style> block in the frozen static build's
 * about.html. STATIC-REFERENCE.md is the authority on why it looks this way.
 * Kept page-scoped and unedited so a future diff against the static
 * build still means something; url() paths are rewritten to ../ because
 * CSS resolves them against the stylesheet, not the page.
 *
 * Enqueued only on its own page — see refinery_enqueue_assets().
 */

    /* Brush accent. text-transform: uppercase is REQUIRED — the font has no
       lowercase kern pairs, so a lowercase accent renders unkerned and gappy.
       This one is a standalone line (after a <br>), so it keeps a real
       line-height instead of the 0 used for accents inline with Poppins. */
    /* The #story-heading accent rule that lived here is gone (2026-08-25).
       It targeted the Story section removed from page-about.php earlier the
       same day, and it had never actually applied anyway — the file header's
       nested comment was swallowing it. Removed rather than revived: there is
       no #story-heading on the page any more. */

    /* Full-bleed culture photo grids — rows of 5 square images, flush */
    .culture-strip {
      background: var(--dark);
    }
    .culture-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
    }
    /* Drive cutover 2026-08-11: the 20 culture photos moved to the archive and
       each cell is now an .rfn-slot (rfnAboutCulture1 / 2). The selectors below
       deliberately match BOTH img and .rfn-slot so the nth-child(10) behaviour
       survives the swap — and keeps working when Drive puts real images back. */
    .culture-grid img,
    .culture-grid .rfn-slot {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
    /* .rfn-slot is a flex column in the shared sheet; display:block above would
       kill the centring, so restore it for the placeholder case only. */
    .culture-grid .rfn-slot { display: flex; }
    /* The strip is 20 images since 2026-09-08 (was 10). Keeping the last row
       full is the same idea as before, but the arithmetic moved: 20 is not
       divisible by 3, so the 3-up breakpoint hides the last TWO cells to land
       on 18 (6 rows). It used to hide exactly one (#10 of 10, leaving 9).
       20 divides evenly by both 5 and 2, so those two breakpoints need no
       trimming at all. */
    @media (max-width: 760px) {
      .culture-grid { grid-template-columns: repeat(3, 1fr); }
      .culture-grid img:nth-child(n+19),
      .culture-grid .rfn-slot:nth-child(n+19) { display: none; }
    }
    @media (max-width: 480px) {
      .culture-grid { grid-template-columns: repeat(2, 1fr); }
      .culture-grid img:nth-child(n+19) { display: block; }
      .culture-grid .rfn-slot:nth-child(n+19) { display: flex; }
    }

    /* .story-cols removed 2026-08-24 with the Story section it laid out — see
       the note in page-about.php. Nothing else on the site used it. */

    /* Chartreuse word accents in the intro copy (echoes the old site — dark
       sections only). Still live: the hero paragraph uses three of them. */
    .accent {
      color: var(--chartreuse);
      font-weight: 600;
    }

    /* ── Values band ────────────────────────────────────────────────────────
       REMOVED 2026-08-24 with the #approach section it retuned — see the note
       in page-about.php. It was four rules re-colouring the shared .value-card
       component for a chartreuse band (2026-08-07), most importantly
       .value-number, which is chartreuse in the shared sheet and therefore
       invisible on chartreuse.

       KEEP THIS NOTE if the section comes back: the base component in
       assets/styles.css is still built for an off-white band and will still
       need exactly that retune. The rules are in git alongside the markup. */
    /* ── AB-3: the rewritten intro (2026-09-01, re-cut 2026-09-08) ─────────
       This carried max-width: 68ch. That was set when the hero wrapper was
       1200px, where four paragraphs ran to ~150 characters a line.

       The cap is GONE because it was the exact thing Kay flagged on
       2026-09-08 — the headline ran to the wrapper edge while the copy
       stopped well short of it, so a single hero had two different measures
       in it. Hero copy now takes the shared 75% from .hero-measure (see
       "PAGE HEROES" in style.css) on every page, this one included.

       ⚠️ THE READABILITY CONCERN IS REAL AND WAS TRADED AWAY KNOWINGLY. At a
       1440px viewport the shared measure gives ~1030px, which sets this copy
       to roughly 115 characters a line — better than the 150 that prompted
       the original cap, still longer than the 60-75 that reads easily. About
       is the only hero on the site with four paragraphs in it, so it is the
       only page where this bites. If it comes back, the fix is a narrower
       measure for THIS BLOCK ONLY, and it should be a deliberate exception
       with a note saying so — not a quiet return to a per-page width. */

    .about-intro p + p {
      margin-top: 1.1rem;
    }