/*
 * site.css — project styles for buildsoftwareusingai.com
 *
 * The global design system for the site. Derived from the printed book:
 * a deep blue cover with white type, and an editorial interior of off-white
 * pages, dark text, strong hierarchy and generous whitespace.
 * See docs/DESIGN_GUIDE.md.
 *
 * Sections:
 *   1. Design tokens
 *   2. Base / document
 *   3. Typography
 *   4. Header / navigation
 *   5. Page shell
 *   6. Footer
 *   7. Shared utilities and actions
 *   8. Homepage hero
 *   9. Homepage: why building software has changed
 *  10. Homepage: the PDAID method
 *  11. Homepage: who this book is for
 *  12. Homepage: companion resources (closing)
 *  13. Book page
 *  14. PDAID page
 *  15. Resources page
 *  16. About page
 *  17. Error page
 *  18. Articles
 *  19. Resource pages
 *  20. Print
 *  21. Responsive adjustments (shell, header and footer)
 *
 * All project-specific styling belongs in this file.
 * Do not edit assets/css/bootstrap.min.css.
 */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {

    /* --- Brand ---------------------------------------------------------
       --colour-brand is sampled from the book cover. The dark and light
       values are derived from it; no other blues are introduced. */
    --colour-brand: #0E4980;
    --colour-brand-dark: #0A355C;
    --colour-brand-light: #2A6BA8;
    --colour-brand-tint: #EDF2F7;

    /* --- Surfaces ------------------------------------------------------
       A warm off-white, closer to book paper than pure white. */
    --colour-background: #FBFAF7;
    --colour-surface: #FFFFFF;
    --colour-surface-sunken: #F2F0EA;

    /* --- Text and rules ------------------------------------------------ */
    --colour-text: #1B1F24;
    --colour-text-muted: #5B6570;
    --colour-border: #DCD8D1;
    --colour-border-strong: #C3BDB4;

    /* --- Text on the brand-blue field ---------------------------------- */
    --colour-on-brand: #FFFFFF;
    --colour-on-brand-muted: #C9D8E6;

    /* --- Links --------------------------------------------------------- */
    --colour-link: var(--colour-brand);
    --colour-link-hover: var(--colour-brand-dark);

    /* --- Focus ---------------------------------------------------------
       An ochre ring, readable on both the off-white page and the blue
       header. --focus-ring is reassigned on dark backgrounds so a single
       :focus-visible rule serves the whole site. */
    --colour-focus: #A85A12;
    --colour-focus-inverse: #F2C879;
    --focus-ring: var(--colour-focus);

    /* --- PDAID diagram accents -----------------------------------------
       Muted families recorded in docs/DESIGN_GUIDE.md, reserved for the
       PDAID diagrams in a later increment. Not yet used anywhere. */
    --colour-accent-blue-grey: #C8D3DE;
    --colour-accent-cream: #F0E7D2;
    --colour-accent-mauve: #D9CFE0;
    --colour-accent-green: #CFE0D0;
    --colour-accent-pink: #EED6DA;
    --colour-accent-aqua: #CFE3E4;

    /* --- Type families -------------------------------------------------
       System stacks only. No font files and no external font services.
       The book's own Minion/Myriad/Trajan families are not reproduced. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", Courier, monospace;

    /* --- Type sizes ----------------------------------------------------
       The larger sizes scale with the viewport so headings stay in
       proportion without extra breakpoints. */
    --text-sm: 0.875rem;
    --text-base: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --text-h2: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
    --text-h1: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);
    /* Reserved for the book title where it leads a page. */
    --text-hero: clamp(2.125rem, 1.5rem + 2.8vw, 3.25rem);

    /* --- Spacing scale -------------------------------------------------- */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;

    /* --- Layout ---------------------------------------------------------
       --layout-max caps the shell on large displays.
       --measure keeps running text at a comfortable line length. */
    --layout-max: 70rem;
    --measure: 36rem;
    --gutter: 1.25rem;

    /* --- Rules and corners ---------------------------------------------
       Deliberately close to square. The book is not a rounded interface. */
    --radius-sm: 2px;
    --radius-md: 3px;
}


/* ==========================================================================
   2. Base / document
   ========================================================================== */

body {
    background-color: var(--colour-background);
    color: var(--colour-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.65;
    /* Long unbroken strings must not force the page sideways. */
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--colour-border);
    opacity: 1;
    margin: var(--space-lg) 0;
}

/* One focus treatment for the whole site. --focus-ring is redefined on
   dark backgrounds rather than repeating this rule. */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* The site adds no motion of its own, but Bootstrap's collapse transition
   is suppressed for users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* The shell. Bootstrap's .container is reused rather than rebuilt, but is
   made fluid with a single cap so the layout does not jump between
   breakpoints and text does not stretch on wide displays. */
.container {
    max-width: var(--layout-max);
    padding-inline: var(--gutter);
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4 {
    color: var(--colour-brand-dark);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
}

/* The editorial serif is used selectively — for the book's own name and for
   page titles — not for body text, which reads better on screen in sans. */
h1 {
    font-family: var(--font-serif);
    font-size: var(--text-h1);
    font-weight: 400;
    letter-spacing: -0.005em;
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

a {
    color: var(--colour-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--colour-link-hover);
}

code, pre, kbd, samp {
    font-family: var(--font-mono);
}


/* ==========================================================================
   4. Header / navigation
   ========================================================================== */

/* A restrained band of the cover's deep blue. Not sticky: the pages are
   short and there is no current reason to hold it on screen. */
.site-header {
    background-color: var(--colour-brand);
    border-bottom: 1px solid var(--colour-brand-dark);
    padding-block: var(--space-sm);
    --focus-ring: var(--colour-focus-inverse);
}

/* The site name, set in the editorial serif to echo the cover. */
.site-header__brand {
    color: var(--colour-on-brand);
    font-family: var(--font-serif);
    font-size: 1.125rem;
    letter-spacing: 0.01em;
    line-height: 1.25;
    padding-block: var(--space-xs);
    text-decoration: none;
}

.site-header__brand:hover,
.site-header__brand:focus {
    color: var(--colour-on-brand);
}

.site-nav__link {
    color: var(--colour-on-brand-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    padding-block: var(--space-xs);
    text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link:focus {
    color: var(--colour-on-brand);
}

/* The current page is marked by weight and a rule as well as colour, so it
   is not signalled by colour alone. aria-current carries it to assistive
   technology. */
.site-nav__link.is-current {
    color: var(--colour-on-brand);
    font-weight: 600;
}

/* Stacked navigation: the rule sits to the left of the current item. */
.site-nav__item {
    border-left: 3px solid transparent;
    padding-left: var(--space-sm);
}

.site-nav__item.is-current {
    border-left-color: var(--colour-on-brand);
}

/* The toggler is restyled for the dark band. data-bs-theme="dark" on the
   header supplies Bootstrap's white toggler icon, so the icon itself is
   not overridden here. */
.site-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
}

.site-header .navbar-toggler:focus {
    box-shadow: none;
}


/* ==========================================================================
   5. Page shell
   ========================================================================== */

/* The deeper bottom padding is reserved for wide screens; on narrow screens
   it left too much empty space beneath short pages. Restored in section 9. */
.page {
    display: block;
    padding-block: var(--space-xl);
}

.page-header {
    border-bottom: 1px solid var(--colour-border);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
}

.page-title {
    margin-bottom: var(--space-sm);
    max-width: var(--measure);
}

/* The standfirst under a page title. Serif, to carry the editorial voice. */
.page-intro {
    color: var(--colour-text-muted);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: 0;
    max-width: var(--measure);
}


/* ==========================================================================
   6. Footer
   ========================================================================== */

/* Mobile spacing is tighter throughout; the desktop footer is restored at
   the 768px breakpoint in section 9 and is unchanged. */
.site-footer {
    background-color: var(--colour-surface-sunken);
    border-top: 1px solid var(--colour-border);
    margin-top: auto;
    padding-block: var(--space-lg);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: space-between;
}

.site-footer__title {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: var(--space-xs);
}

.site-footer__author {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* The narrower column gap lets all five links sit on one line at common
   phone widths instead of stranding a single link on a second row. */
.site-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__link {
    color: var(--colour-text);
    font-size: var(--text-sm);
    text-decoration: none;
}

.site-footer__link:hover,
.site-footer__link:focus {
    color: var(--colour-link-hover);
    text-decoration: underline;
}

.site-footer__legal {
    border-top: 1px solid var(--colour-border);
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-md);
    margin-bottom: 0;
    padding-top: var(--space-sm);
}


/* ==========================================================================
   7. Shared utilities
   ========================================================================== */

/* Keeps the footer at the bottom of short pages without clipping long ones. */
html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.page {
    flex: 1 0 auto;
}

/* Constrains running text to a comfortable line length. */
.measure {
    max-width: var(--measure);
}

/* --- Shared section furniture --------------------------------------------
   The small uppercase label, serif section heading and standfirst used to
   open a section, plus the editorial emphasis line. These began on the PDAID
   page and are now used by the About page too, so they live here rather than
   under one page's section. Page-specific modifiers stay with their page. */

.section-label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.section-title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 26ch;
    text-wrap: balance;
}

.section-intro {
    margin-bottom: var(--space-xl);
    max-width: var(--measure);
}

.statement {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: 0;
    max-width: 34rem;
}

.statement::before {
    border-top: 2px solid var(--colour-brand);
    content: "";
    display: block;
    margin-bottom: var(--space-md);
    width: 3rem;
}

/* --- Actions ---------------------------------------------------------------
   A square-shouldered button in the site's own colours. Bootstrap's .btn is
   deliberately not used, so its default blue cannot reach the page. Not
   pill-shaped: the book is plainly set, and so is this. */
.btn-site {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.3;
    /* A comfortable touch target on small screens. */
    min-height: 44px;
    padding: 0.7rem 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-site--primary {
    background-color: var(--colour-brand);
    border-color: var(--colour-brand);
    color: var(--colour-on-brand);
}

.btn-site--primary:hover,
.btn-site--primary:focus {
    background-color: var(--colour-brand-dark);
    border-color: var(--colour-brand-dark);
    color: var(--colour-on-brand);
}

/* The secondary action stays quiet: a rule and brand text, no fill. */
.btn-site--secondary {
    background-color: transparent;
    border-color: var(--colour-border-strong);
    color: var(--colour-brand);
}

.btn-site--secondary:hover,
.btn-site--secondary:focus {
    background-color: var(--colour-brand-tint);
    border-color: var(--colour-brand);
    color: var(--colour-brand-dark);
}

/* The same two actions inverted, for use on the brand-blue field. Only the
   colours change; the shape, size and touch target are shared above. */
.btn-site--inverse {
    background-color: var(--colour-surface);
    border-color: var(--colour-surface);
    color: var(--colour-brand);
}

.btn-site--inverse:hover,
.btn-site--inverse:focus {
    background-color: var(--colour-brand-tint);
    border-color: var(--colour-brand-tint);
    color: var(--colour-brand-dark);
}

.btn-site--inverse-outline {
    background-color: transparent;
    border-color: var(--colour-on-brand-muted);
    color: var(--colour-on-brand);
}

.btn-site--inverse-outline:hover,
.btn-site--inverse-outline:focus {
    background-color: var(--colour-brand-dark);
    border-color: var(--colour-on-brand);
    color: var(--colour-on-brand);
}

/* Visible only when focused, for keyboard users arriving at the page. */
.skip-link {
    background-color: var(--colour-brand);
    color: var(--colour-on-brand);
    display: inline-block;
    left: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    position: absolute;
    top: var(--space-xs);
    transform: translateY(-200%);
    z-index: 1000;
}

.skip-link:focus {
    color: var(--colour-on-brand);
    transform: translateY(0);
}


/* ==========================================================================
   8. Homepage hero

   The cover is the only image in the composition; everything else is set
   in type. The hero's own breakpoints live here, next to the rules they
   modify, rather than in section 9.
   ========================================================================== */

/* On narrow screens the page shell alone supplies the hero's breathing room,
   so the two paddings do not stack into a large empty band above and below.
   Desktop padding is reapplied at the 992px breakpoint below. */
.hero {
    padding-block: 0;
}

/* The gap between the text column and the cover when they stack. Bootstrap's
   gy-5 (3rem) left the cover a little adrift; this keeps a clear separation
   without the band. Neutral once the columns sit side by side. */
.hero .row {
    --bs-gutter-y: 2.5rem;
}

/* The opening proposition. Prominent enough to carry the central idea, but
   set well below the title so it does not compete with it. The short rule
   echoes the thin dividing rule on the book cover. */
.hero__kicker {
    color: var(--colour-brand);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-md);
    max-width: var(--measure);
}

.hero__kicker::before {
    border-top: 2px solid var(--colour-brand);
    content: "";
    display: block;
    margin-bottom: var(--space-md);
    width: 3rem;
}

/* Balanced wrapping stops the title breaking to leave "AI" stranded on a
   line of its own at intermediate widths. Browsers without support simply
   wrap normally. */
.hero__title {
    font-size: var(--text-hero);
    margin-bottom: var(--space-sm);
    text-wrap: balance;
}

/* Sits directly beneath the title, with no rule between them, so it reads
   as part of the book's name rather than as a separate statement. */
.hero__subtitle {
    color: var(--colour-text);
    font-size: var(--text-h3);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 32rem;
    text-wrap: balance;
}

.hero__author {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
}

/* Supporting text, not a second headline. */
.hero__pdaid {
    border-top: 1px solid var(--colour-border);
    margin-bottom: var(--space-lg);
    max-width: var(--measure);
    padding-top: var(--space-md);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.hero__cover-frame {
    text-align: center;
}

/* A restrained shadow only, to lift the printed cover off the page. The
   artwork is never recoloured, cropped, rotated or overlaid. */
.hero__cover {
    box-shadow: 0 1px 2px rgba(11, 30, 51, 0.12), 0 10px 24px rgba(11, 30, 51, 0.14);
    height: auto;
    max-width: 250px;
    width: 100%;
}

@media (min-width: 576px) {

    .hero__cover {
        max-width: 300px;
    }
}

@media (min-width: 992px) {

    .hero {
        padding-block: var(--space-xl) var(--space-2xl);
    }

    .hero__cover {
        max-width: 340px;
    }
}


/* ==========================================================================
   9. Homepage: why building software has changed

   Separated from the hero by a thin rule and spacing rather than a full-width
   tinted band: the page shell opens its container in includes/header.php, so
   a bleeding background would need a viewport-width break-out, and those
   overflow horizontally whenever a classic scrollbar is present.
   ========================================================================== */

.why {
    border-top: 1px solid var(--colour-border);
    /* Space above the rule. On wide screens the hero's own bottom padding
       already provides it, so this is removed at 992px. */
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

/* Understated, matching the small uppercase treatment used for the author
   line in the hero. */
.why__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

/* Set in the editorial serif, clearly subordinate to the homepage H1. */
.why__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: 0;
    max-width: 18ch;
    text-wrap: balance;
}

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

/* The concluding statement. The short brand rule deliberately echoes the
   device above the hero's opening proposition, tying the two together
   without repeating the hero's layout. */
.why__emphasis {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: 0;
    margin-top: var(--space-lg);
    max-width: var(--measure);
}

.why__emphasis::before {
    border-top: 2px solid var(--colour-brand);
    content: "";
    display: block;
    margin-bottom: var(--space-md);
    width: 3rem;
}

@media (min-width: 992px) {

    .why {
        margin-top: 0;
        padding-top: var(--space-2xl);
    }
}


/* ==========================================================================
   10. Homepage: the PDAID method

   The phase flow sits on its own tinted ground rather than the section
   spanning the viewport, because includes/header.php owns the page
   container. This also matches the book, where the diagrams sit on a light
   neutral surround.
   ========================================================================== */

.pdaid {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

.pdaid__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.pdaid__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 24ch;
    text-wrap: balance;
}

.pdaid__intro {
    margin-bottom: var(--space-lg);
    max-width: var(--measure);
}

/* --- The seven-phase flow ------------------------------------------------
   An ordered list: the sequence is meaningful information, not decoration.
   Vertical on narrow screens, a single row once there is room for seven
   readable blocks. DOM order is always 1 to 7; no CSS reordering. */
.phases {
    background-color: var(--colour-surface-sunken);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-lg);
    /* A single centred column, rather than blocks stretched the full width
       of the panel, so the vertical flow reads as a deliberate sequence. */
    grid-template-columns: minmax(0, 20rem);
    justify-content: center;
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
}

.phases__item {
    background-color: var(--colour-surface);
    border: 1px solid rgba(27, 31, 36, 0.10);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    position: relative;
    text-align: center;
}

/* The connector. An empty triangle drawn with borders, so nothing is added
   to the accessible name and no icon library or image is required. */
.phases__item::after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--colour-border-strong);
    bottom: calc(var(--space-lg) * -0.5 - 4px);
    content: "";
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.phases__item:last-child::after {
    content: none;
}

.phases__number {
    color: var(--colour-brand);
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
}

.phases__name {
    color: var(--colour-text);
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Muted phase tones, echoing the book's diagrams. Applied by name rather
   than by position so the styling does not depend on DOM order. */
.phases__item--blue-grey { background-color: var(--colour-accent-blue-grey); }
.phases__item--cream     { background-color: var(--colour-accent-cream); }
.phases__item--mauve     { background-color: var(--colour-accent-mauve); }
.phases__item--green     { background-color: var(--colour-accent-green); }
.phases__item--pink      { background-color: var(--colour-accent-pink); }
.phases__item--aqua      { background-color: var(--colour-accent-aqua); }

@media (min-width: 768px) {

    .phases {
        padding: var(--space-lg);
    }
}

@media (min-width: 992px) {

    .pdaid {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
    }
}

/* Seven across only where the blocks stay readable. Measured below this
   width, "Commit & Maintain" broke onto three lines and the blocks became
   uneven, so the flow stays vertical until there is genuinely room. */
@media (min-width: 1200px) {

    .phases {
        gap: var(--space-md);
        grid-template-columns: repeat(7, 1fr);
        justify-content: stretch;
    }

    /* The flow turns to run left to right. */
    .phases__item::after {
        border-bottom: 7px solid transparent;
        border-left: 8px solid var(--colour-border-strong);
        border-right: 0;
        border-top: 7px solid transparent;
        bottom: auto;
        left: auto;
        right: calc(var(--space-md) * -0.5 - 4px);
        top: 50%;
        transform: translateY(-50%);
    }
}


/* ==========================================================================
   11. Homepage: who this book is for

   No enclosing panel and no cards. The PDAID flow above already introduces
   an inset surface, so this section stays on the page background and uses a
   thin rule above each item to group them, the way a printed page separates
   passages.
   ========================================================================== */

.audience {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

.audience__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.audience__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 26ch;
    text-wrap: balance;
}

.audience__intro {
    margin-bottom: var(--space-xl);
    max-width: var(--measure);
}

/* One column on narrow screens, two from the medium breakpoint. Never four
   across: the paragraphs would be too narrow to read comfortably. */
.audience__grid {
    display: grid;
    gap: var(--space-lg);
}

.audience__item {
    border-top: 1px solid var(--colour-border);
    padding-top: var(--space-md);
}

.audience__item-title {
    margin-bottom: var(--space-xs);
}

.audience__item-text {
    color: var(--colour-text);
    margin-bottom: 0;
    max-width: 34rem;
}

@media (min-width: 768px) {

    .audience__grid {
        column-gap: var(--space-2xl);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-xl);
    }
}

@media (min-width: 992px) {

    .audience {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
    }
}


/* ==========================================================================
   12. Homepage: companion resources (closing)

   The one dark section on an otherwise light page, so the homepage ends
   deliberately. It reuses the cover's blue rather than introducing another,
   and is a contained panel: the page shell owns the container, and a
   viewport-width break-out would risk horizontal overflow.
   ========================================================================== */

.closing {
    margin-top: var(--space-xl);
}

.closing__panel {
    background-color: var(--colour-brand);
    border-radius: var(--radius-md);
    color: var(--colour-on-brand);
    padding: var(--space-lg) var(--space-md);
    /* Switches the site-wide focus ring to its light variant, exactly as the
       header does, so both actions stay visible against the blue. */
    --focus-ring: var(--colour-focus-inverse);
}

.closing__label {
    color: var(--colour-on-brand-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.closing__title {
    color: var(--colour-on-brand);
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 20ch;
    text-wrap: balance;
}

.closing__body {
    color: var(--colour-on-brand-muted);
    margin-bottom: 0;
    max-width: var(--measure);
}

/* Slightly more presence than the body copy, without becoming a slogan. */
.closing__statement {
    color: var(--colour-on-brand);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
    max-width: 28rem;
}

.closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

@media (min-width: 768px) {

    .closing__panel {
        padding: var(--space-xl);
    }
}

@media (min-width: 992px) {

    .closing {
        margin-top: var(--space-2xl);
    }
}


/* ==========================================================================
   13. Book page

   Related to the homepage but deliberately quieter: a smaller heading, a
   narrower cover, no actions and more room for explanatory copy, so an
   internal page does not read as a second landing page.
   ========================================================================== */

.book-opening__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

/* Uses the standard page heading size, not the homepage's larger hero size. */
.book-opening__title {
    margin-bottom: var(--space-xs);
    text-wrap: balance;
}

.book-opening__subtitle {
    color: var(--colour-text);
    font-size: var(--text-h3);
    margin-bottom: var(--space-lg);
    max-width: 32rem;
    text-wrap: balance;
}

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

.book-opening__author {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: 0;
    text-transform: uppercase;
}

.book-opening__cover-frame {
    text-align: center;
}

/* Narrower than the homepage cover: here it supports the text rather than
   leading the page. The artwork is never altered. */
.book-opening__cover {
    box-shadow: 0 1px 2px rgba(11, 30, 51, 0.12), 0 8px 20px rgba(11, 30, 51, 0.12);
    height: auto;
    max-width: 200px;
    width: 100%;
}

/* --- What you'll learn ---------------------------------------------------- */

.outcomes {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

.outcomes__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.outcomes__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 24ch;
    text-wrap: balance;
}

.outcomes__intro {
    margin-bottom: var(--space-xl);
    max-width: var(--measure);
}

/* One column, then two, then three. Never six: the sentences would be too
   narrow to read. Rules and spacing only, no cards. */
.outcomes__grid {
    display: grid;
    gap: var(--space-lg);
}

.outcomes__item {
    border-top: 1px solid var(--colour-border);
    padding-top: var(--space-md);
}

.outcomes__item-title {
    margin-bottom: var(--space-xs);
}

.outcomes__item-text {
    margin-bottom: 0;
}

@media (min-width: 576px) {

    .book-opening__cover {
        max-width: 240px;
    }
}

@media (min-width: 768px) {

    .outcomes__grid {
        column-gap: var(--space-xl);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-lg);
    }
}

@media (min-width: 992px) {

    .book-opening__cover {
        max-width: 260px;
    }

    .outcomes {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
    }
}

@media (min-width: 1200px) {

    .outcomes__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- Inside the book ------------------------------------------------------
   Three related subsections under one heading: how the book progresses, how
   the worked example applies the method, and what practical material closes
   it. They share the page's existing devices — small uppercase labels,
   hairline rules and spacing — rather than each introducing its own. */

.inside {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

.inside__label,
.worked__label,
.appendices__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.inside__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 24ch;
    text-wrap: balance;
}

.inside__intro {
    margin-bottom: var(--space-xl);
    max-width: var(--measure);
}

/* The four stages. A numbered editorial progression, deliberately unlike the
   homepage's pastel PDAID blocks: this is the book's structure, not the
   method's cycle. */
.stages {
    list-style: none;
    margin: 0 0 var(--space-2xl);
    padding: 0;
}

.stages__item {
    border-top: 1px solid var(--colour-border);
    display: grid;
    gap: var(--space-xs) var(--space-md);
    grid-template-columns: 2.5rem 1fr;
    padding-block: var(--space-md);
}

.stages__number {
    color: var(--colour-brand);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-top: 0.15rem;
}

.stages__body {
    display: block;
    max-width: 44rem;
}

.stages__name {
    color: var(--colour-brand-dark);
    display: block;
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-xs);
}

.stages__text {
    display: block;
}

/* --- Worked example ------------------------------------------------------- */

.worked {
    margin-bottom: var(--space-2xl);
}

.worked__title,
.appendices__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 24ch;
}

.worked__text {
    margin-bottom: var(--space-lg);
    max-width: var(--measure);
}

/* The reduction from a broad idea to one buildable increment, set as a
   definition list because that is what it is. */
.worked__contrast {
    border-left: 2px solid var(--colour-brand);
    margin: 0 0 var(--space-lg);
    max-width: var(--measure);
    padding-left: var(--space-md);
}

.worked__contrast dt {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.worked__contrast dd {
    margin: 0 0 var(--space-sm);
}

.worked__contrast dd:last-child {
    margin-bottom: 0;
}

/* A compact wrapped sequence, not six boxes and never a horizontal scroller. */
.worked__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.worked__step {
    align-items: center;
    color: var(--colour-text);
    display: flex;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* A small chevron between steps. Empty content, so it is not announced. */
.worked__step:not(:last-child)::after {
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--colour-border-strong);
    border-top: 4px solid transparent;
    content: "";
    display: inline-block;
    margin-left: var(--space-sm);
}

/* --- Practical material --------------------------------------------------- */

.appendices__text {
    margin-bottom: var(--space-xl);
    max-width: var(--measure);
}

.appendices__grid {
    display: grid;
    gap: var(--space-lg);
}

.appendices__item {
    border-top: 1px solid var(--colour-border);
    padding-top: var(--space-md);
}

.appendices__item-label {
    color: var(--colour-brand);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

.appendices__item-title {
    color: var(--colour-brand-dark);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-xs);
}

.appendices__item-text {
    margin-bottom: 0;
}

@media (min-width: 768px) {

    .stages__item {
        grid-template-columns: 3.5rem 1fr;
    }

    .appendices__grid {
        column-gap: var(--space-xl);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {

    .inside {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
    }
}


/* ==========================================================================
   14. PDAID page

   The method's own documentation. No cover and no imagery: identity comes
   from typography, the brand blue and restrained rules. The phase treatment
   is deliberately not the homepage's row of coloured blocks, which could not
   carry a description and a supporting line without becoming cramped.
   ========================================================================== */

.method__label,
.cycle__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

/* Uses the standard page heading size, so it never outweighs the homepage. */
.method__title {
    margin-bottom: var(--space-lg);
    text-wrap: balance;
}

/* The canonical definition, given prominence by setting and a brand rule
   rather than by being boxed. */
.method__lead {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    margin-bottom: var(--space-lg);
    max-width: 40rem;
}

.method__lead::before {
    border-top: 2px solid var(--colour-brand);
    content: "";
    display: block;
    margin-bottom: var(--space-md);
    width: 3rem;
}

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

/* A quiet aside, held between hairlines. Not a warning box. */
.method__note {
    border-block: 1px solid var(--colour-border);
    margin-top: var(--space-lg);
    max-width: var(--measure);
    padding-block: var(--space-md);
}

.method__note-title {
    color: var(--colour-brand-dark);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.method__note-text {
    color: var(--colour-text-muted);
    margin-bottom: 0;
}

/* --- The seven-phase cycle ------------------------------------------------ */

.cycle {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

.cycle__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 24ch;
    text-wrap: balance;
}

.cycle__intro {
    margin-bottom: var(--space-xl);
    max-width: var(--measure);
}

.cycle__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cycle__item {
    border-top: 1px solid var(--colour-border);
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
}

.cycle__identity {
    display: block;
}

/* The only use of the phase palette on this page: a short marker beside the
   number. The order is carried by the numbers and the list, never by colour. */
.cycle__marker {
    border-radius: 1px;
    display: inline-block;
    height: 3px;
    margin-right: var(--space-sm);
    vertical-align: middle;
    width: 1.75rem;
}

.cycle__marker--blue-grey { background-color: var(--colour-accent-blue-grey); }
.cycle__marker--cream     { background-color: var(--colour-accent-cream); }
.cycle__marker--mauve     { background-color: var(--colour-accent-mauve); }
.cycle__marker--green     { background-color: var(--colour-accent-green); }
.cycle__marker--pink      { background-color: var(--colour-accent-pink); }
.cycle__marker--aqua      { background-color: var(--colour-accent-aqua); }

.cycle__number {
    color: var(--colour-brand);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.cycle__name {
    margin-top: var(--space-xs);
    margin-bottom: 0;
}

.cycle__text {
    margin-bottom: var(--space-xs);
    max-width: 40rem;
}

.cycle__supporting {
    color: var(--colour-text-muted);
    margin-bottom: 0;
    max-width: 40rem;
}

@media (min-width: 992px) {

    .cycle {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
    }

    /* Identity on the left, explanation on the right. The sequence stays
       vertical so 1 to 7 is never in doubt. */
    .cycle__item {
        column-gap: var(--space-2xl);
        grid-template-columns: 15rem 1fr;
    }
}

/* --- Principles: how PDAID keeps development under control ----------------
   Four sections sharing one rhythm — rule, label, serif heading, copy —
   varied by layout rather than by a new visual language each time:
   two columns, then three, then prose, then prose and a close. */

.responsibility,
.increment,
.baseline,
.evidence,
.method-close {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

/* .section-label, .section-title, .section-intro and .statement are shared
   across pages and now live in section 7. */

/* --- Division of responsibility ------------------------------------------
   A plain editorial comparison. Not opposed, not colour-coded, and the two
   sides are not padded out to equal length: the human list is longer
   because the human decides more. */
.responsibility__split {
    display: grid;
    gap: var(--space-lg);
}

.responsibility__group {
    border-top: 1px solid var(--colour-border);
    padding-top: var(--space-md);
}

.responsibility__group-title {
    margin-bottom: var(--space-sm);
}

/* Conventional markers, simply spaced. No icons or tick graphics. */
.responsibility__list {
    margin: 0;
    max-width: 32rem;
    padding-left: 1.15rem;
}

.responsibility__list li {
    margin-bottom: var(--space-xs);
}

.responsibility__list li:last-child {
    margin-bottom: 0;
}

.responsibility__conclusion {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-top: var(--space-lg);
    margin-bottom: 0;
    max-width: 34rem;
}

/* --- Smallest useful increment -------------------------------------------- */

.increment__grid {
    display: grid;
    gap: var(--space-lg);
}

.increment__item {
    border-top: 1px solid var(--colour-border);
    padding-top: var(--space-md);
}

.increment__item-title {
    margin-bottom: var(--space-xs);
}

.increment__item-text {
    margin-bottom: 0;
}

/* --- Stable baselines and evidence ----------------------------------------
   Deliberately prose. The idea reads more clearly as writing than as a
   second diagram, and the page already carries one sequence. */

.baseline__text,
.evidence__text {
    max-width: var(--measure);
}

.baseline__text:last-of-type {
    margin-bottom: var(--space-lg);
}

.evidence__text:last-of-type {
    margin-bottom: 0;
}

/* --- Closing ------------------------------------------------------------- */

.statement--closing {
    font-size: var(--text-h3);
    max-width: 36rem;
}

.method-close__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

@media (min-width: 768px) {

    .responsibility__split {
        column-gap: var(--space-2xl);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Top aligned, so the shorter AI list does not stretch to match. */
        align-items: start;
    }

    .increment__grid {
        column-gap: var(--space-xl);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {

    .responsibility,
    .increment,
    .baseline,
    .evidence,
    .method-close {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
    }
}


/* ==========================================================================
   15. Resources page

   An editorial index of what this area will hold, not a downloads
   dashboard. The categories carry no actions, file types or counts, so they
   are visibly descriptions rather than things to click.
   ========================================================================== */

.res-opening__label,
.res-category__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.res-opening__title {
    margin-bottom: var(--space-lg);
    max-width: 20ch;
    text-wrap: balance;
}

.res-opening__lead {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    margin-bottom: var(--space-lg);
    max-width: 40rem;
}

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

/* The status note. A quiet aside held between hairlines, not an alert. */
.res-opening__note {
    border-block: 1px solid var(--colour-border);
    margin-top: var(--space-lg);
    max-width: var(--measure);
    padding-block: var(--space-md);
}

.res-opening__note-label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

.res-opening__note-text {
    color: var(--colour-text);
    margin-bottom: 0;
}

/* --- The categories ------------------------------------------------------- */

.res-categories {
    margin-top: var(--space-xl);
}

.res-categories__grid {
    display: grid;
    gap: var(--space-xl);
}

.res-category {
    border-top: 1px solid var(--colour-border);
    padding-top: var(--space-md);
}

.res-category__title {
    font-size: var(--text-h3);
    margin-bottom: var(--space-xs);
}

.res-category__text {
    margin-bottom: var(--space-md);
}

/* Subordinate to the description: this is what will arrive, not what is
   here. "Planned material" makes no promise about when. */
.res-category__planned {
    border-top: 1px solid var(--colour-border);
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
    padding-top: var(--space-sm);
}

.res-category__planned-label {
    color: var(--colour-brand);
    display: block;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
}

/* --- Handoff to the method ------------------------------------------------ */

.res-handoff {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

.res-handoff__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.res-handoff__text {
    margin-bottom: var(--space-lg);
    max-width: var(--measure);
}

@media (min-width: 768px) {

    .res-categories__grid {
        column-gap: var(--space-2xl);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {

    .res-categories {
        margin-top: var(--space-2xl);
    }

    .res-handoff {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
    }
}


/* ==========================================================================
   16. About page

   No author photograph has been approved, so the opening is composed
   entirely in type: a small label, the name, a serif lead and prose held to
   a readable measure. The whitespace to the right on wide screens is the
   same intentional margin used by the PDAID opening, not a gap left by a
   missing portrait.

   The shared .section-label, .section-title and .statement rules are defined
   in section 7 and reused here rather than duplicated.
   ========================================================================== */

.about-opening__label {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.about-opening__title {
    margin-bottom: var(--space-lg);
}

.about-opening__lead {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    margin-bottom: var(--space-lg);
    max-width: 38rem;
}

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

/* --- The perspective behind the book -------------------------------------- */

.perspective {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

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

/* Subsections sit under the section's own heading, separated by space and a
   rule rather than by becoming sections of their own. */
.perspective__part {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
}

.perspective__subtitle {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-md);
    max-width: 30ch;
    text-wrap: balance;
}

.about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

@media (min-width: 992px) {

    .perspective {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
    }

    .perspective__part {
        margin-top: var(--space-2xl);
    }
}


/* ==========================================================================
   17. Error page

   Uses the same internal-page language as the rest of the site: no oversized
   "404" artwork, illustration or icon.
   ========================================================================== */

.notfound__title {
    margin-bottom: var(--space-md);
    max-width: 20ch;
    text-wrap: balance;
}

.notfound__text {
    margin-bottom: var(--space-lg);
    max-width: var(--measure);
}

.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}


/* ==========================================================================
   18. Articles

   A single readable column. Articles are long-form prose, so the measure is
   held tighter than the page shell and the vertical rhythm is looser than
   the marketing pages.
   ========================================================================== */

.breadcrumb {
    margin-bottom: var(--space-lg);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb__list li:not(:last-child)::after {
    color: var(--colour-text-muted);
    content: "/";
    margin-left: var(--space-xs);
}

.breadcrumb__list li[aria-current] {
    color: var(--colour-text-muted);
}

.article__title {
    margin-bottom: var(--space-md);
    max-width: 22ch;
    text-wrap: balance;
}

.article__meta {
    border-bottom: 1px solid var(--colour-border);
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
}

.article__meta-sep {
    margin-inline: 0.35rem;
}

/* --- Article body --------------------------------------------------------- */

.article__body {
    max-width: 38rem;
}

.article__lead {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
}

.article__body h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    max-width: 26ch;
    text-wrap: balance;
}

.article__body p {
    margin-bottom: var(--space-md);
}

.article__body ul {
    margin: 0 0 var(--space-md);
    padding-left: 1.15rem;
}

.article__body li {
    margin-bottom: var(--space-xs);
}

/* Used for the short quoted examples, not for decoration. */
.article__quote {
    border-left: 2px solid var(--colour-brand);
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin: 0 0 var(--space-md);
    padding-left: var(--space-md);
}

/* --- Related and return links --------------------------------------------- */

.article__related {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-2xl);
    max-width: 38rem;
    padding-top: var(--space-lg);
}

.article__related-title {
    font-size: var(--text-h3);
    margin-bottom: var(--space-sm);
}

.article__related-list {
    margin: 0;
    padding-left: 1.15rem;
}

.article__back {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-2xl);
    margin-bottom: 0;
    max-width: 38rem;
    padding-top: var(--space-lg);
}

/* --- Articles index ------------------------------------------------------- */

.article-index__title {
    margin-bottom: var(--space-md);
    max-width: 22ch;
    text-wrap: balance;
}

.article-index__intro {
    margin-bottom: var(--space-2xl);
    max-width: var(--measure);
}

.article-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-index__item {
    border-top: 1px solid var(--colour-border);
    max-width: 40rem;
    padding-block: var(--space-lg);
}

/* --- Topic groups --------------------------------------------------------- */

.article-group {
    margin-bottom: var(--space-2xl);
}

.article-group__title {
    color: var(--colour-brand);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

.article-group__intro {
    color: var(--colour-text-muted);
    margin-bottom: 0;
    max-width: var(--measure);
}

.article-index__item-title {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.article-index__item-title a {
    text-decoration: none;
}

.article-index__item-title a:hover {
    text-decoration: underline;
}

.article-index__summary {
    margin-bottom: var(--space-xs);
}

.article-index__date {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}


/* --- Published resources within a category -------------------------------- */

.res-category__items {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}

.res-category__items li {
    margin-bottom: var(--space-sm);
}

.res-category__item-link {
    display: block;
    font-weight: 600;
}

.res-category__item-note {
    color: var(--colour-text-muted);
    display: block;
    font-size: var(--text-sm);
}


/* ==========================================================================
   19. Resource pages

   Long working documents rather than marketing pages: a readable column,
   checklist items marked with a box so they can be worked through on screen
   or on paper.
   ========================================================================== */

.resource__title {
    margin-bottom: var(--space-md);
    max-width: 24ch;
    text-wrap: balance;
}

.resource__intro {
    color: var(--colour-brand-dark);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
    max-width: 38rem;
}

.resource__print-note {
    border-bottom: 1px solid var(--colour-border);
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
    max-width: 38rem;
    padding-bottom: var(--space-md);
}

.resource h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.checklist {
    list-style: none;
    margin: 0 0 var(--space-md);
    max-width: 38rem;
    padding: 0;
}

.checklist li {
    margin-bottom: var(--space-sm);
    padding-left: 1.9rem;
    position: relative;
}

/* An empty box, drawn rather than typed, so nothing is announced twice. */
.checklist li::before {
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius-sm);
    content: "";
    height: 0.85rem;
    left: 0;
    position: absolute;
    top: 0.35rem;
    width: 0.85rem;
}

/* --- Template fields and record tables ------------------------------------ */

.template {
    margin: 0 0 var(--space-lg);
    max-width: 38rem;
}

.template dt {
    border-top: 1px solid var(--colour-border);
    color: var(--colour-brand-dark);
    font-size: var(--text-h3);
    font-weight: 600;
    padding-top: var(--space-md);
}

.template dd {
    margin: 0 0 var(--space-lg);
    padding-top: var(--space-xs);
}

/* Guidance text in the blank template, as opposed to a completed answer. */
.template__prompt {
    color: var(--colour-text-muted);
    margin-bottom: 0;
}

.template--filled dd {
    color: var(--colour-text);
}

/* Wide tables scroll inside their own container rather than pushing the
   page sideways. */
.table-scroll {
    margin-bottom: var(--space-lg);
    overflow-x: auto;
}

.record-table {
    border-collapse: collapse;
    font-size: var(--text-sm);
    min-width: 44rem;
    width: 100%;
}

.record-table th,
.record-table td {
    border: 1px solid var(--colour-border);
    padding: var(--space-sm);
    text-align: left;
    vertical-align: top;
}

.record-table th {
    background-color: var(--colour-surface-sunken);
    color: var(--colour-brand-dark);
}

/* Stated rather than inherited: the framework reset puts captions below the
   table, which reads well here, but the spacing has to follow that choice. */
.record-table__caption {
    caption-side: bottom;
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    padding-top: var(--space-sm);
    text-align: left;
}

.record-table__blank {
    height: 2.6rem;
}

/* Prose in a resource page holds the same measure as the template fields and
   checklist beside it. Tables are deliberately excluded — they are wrapped in
   .table-scroll and are allowed to be wider than the text. */
.resource > p,
.resource__note,
.resource__footer-links {
    max-width: 38rem;
}

.resource__footer-links {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
}


/* ==========================================================================
   20. Purchase

   The two purchase routes on /book/, and the result pages under /purchase/.
   Deliberately quiet: these are informational blocks in the same editorial
   voice as the rest of the site, not a sales panel. No accent colours and no
   borders heavier than the rules used elsewhere.
   ========================================================================== */

.purchase {
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

.purchase__title {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: var(--space-lg);
    max-width: 24ch;
    text-wrap: balance;
}

/* Two equal columns above 768px, stacked below. Grid rather than flex so the
   options stay the same width however much text each carries. */
.purchase__options {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {

    .purchase__options {
        gap: var(--space-xl);
        /* auto-fit, not a fixed 2: when only one purchase route is
           configured the single option fills the row rather than
           sitting in half of it. */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    }
}

.purchase__option {
    border-top: 1px solid var(--colour-border);
    display: flex;
    flex-direction: column;
    padding-top: var(--space-md);
}

.purchase__option-title {
    color: var(--colour-brand-dark);
    font-size: var(--text-h3);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

/* The format is the thing a reader must not misread, so it sits apart from
   the description rather than inside it. */
.purchase__format {
    color: var(--colour-text);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.purchase__option-text {
    color: var(--colour-text-muted);
    margin-bottom: var(--space-md);
}

.purchase__price {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
}

/* Pushes the action to the foot of the column so both buttons align even when
   the two descriptions differ in length. */
.purchase__form,
.purchase__actions {
    margin-block: auto 0;
    padding-top: var(--space-sm);
}

.purchase__note {
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-sm);
}

.purchase__clarify {
    border-top: 1px solid var(--colour-border);
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-lg);
    max-width: 40rem;
    padding-top: var(--space-md);
}

/* --- Purchase result pages ------------------------------------------------ */

.purchase-result__title {
    margin-bottom: var(--space-md);
    max-width: 22ch;
    text-wrap: balance;
}

.purchase-result__text {
    margin-bottom: var(--space-md);
    max-width: 38rem;
}

.purchase-result__downloads {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block: var(--space-lg);
}

/* The one reassurance that matters if the customer closes the tab, so it is a
   statement in its own right rather than a clause at the end of a muted note
   about download limits, where it was missed even by its author. */
.purchase-result__emailed {
    border-left: 3px solid var(--colour-brand);
    background-color: var(--colour-brand-tint);
    margin-block: var(--space-lg);
    max-width: 38rem;
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
}

/* Delivery failed. The customer must act now, so it cannot look like the
   reassuring version. */
.purchase-result__emailed--warn {
    background-color: var(--colour-surface-sunken);
    border-left-color: var(--colour-text-muted);
    font-weight: 600;
}

.purchase-result__note {
    border-top: 1px solid var(--colour-border);
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    max-width: 38rem;
    padding-top: var(--space-md);
}

/* ==========================================================================
   21. Print

   Applies mainly to the checklist. Site furniture is removed so a printed
   copy is the document and nothing else.
   ========================================================================== */

@media print {

    .site-header,
    .site-footer,
    .skip-link,
    .breadcrumb,
    .resource__print-note {
        display: none;
    }

    body {
        background: #FFFFFF;
        color: #000000;
        font-size: 11pt;
    }

    .page {
        padding-block: 0;
    }

    .container {
        max-width: none;
        padding-inline: 0;
    }

    a {
        color: #000000;
        text-decoration: none;
    }

    h1, h2 {
        break-after: avoid;
    }

    .checklist li,
    .template dt,
    .template dd,
    .record-table tr {
        break-inside: avoid;
    }

    /* Tables must print whole rather than scroll. */
    .table-scroll {
        overflow-x: visible;
    }

    .record-table {
        font-size: 9pt;
        min-width: 0;
    }

    .record-table th {
        background: #FFFFFF;
    }
}


/* ==========================================================================
   22. Responsive adjustments (shell, header and footer)
   ========================================================================== */

@media (min-width: 768px) {

    :root {
        --gutter: 2rem;
    }

    .site-header__brand {
        font-size: 1.25rem;
    }

    /* Restores the accepted desktop footer proportions. */
    .site-footer {
        padding-block: var(--space-xl);
    }

    .site-footer__inner {
        align-items: flex-start;
        flex-direction: row;
        gap: var(--space-2xl);
    }

    .site-footer__list {
        gap: var(--space-xs) var(--space-lg);
    }

    .site-footer__legal {
        margin-top: var(--space-lg);
        padding-top: var(--space-md);
    }
}

/* Restores the accepted desktop page shell, which pairs with the hero's own
   padding reapplied in section 8. */
@media (min-width: 992px) {

    .page {
        padding-block: var(--space-xl) var(--space-2xl);
    }

    /* The navigation goes inline here, matching the navbar-expand-lg
       collapse point in the markup. Six items do not fit at 768px. */
    .site-nav__list {
        gap: var(--space-lg);
    }

    /* Inline navigation: the rule sits beneath the current item instead. */
    .site-nav__item {
        border-left: 0;
        padding-left: 0;
    }

    .site-nav__link {
        border-bottom: 2px solid transparent;
        padding-bottom: 0.35rem;
    }

    .site-nav__link.is-current {
        border-bottom-color: var(--colour-on-brand);
    }
}