main > article {
    --policy-accent: currentColor;     /* links, focus ring, summary bar (e.g. your brand colour) */
    --policy-sticky-top: 1.5rem;       /* raise this if your site header is sticky or fixed */
    --policy-measure: 68ch;            /* longest line of running text */
    /* --policy-font: system-ui, sans-serif;   uncomment to use a different font from the site */

    /* Lines and tints are mixed from the text colour, so they suit light and dark themes */
    --policy-rule: rgba(128, 128, 128, 0.3);
    --policy-rule-strong: rgba(128, 128, 128, 0.55);
    --policy-tint: rgba(128, 128, 128, 0.08);
    --policy-tint-strong: rgba(128, 128, 128, 0.16);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    main > article {
        --policy-rule: color-mix(in srgb, currentColor 16%, transparent);
        --policy-rule-strong: color-mix(in srgb, currentColor 40%, transparent);
        --policy-tint: color-mix(in srgb, currentColor 6%, transparent);
        --policy-tint-strong: color-mix(in srgb, currentColor 11%, transparent);
        --policy-muted: color-mix(in srgb, currentColor 72%, transparent);
    }
}


/* Keep global element rules from style.css out of the policy
   (a flex `nav`, a centred `section`, `ul { list-style: none }` ...).
   Inside the article these go back to browser defaults, then get styled below.
   -------------------------------------------------------------------------- */

main > article,
main > article :is(header, nav, section, h1, h2, h3, p, ul, ol, li, a, address,
                   dl, dt, dd, table, caption, thead, tbody, tr, th, td,
                   code, abbr, time, span) {
    all: revert;
    box-sizing: border-box;
}

main > article :is(a, li, h1, h2, h3)::before,
main > article :is(a, li, h1, h2, h3)::after {
    all: revert;
}


/* Page and text
   -------------------------------------------------------------------------- */

main > article {
    display: block;
    max-width: 44em;
    margin-inline: auto;
    padding: clamp(2em, 6vw, 4em) clamp(1em, 5vw, 2em) clamp(3em, 8vw, 5em);
    font-family: var(--policy-font, inherit);
    font-size: max(1.0625em, 1rem);
    line-height: 1.65;
    text-align: start;
    overflow-wrap: break-word;
}

main > article :is(h1, h2, h3) {
    line-height: 1.25;
    text-wrap: balance;
}

main > article h1 {
    margin: 0;
    font-size: clamp(2em, 1.4em + 2vw, 2.6em);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

main > article h2 {
    margin: 0 0 0.6em;
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

main > article h3 {
    margin: 1.6em 0 0.45em;
    font-size: 1.125em;
    font-weight: 600;
}

main > article p {
    max-width: var(--policy-measure);
    margin: 0 0 1em;
    text-wrap: pretty;
}

main > article ul {
    max-width: var(--policy-measure);
    margin: 0 0 1em;
    padding-inline-start: 1.25em;
    list-style: disc outside;
}

main > article li + li {
    margin-block-start: 0.45em;
}

main > article ul > li::marker {
    color: var(--policy-muted, currentColor);
}

main > article :is(header, section) > :last-child {
    margin-block-end: 0;
}


/* Links
   -------------------------------------------------------------------------- */

main > article a {
    color: var(--policy-accent);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

main > article a:hover {
    text-decoration-thickness: 0.15em;
}

main > article a:focus-visible {
    outline: 2px solid var(--policy-accent);
    outline-offset: 0.15em;
    border-radius: 0.15em;
}


/* Inline details
   -------------------------------------------------------------------------- */

main > article code {
    padding: 0.1em 0.35em;
    border-radius: 0.3em;
    background: var(--policy-tint-strong);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    overflow-wrap: anywhere;
}

main > article abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}


/* Title block
   -------------------------------------------------------------------------- */

main > article > header {
    margin: 0 0 2.5em;
    padding: 0 0 1.75em;
    border-block-end: 1px solid var(--policy-rule);
}

main > article > header p {
    margin: 0.75em 0 0;
    font-size: 0.9375em;
    color: var(--policy-muted, inherit);
}


/* Contents list
   -------------------------------------------------------------------------- */

main > article > nav {
    margin: 0 0 2.5em;
    padding: 1.25em 0;
    border-block: 1px solid var(--policy-rule);
}

/* The title block's bottom rule already separates the two */
main > article > header + nav {
    padding-block-start: 0;
    border-block-start: 0;
}

main > article > nav h2 {
    margin: 0 0 0.75em;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--policy-muted, inherit);
}

main > article > nav ol {
    margin: 0;
    padding-inline-start: 2.25em;
    list-style: decimal outside;
    columns: 2 13em;
    column-gap: 2.5em;
    font-size: 0.9em;
    line-height: 1.4;
}

main > article > nav li {
    margin: 0;
    padding-block: 0.25em;
    break-inside: avoid;
}

main > article > nav li::marker {
    color: var(--policy-muted, currentColor);
    font-variant-numeric: tabular-nums;
}

main > article > nav a {
    color: inherit;
    text-decoration-line: none;
}

main > article > nav a:hover {
    text-decoration-line: underline;
}


/* Sections
   -------------------------------------------------------------------------- */

main > article > section {
    margin: 2.5em 0 0;
    padding: 2em 0 0;
    border-block-start: 1px solid var(--policy-rule);
}

/* The summary is what most people read, so it gets the one panel on the page */
main > article > #summary {
    margin-block-start: 0;
    padding: clamp(1.25em, 3vw, 1.75em) clamp(1.25em, 3.5vw, 2em);
    border-block-start: 0;
    border-inline-start: 3px solid var(--policy-accent);
    border-radius: 0 0.5em 0.5em 0;
    background: var(--policy-tint);
}

main > article > #summary ul {
    font-size: 1.0625em;
}


/* Contact details
   -------------------------------------------------------------------------- */

main > article address {
    margin: 0 0 1.25em;
    font-style: normal;
}

main > article address > p {
    margin: 0 0 0.4em;
    font-weight: 600;
}

main > article address dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.3em 1.5em;
    margin: 0;
}

main > article address dt {
    color: var(--policy-muted, inherit);
}

main > article address dd {
    margin: 0;
}


/* Tables
   -------------------------------------------------------------------------- */

main > article table {
    width: 100%;
    margin: 1.25em 0 1.75em;
    border-collapse: collapse;
    font-size: 0.9375em;
    line-height: 1.5;
}

/* Kept for screen readers; the heading above already labels each table */
main > article caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

main > article :is(th, td) {
    padding: 0.75em 1em 0.75em 0;
    border-block-end: 1px solid var(--policy-rule);
    text-align: start;
    vertical-align: top;
    -webkit-hyphens: auto;
    hyphens: auto;
}

main > article :is(th, td):last-child {
    padding-inline-end: 0;
}

main > article thead th {
    padding-block: 0 0.6em;
    border-block-end: 2px solid var(--policy-rule-strong);
    font-size: 0.875em;
    font-weight: 600;
    color: var(--policy-muted, inherit);
}

main > article tbody th {
    width: 30%;
    font-weight: 600;
}


/* Jump targets
   -------------------------------------------------------------------------- */

main > article :is(section, h3)[id] {
    scroll-margin-top: calc(var(--policy-sticky-top) + 1rem);
}

/* Marks where a contents link or a "see section X" link landed */
main > article > section:target > h2,
main > article h3:target {
    background: var(--policy-tint-strong);
    outline: 0.3em solid var(--policy-tint-strong);
    border-radius: 0.15em;
}


/* Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
    main > article table {
        font-size: 0.875em;
    }

    main > article :is(th, td) {
        padding-inline-end: 0.65em;
    }

    main > article tbody th {
        width: auto;
    }
}


/* Wide screens: the contents list becomes a sticky side rail
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
    main > article {
        display: grid;
        grid-template-columns: minmax(11em, 14em) minmax(0, 41em);
        column-gap: clamp(2.5em, 4vw, 4.5em);
        justify-content: center;
        max-width: 72em;
    }

    main > article > * {
        grid-column: 2;
    }

    main > article > header {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Spans every row so it stays in view all the way down the policy */
    main > article > nav {
        grid-column: 1;
        grid-row: 2 / span 100;
        align-self: start;
        position: sticky;
        top: var(--policy-sticky-top);
        max-height: calc(100vh - var(--policy-sticky-top) - 1.5rem);
        max-height: calc(100dvh - var(--policy-sticky-top) - 1.5rem);
        margin: 0;
        padding: 0 0.25em 0 0;
        border: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    main > article > nav ol {
        columns: auto;
    }
}


/* Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


/* Print / save as PDF
   -------------------------------------------------------------------------- */

@page {
    margin: 2cm;
}

@media print {
    body > header,
    body > footer,
    main > article > nav {
        display: none;
    }

    main > article {
        display: block;
        max-width: none;
        padding: 0;
        color: #000;
        font-size: 11pt;
    }

    main > article > #summary {
        border: 1px solid currentColor;
        border-radius: 0;
    }

    main > article a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }

    main > article :is(h2, h3) {
        break-after: avoid;
    }

    main > article :is(tr, li, address) {
        break-inside: avoid;
    }

    main > article p {
        orphans: 3;
        widows: 3;
    }
}