/* ---------------------------------------------------------------------------
   The guide section at the bottom of every data page.
   ---------------------------------------------------------------------------
   Markup is generated — see scripts/gen-guides.js; the text lives in
   page_guides.js.

   Two constraints shaped this. It has to be genuinely readable, because it is
   prose and several hundred words of it, which means a narrow measure and
   generous leading — nothing else on these pages is set for reading. And it has
   to sit under a dense data page without competing with it, which means the
   separation is a rule and a colour step rather than a card, a panel or a
   gradient.

   Width is inherited, not set. The section is the last child of each page's
   <main>, so leaving it unconstrained makes it exactly as wide as the data
   above it — the rule at its top lines up with the edge of the tables and
   cards, which a centred 74ch column did not, and which read as though the
   guide belonged to some other page.

   Long lines are the cost of that on a wide monitor. It is paid back on the
   paragraph measure instead: `.pgd-body` columns the prose above 1400px, so
   the section still fills its container while no single line runs the whole
   width of a desktop screen.
--------------------------------------------------------------------------- */

.pgd {
    margin: 64px 0 0;
    padding: 34px 0 8px;
    border-top: 1px solid var(--card-brd);
}

.pgd h2 {
    margin: 0;
    font-size: clamp(21px, 3vw, 25px);
    font-weight: 750;
    letter-spacing: -0.026em;
    line-height: 1.2;
    color: var(--txt);
}

.pgd-intro {
    margin: 13px 0 0 !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    color: var(--muted) !important;
}

/* The standfirst and the first subheading are two different voices; without
   this they ran together as one block of text. */
.pgd-body {
    margin-top: 26px;
}

.pgd h3 {
    margin: 34px 0 10px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.014em;
    line-height: 1.35;
    color: var(--txt);
    scroll-margin-top: 80px;
}

.pgd p {
    margin: 0 0 13px;
    font-size: 15.5px;
    line-height: 1.74;
    color: #c2c6d6;
}

.pgd p:last-child {
    margin-bottom: 0;
}

.pgd b,
.pgd strong {
    color: var(--txt);
    font-weight: 650;
}

.pgd i,
.pgd em {
    color: var(--txt);
    font-style: italic;
}

.pgd a {
    color: var(--txt);
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 92, 246, 0.5);
    transition: border-color 0.16s ease;
}

.pgd a:hover,
.pgd a:focus-visible {
    color: #fff;
    border-bottom-color: var(--violet);
}

/* Wide screens: two columns rather than one very long line. The section still
   spans the full container — only the text inside it is broken up. */
@media (min-width: 1400px) {
    .pgd-body {
        column-count: 2;
        column-gap: 54px;
    }
    /* A subheading must not be left stranded at the foot of a column with its
       paragraph in the next one. */
    .pgd-body h3 {
        break-after: avoid;
        break-inside: avoid;
    }
    .pgd-body p {
        break-inside: avoid;
    }
    .pgd-body h3:first-child {
        margin-top: 0;
    }
}

@media (max-width: 700px) {
    .pgd {
        margin-top: 44px;
        padding: 26px 0 4px;
    }
    .pgd p {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pgd a {
        transition: none;
    }
}