/* ==========================================================================
   Tiverton Strategic Plan: site styles
   Palette from the draft plan document: gold, blue-grey and light grey.
   No inline styles anywhere: the content security policy blocks them.
   ========================================================================== */

:root {
    /* The three plan colours (gold is one step deeper than the document's #b2a336) */
    --gold: #9a8c2b;
    --ink: #404653;
    --grey-300: #b4b9be;

    /* Supporting tints and shades, also taken from the document */
    --gold-deep: #857925;   /* hover state for gold */
    --gold-text: #7f7521;   /* gold for small text on white: 4.7:1 */
    --yellow: #dcd95f;      /* buttons and highlighted text blocks only, with ink-deep text */
    --yellow-deep: #bebc52; /* hover state for yellow */
    --ink-deep: #2f3440;    /* hover states */
    --ink-soft: #5d5e6a;    /* secondary text */
    --steel: #c0d0d6;       /* pale blue-grey panels */
    --grey-100: #eef0f0;
    --grey-200: #e5e8ea;
    --white: #ffffff;
    --focus: #ffbf47;
    --error: #b3261e;

    --radius: 4px;
    --shadow: 0 6px 18px rgb(47 52 64 / 0.12);
    --max: 1200px;

    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
}

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

h1, h2, h3 {
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 0.5em;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--ink);
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--ink-deep);
}

main:focus {
    outline: none;
}

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.narrow {
    max-width: 760px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Add to anything whose text should not be selectable: no selection highlight and no text caret. */
.noselect {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--gold);
    color: var(--white);
    font-weight: 700;
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 1rem;
}

.icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    vertical-align: -0.15em;
}

.icon--flip {
    transform: scaleX(-1);
}

.icon--down {
    transform: rotate(90deg);
}

.cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.small {
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-text);
    margin-bottom: 0.5rem;
}

.notice {
    background: var(--grey-100);
    border-left: 5px solid var(--gold);
    padding: 0.75rem 1rem;
}

.lead {
    font-size: 1.15rem;
    color: var(--ink-soft);
}

/* Accent words in headings: the brand gold, which clears 3:1 on white at heading sizes. */
.accent {
    color: var(--gold);
}

/* The plan's document motif: uppercase, tracked headings with one word in gold. */
.caps {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
}

.brand-stripe {
    height: 7px;
    background: linear-gradient(90deg, var(--gold) 0 34%, var(--ink) 34% 67%, var(--grey-300) 67%);
}

/* --------------------------------------------------------------------------
   Buttons (yellow with ink-deep text; elsewhere gold carries white text)
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.3rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn--primary {
    background: var(--yellow);
    color: var(--ink-deep);
}

.btn--primary:hover {
    background: var(--yellow-deep);
}

.btn--dark {
    background: var(--ink);
    color: var(--white);
}

.btn--dark:hover {
    background: var(--ink-deep);
}

.btn--steel {
    background: var(--steel);
    color: var(--ink-deep);
}

.btn--steel:hover {
    background: var(--grey-300);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.btn--small {
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.text-link {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-top {
    position: relative;
    z-index: 10;
}

.site-header {
    background: var(--white);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    flex-wrap: wrap;
}

/* The logo inherits this colour through currentColor. */
.brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    color: var(--ink);
    line-height: 1.1;
}

.brand__logo {
    width: 3.9rem;
    height: 3.9rem;
    flex: none;
    color: inherit;
}

.brand__text {
    display: flex;
    flex-direction: column;
}

.brand__council {
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brand__title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.brand__tag {
    margin-top: 0.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gold);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    font: inherit;
    font-weight: 700;
    color: var(--ink);
    background: var(--grey-100);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
}

.site-nav ul a {
    display: block;
    padding: 0.4rem 0;
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.site-nav ul a:hover {
    border-bottom-color: var(--grey-300);
}

.site-nav ul a[aria-current="page"] {
    font-weight: 700;
    border-bottom-color: var(--gold);
}

/* Sub-menus under Our Priorities and Get Involved. Desktop only: they drop down below the
   link's underline on hover or keyboard focus, styled like the Share pop-up. */
.site-nav .site-nav__sub {
    display: none;
}

@media (min-width: 1081px) {
    /* The menu and its items run the full height of the header, so a sub-menu can be placed
       a known distance below them: the header's bottom padding plus the three-colour stripe. */
    .site-nav,
    .site-nav > ul {
        align-self: stretch;
    }

    .site-nav > ul > li {
        display: flex;
        align-items: center;
    }

    .site-nav__item--has-sub {
        position: relative;
        --sub-offset: calc(0.9rem + 7px);
    }

    /* The sub-menu hangs from the underside of the stripe, so it has no top border or top corners. */
    .site-nav .site-nav__sub {
        display: block;
        position: absolute;
        left: -0.75rem;
        top: calc(100% + var(--sub-offset));
        z-index: 30;
        min-width: 14rem;
        padding: 0.5rem;
        border: 1px solid var(--grey-300);
        border-top: 0;
        border-radius: 0 0 0.5rem 0.5rem;
        background: var(--white);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    /* An invisible bridge over the gap, so the pointer can travel from the link to the sub-menu. */
    .site-nav .site-nav__sub::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: var(--sub-offset);
    }

    .site-nav__item--has-sub:hover > .site-nav__sub,
    .site-nav__item--has-sub:focus-within > .site-nav__sub {
        opacity: 1;
        visibility: visible;
    }

    /* Escape closes an open sub-menu (site.js) until the pointer or focus moves away. */
    .site-nav .site-nav__item--has-sub.is-dismissed > .site-nav__sub {
        opacity: 0;
        visibility: hidden;
    }

    /* Keep the underline on the main link while its sub-menu is in use. */
    .site-nav__item--has-sub:hover > a:not([aria-current="page"]),
    .site-nav__item--has-sub:focus-within > a:not([aria-current="page"]) {
        border-bottom-color: var(--grey-300);
    }

    .site-nav .site-nav__sub a {
        padding: 0.5rem 0.6rem;
        border-bottom: 0;
        border-radius: var(--radius);
        font-weight: 400;
        white-space: nowrap;
    }

    /* The priority number box from the priority cards, a little smaller, before each title. */
    .site-nav .site-nav__sub a:has(.number-badge) {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }

    .site-nav__sub .number-badge {
        flex: none;
        font-size: 0.95rem;
        padding: 0.35rem 0.45rem;
    }

    .site-nav .site-nav__sub a:hover {
        background: var(--grey-100);
        color: var(--ink-deep);
    }
}

/* Below this width the six links, the button and the brand no longer fit on one line. */
@media (max-width: 1080px) {
    .js .nav-toggle:not([hidden]) {
        display: inline-flex;
    }

    /* The dropped-down menu: solid white, padded, edge to edge of the header. */
    .site-nav {
        flex: 0 0 calc(100% + 2.5rem);
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        margin: 0.25rem -1.25rem 0;
        padding: 1rem 1.25rem 1.5rem;
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .js .site-nav {
        display: none;
    }

    .js .site-nav.is-open {
        display: flex;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .site-nav ul a {
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--grey-200);
        font-size: 1.05rem;
    }

    .site-nav ul a[aria-current="page"] {
        border-bottom: 1px solid var(--grey-200);
        box-shadow: inset 4px 0 0 var(--gold);
        padding-left: 0.75rem;
    }

    .site-nav .btn {
        align-self: flex-start;
    }
}

.draft-banner {
    background: var(--ink);
    color: var(--white);
    font-size: 0.95rem;
    padding: 0.55rem 0;
}

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

.section {
    padding: 3.5rem 0;
}

.section--tight {
    padding: 2rem 0;
}

.section--grey {
    background: var(--grey-100);
}

.section__head {
    margin-bottom: 1.75rem;
}

.section__head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.section__head--row .section__title {
    margin-bottom: 0;
}

.section__title {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.section__title--large {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

.section__lead {
    font-size: 1.15rem;
    color: var(--ink-soft);
    max-width: 48rem;
}

.split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 860px) {
    .split {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .split--reverse > :first-child {
        order: 2;
    }
}

.split__image {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
}

.page-head {
    padding: 3rem 0 0;
    background: var(--white);
}

.page-head__title {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 0.2rem;
    /* A 1px white halo lifts the title off the skyline. The stroke is centred on the outline,
       so 2px painted behind the fill leaves exactly 1px visible outside the letters. */
    -webkit-text-stroke: 2px var(--white);
    paint-order: stroke fill;
}

.page-head__lead {
    font-size: 1.25rem;
    color: var(--ink-soft);
    margin: 0;
}

/* Sentence-case page title, matching the Get Involved heading */
/* The large bold title shared by the Get Involved hero, the plan page and the idea form box. */
.page-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* On a dark grey background */
.page-title--light {
    color: var(--white);
}

/* Skyline background: add .skyline-bg to any container. The skyline fills the container's height,
   repeats across its width and sits behind the content. The drawing is used as a mask over the
   element's `color`, so set `color` on the container to colour it. */
.skyline-bg {
    position: relative;
}

.skyline-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: currentColor;
    -webkit-mask-image: url("../images/skyline.svg");
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: left bottom;
    -webkit-mask-size: auto 100%;
    mask-image: url("../images/skyline.svg");
    mask-repeat: repeat-x;
    mask-position: left bottom;
    mask-size: auto 100%;
    pointer-events: none;
}

.skyline-bg > * {
    position: relative;
    z-index: 1;
}

/* The strip above the footer */
.skyline-strip {
    height: 10rem;
    max-height: 10rem;
    margin-top: 2rem;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Home hero: the photo behind the header, with the text block just below it
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.hero__content {
    position: relative;
    padding-bottom: 2.5rem;
}

/* The text block: 90% white, fading to nothing along its right edge and bottom. */
.hero__panel {
    position: relative;
    isolation: isolate;
    max-width: 50rem;
    padding: 1.75rem 9rem 3.7rem 2rem;
}

.hero__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(255 255 255 / 0.9);
    -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent 100%), linear-gradient(180deg, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 75%, transparent 100%), linear-gradient(180deg, #000 85%, transparent 100%);
    mask-composite: intersect;
}

@media (max-width: 760px) {
    .hero__panel {
        padding-right: 2rem;
    }
}

.hero__title {
    font-size: clamp(2.2rem, 4.4vw, 3.3rem);
    font-weight: 700;
    color: var(--ink);
}

.hero__text {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    max-width: 34rem;
}

.action-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

@media (min-width: 760px) {
    .action-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.action-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 1.5rem;
    text-decoration: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
}

.action-card:hover {
    transform: translateY(-2px);
}

.action-card__icon {
    width: 2.6rem;
    height: 2.6rem;
}

.action-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.action-card__text {
    font-size: 1rem;
}

.action-card--dark {
    background: rgb(64 70 83 / 0.95);
    color: var(--white);
}

.action-card--yellow {
    background: rgb(220 217 95 / 0.95); /* --yellow at 95% */
    color: var(--ink-deep);
}

.action-card--steel {
    background: rgb(192 208 214 / 0.95); /* --steel at 95% */
    color: var(--ink-deep);
}

/* --------------------------------------------------------------------------
   Priority cards (photo on top, alternating pale and dark bodies as in the plan)
   -------------------------------------------------------------------------- */

.priority-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

.priority-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: box-shadow 0.15s ease;
}

.priority-card__link:hover {
    box-shadow: var(--shadow);
}

.priority-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
}

.priority-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.priority-card__number,
.number-badge {
    display: inline-block;
    background: var(--gold);
    color: var(--white);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.45rem 0.6rem;
}

.priority-card__number {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.priority-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    padding: 1.1rem 1rem 1rem;
    background: var(--steel);
}

.priority-card:nth-child(even) .priority-card__body {
    background: var(--ink);
    color: var(--white);
}

.priority-card:nth-child(even) .priority-card__title {
    color: var(--white);
}

.priority-card__title {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.35;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid currentColor; /* white on the dark cards, ink on the pale ones */
}

.priority-card__text {
    font-size: 0.92rem;
    flex: 1;
}

.priority-card__go {
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--gold);
    color: var(--white);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

/* Hover and keyboard focus nudge the arrow along and darken it, like the gold buttons. */
.priority-card__link:hover .priority-card__go,
.priority-card__link:focus-visible .priority-card__go {
    transform: translateX(0.35rem);
    background: var(--gold-deep);
}

/* --------------------------------------------------------------------------
   Priority pages
   -------------------------------------------------------------------------- */

.priority-head {
    padding-bottom: 1.5rem;
}

.priority-head__title-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.number-badge {
    font-size: 2rem;
    padding: 0.5rem 0.7rem;
}

.priority-head__title {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 0;
}

.priority-head__intro p {
    font-size: 1.08rem;
}

.priority-head__intro .lead {
    color: var(--gold-text);
}

.priority-head__media {
    aspect-ratio: 4 / 3;
}

/* Key objectives panel, as in the plan */
.objectives {
    padding: 2rem;
    background: var(--grey-100);
}

/* Two flowing columns (not a grid), so a long objective never stretches the row beside it. */
.objectives__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 760px) {
    .objectives__list {
        column-count: 2;
        column-gap: 2.5rem;
    }
}

.objectives__list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.75rem;
    break-inside: avoid;
}

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

.objectives__list li::before {
    content: ">";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--gold-text);
}

/* Further text wraps under and to the right of the second photo on wide screens. */
.more {
    display: flow-root;
}

.more__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 1.5rem;
}

@media (min-width: 860px) {
    .more__image {
        float: left;
        width: 46%;
        margin: 0.3rem 2.25rem 1rem 0;
    }

    .more__image--right {
        float: right;
        margin: 0.3rem 0 1rem 2.25rem;
    }
}

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

.whatif {
    display: grid;
    overflow: hidden;
    background: var(--steel);
}

@media (min-width: 860px) {
    .whatif {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.whatif__body {
    padding: 2rem;
}

.whatif__kicker {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--gold);
    color: var(--white);
}

.whatif__title {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.whatif__ask {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    background: var(--white);
    border-left: 4px solid var(--gold);
}

.whatif__ask strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.whatif__ask a {
    font-weight: 700;
}

.whatif__image {
    min-height: 16rem;
    height: 100%;
    object-fit: cover;
    display: block;
    width: 100%;
}

.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--grey-100);
    border-left: 6px solid var(--gold);
}

.cta-band__icon {
    width: 3rem;
    height: 3rem;
    color: var(--ink);
}

.cta-band__text {
    flex: 1 1 18rem;
}

.cta-band__text p {
    margin: 0;
    color: var(--ink-soft);
}

.cta-band__text p + p {
    margin-top: 0.75rem;
}

/* A band used as a note under a form, with no actions */
.cta-band--note {
    align-items: flex-start;
}

.cta-band__title {
    font-size: 1.35rem;
    margin-bottom: 0.25rem;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Previous / all / next links at the foot of each priority page */
.pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--grey-200);
}

.pager__link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
}

.pager__link:hover .pager__title {
    text-decoration: underline;
}

.pager__link--next {
    text-align: right;
    align-items: flex-end;
}

.pager__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold-text);
}

.pager__title {
    font-weight: 700;
}

.pager__all {
    font-weight: 700;
}

@media (max-width: 600px) {
    .pager {
        grid-template-columns: 1fr;
    }

    .pager__link--next {
        text-align: left;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Panels and the carousel (vision page)
   -------------------------------------------------------------------------- */

.panels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.panel {
    padding: 1.5rem;
    background: var(--white);
    border-top: 5px solid var(--gold);
}

.panel:nth-child(even) {
    background: var(--ink);
    color: var(--white);
}

.panel:nth-child(even) .panel__title {
    color: var(--white);
}

.panel__title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

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

.carousel__controls {
    display: none;
    gap: 0.5rem;
}

.carousel__btn {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.2rem;
    color: var(--white);
    background: var(--ink);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.carousel__btn:hover:not(:disabled),
.carousel__btn:focus-visible:not(:disabled) {
    background: var(--ink-deep);
}

/* Each button nudges in the direction it scrolls. */
.carousel__btn--prev:hover:not(:disabled),
.carousel__btn--prev:focus-visible:not(:disabled) {
    transform: translateX(-0.25rem);
}

.carousel__btn--next:hover:not(:disabled),
.carousel__btn--next:focus-visible:not(:disabled) {
    transform: translateX(0.25rem);
}

.carousel__btn:disabled {
    background: var(--grey-300);
    cursor: default;
}

/* Wide screens: three panels visible, scroll or page through the rest. */
@media (min-width: 900px) {
    .carousel__controls {
        display: flex;
    }

    .carousel__track {
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 2rem) / 3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 0.25rem;

        /* The track reaches 35px past the gap on each side, so when there is another panel
           to scroll to, its edge shows there, fading out to nothing. The track reaches out
           as far as the space beside the page allows (never past the edge of the window);
           where that is less than the full amount, the panels sit a little inside it. */
        --peek: calc(1rem + 35px);
        margin-inline: calc(-1 * min(var(--peek), max(1.25rem, (100vw - var(--max)) / 2 + 0.625rem)));
        padding-inline: var(--peek);
        scroll-padding-inline: var(--peek);
        -webkit-mask-image: linear-gradient(to right, transparent, #000 35px, #000 calc(100% - 35px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 35px, #000 calc(100% - 35px), transparent);
    }

    .carousel__track::-webkit-scrollbar {
        display: none;
    }

    .carousel__item {
        scroll-snap-align: start;
    }
}

.vision-quote {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 6px solid var(--gold);
    background: var(--grey-100);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
}

.vision-quote p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Get involved: dark panel and photo run the full height, cards sit over them
   -------------------------------------------------------------------------- */

.involved-hero {
    position: relative;
    display: grid;
    background: var(--ink);
    color: var(--white);
}

/* Wide screens: the outer columns are the page margins, so the text and the cards line up
   with the site container while the photo runs to the right edge of the screen. */
@media (min-width: 900px) {
    .involved-hero {
        grid-template-columns:
            minmax(1.25rem, 1fr)
            minmax(0, calc((var(--max) - 2.5rem) / 2))
            minmax(0, calc((var(--max) - 2.5rem) / 2))
            minmax(1.25rem, 1fr);
        grid-template-rows: auto auto;
    }

    .involved-hero .involved-hero__text {
        grid-column: 2;
        grid-row: 1;
        padding: 3rem 2rem 2rem 0;
    }

    .involved-hero__media {
        grid-column: 3 / 5;
        grid-row: 1 / span 2;
    }

    .involved-hero .involved-hero__cards {
        grid-column: 2 / 4;
        grid-row: 2;
        padding: 1rem 0 3rem;
    }
}

.involved-hero__text {
    padding: 3rem 1.25rem 2rem;
    align-self: center;
}

.involved-hero__text .kicker {
    color: var(--white);
}

.involved-hero__media {
    position: relative;
    min-height: 20rem;
}

.involved-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.involved-hero__cards {
    position: relative;
    z-index: 1;
    padding: 1rem 1.25rem 3rem;
}

.choice-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

/* Side by side, the two cards butt up against each other. */
@media (min-width: 860px) {
    .choice-cards {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
}

.split--top {
    align-items: start;
}

.choice-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.75rem;
    color: var(--ink);
    box-shadow: var(--shadow);
    scroll-margin-top: 1rem;
    border-top: 6px solid var(--gold);
}

.choice-card--grey {
    background: var(--grey-100);
}

.choice-card--steel {
    background: var(--steel);
}

.choice-card__icon {
    width: 3rem;
    height: 3rem;
    color: var(--ink);
}

.choice-card__title {
    font-size: 1.3rem;
}

.steps {
    padding-left: 1.25rem;
}

.steps li {
    margin-bottom: 0.6rem;
}

.contact-list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.contact-list .icon {
    margin-top: 0.3rem;
    color: var(--gold-text);
}

.tick-list {
    padding-left: 1.25rem;
}

.tick-list li {
    margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   Idea form
   -------------------------------------------------------------------------- */

/* Under the idea form: four boxes saying what happens to an idea. */
.idea-section .section__lead {
    max-width: none;
}

.idea-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .idea-points {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1081px) {
    .idea-points {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The boxes alternate like the panels in the "Why a Strategic Plan?" carousel: white with a gold
   top edge, then dark grey with white text. They sit on a light grey section. */
.idea-point {
    padding: 1.4rem 1.25rem;
    background: var(--white);
    border-top: 5px solid var(--gold);
}

.idea-point:nth-child(even) {
    background: var(--ink);
    color: var(--white);
}

.idea-point__icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.6rem;
}

.idea-point__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: inherit;
}

.idea-point p {
    margin: 0;
}

/* The page heading and the form, in a dark grey box with white text that floats over the hero photo. */
.idea-box {
    position: relative;
    padding: 1.75rem 1.25rem 2rem;
    border-radius: var(--radius);
    background: rgb(64 70 83 / 0.96);
    color: var(--white);
    box-shadow: var(--shadow);
}

/* The error summary sits inside the dark box, so it needs a white background of its own. */
.idea-box .error-summary {
    background: var(--white);
    color: var(--ink);
}

@media (min-width: 760px) {
    .idea-box {
        padding: 2.25rem 2.5rem 2.5rem;
    }
}

.idea-box .section__lead {
    color: var(--white);
}

.idea-box .field__hint,
.idea-box .field__count {
    color: var(--grey-200);
}

.idea-box .field__input {
    border-color: var(--white);
}

/* The usual error red is too dark to read on dark grey, so errors here use a pale red. */
.idea-box .field__error,
.idea-box .field__count--over {
    color: #ffb4ab;
}

.idea-box .field__input.input-validation-error {
    border-color: #ffb4ab;
}

.idea-box :focus-visible {
    box-shadow: none;
}

.idea-form {
    margin-top: 1.25rem;
}

.idea-form__grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 860px) {
    .idea-form__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.idea-form__side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
}

.idea-form__side .btn {
    align-self: flex-start;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field__label {
    font-weight: 700;
}

.field__hint {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.field__input {
    width: 100%;
    padding: 0.75rem 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--ink-soft);
    border-radius: var(--radius);
}

.field__input:focus-visible {
    border-color: var(--ink);
}

.field__input.input-validation-error {
    border-color: var(--error);
}

textarea.field__input {
    resize: vertical;
    min-height: 12rem;
}

.field__error {
    font-weight: 700;
    color: var(--error);
}

.field__error:empty {
    display: none;
}

/* Live count of characters remaining, added under the idea box by site.js */
.field__count {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.field__count--over {
    font-weight: 700;
    color: var(--error);
}

/* Error summary at the top of the page; site.js moves focus here after a failed submission. */
.error-summary {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    border: 4px solid var(--error);
}

.error-summary__title {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.error-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 700;
    color: var(--error);
}

.error-summary li + li {
    margin-top: 0.3rem;
}

.error-summary a {
    color: var(--error);
}

/* Spam trap field: moved off-screen rather than display:none so bots still see it. */
.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.confirmation {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.confirmation__icon {
    width: 3rem;
    height: 3rem;
    color: var(--gold-text);
}

.confirmation .section__title {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Draft plan
   -------------------------------------------------------------------------- */

/* A full-width photo with a box floating over it: the plan page and the idea form. */
.photo-hero {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

/* Less space above and below, for a tall box such as the idea form */
.photo-hero--compact {
    padding: clamp(1.5rem, 5vw, 3.5rem) 0;
}

/* Override: the box starts at the very top of the hero, with no gap above it, and so has
   square top corners. */
.photo-hero--flush-top {
    padding-top: 0;
}

.photo-hero--flush-top .idea-box,
.photo-hero--flush-top .plan-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.photo-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plan-card {
    position: relative;
    display: grid;
    gap: 2.5rem;
    padding: 2rem;
    background: rgb(255 255 255 / 0.96);
    box-shadow: var(--shadow);
}

@media (min-width: 760px) {
    .plan-card {
        grid-template-columns: 16rem 1fr;
        gap: 3.5rem;
        align-items: center;
    }
}

/* Give the card's text, button and link room to breathe */
.plan-card__body .section__title,
.plan-card__body .page-title {
    margin-bottom: 1rem;
}

.plan-card__body p {
    margin-bottom: 1.5rem;
}

.plan-card__body .btn {
    margin-bottom: 1.5rem;
}

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

/* A miniature of the document's front cover */
.plan-cover {
    display: flex;
    flex-direction: column;
    width: 16rem;
    aspect-ratio: 297 / 210;
    background: var(--ink);
    color: var(--white);
    box-shadow: var(--shadow);
    transform: rotate(-3deg);
    overflow: hidden;
}

.plan-cover__image {
    flex: 1;
    min-height: 0;
    object-fit: cover;
    width: 100%;
}

.plan-cover__text {
    padding: 0.6rem 0.75rem;
    line-height: 1.15;
}

.plan-cover__council {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.plan-cover__title {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.plan-cover__years {
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Long-form text (accessible plan, policies)
   -------------------------------------------------------------------------- */

.prose {
    max-width: 50rem;
}

/* Long-form styling at the normal page width */
.prose--full {
    max-width: none;
}

.prose h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-top: 2.5rem;
}

.prose h3 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
}

.prose section {
    scroll-margin-top: 1rem;
}

/* Simple data table (the cookie table on the privacy page) */
.table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    text-align: left;
}

.table th,
.table td {
    padding: 0.7rem 1rem 0.7rem 0;
    border-bottom: 1px solid var(--grey-300);
    vertical-align: top;
}

.table thead th {
    border-bottom: 2px solid var(--ink);
}

.table tbody th {
    font-weight: 400;
    white-space: nowrap;
}

.toc {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--grey-100);
}

.toc h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.toc ol {
    margin: 0;
    padding-left: 1.25rem;
}

.credits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.credits li {
    background: var(--grey-100);
}

.credits img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.credits__text {
    display: block;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */

.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    max-width: 50rem;
}

.news-item {
    padding: 1.25rem 1.5rem;
    background: var(--grey-100);
    border-left: 5px solid var(--gold);
}

.news-item__title {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
}

.news-item__date {
    font-size: 0.92rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Share links (the <vc:share-links /> component at the foot of the main pages)
   -------------------------------------------------------------------------- */

.share {
    padding: 2rem 0 0;
}

.share__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.share__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.share__link:hover {
    background: var(--ink-deep);
}

.share__link .icon {
    width: 1.3rem;
    height: 1.3rem;
}

.share__status {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.share__status:empty {
    display: none;
}

/* In the footer: no label, and the colours swapped to a white circle with a dark grey logo. */
.share--footer {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
}

.share--footer .share__list li {
    margin: 0;
}

.share--footer .share__link {
    background: var(--white);
    color: var(--ink);
}

.share--footer .share__link:hover {
    background: var(--grey-300);
    color: var(--ink-deep);
}

.share--footer .share__status {
    order: -1;
    color: var(--white);
}

/* The service's name is for screen readers in the row and the footer; the pop-up shows it. */
.share__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Desktop only: a "Share" button floating just off the bottom left corner of the window, which
   opens a pop-up of the share options. site.js tucks it away while the footer's copyright line
   (with its own share buttons) is on screen. Phones and tablets get the row instead. */
.share-float {
    display: none;
}

@media (min-width: 1081px) {
    .share--page {
        display: none;
    }

    .share-float {
        display: block;
        position: fixed;
        left: 1rem;
        bottom: 1rem;
        z-index: 20;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    .share-float.is-tucked {
        opacity: 0;
        visibility: hidden;
    }

    .share-float__button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 1.1rem;
        border: 2px solid var(--white);
        border-radius: var(--radius);
        background: var(--ink);
        color: var(--white);
        font-weight: 700;
        line-height: 1.2;
        cursor: pointer;
        list-style: none;
        box-shadow: var(--shadow);
        transition: background-color 0.15s ease;
    }

    .share-float__button::-webkit-details-marker {
        display: none;
    }

    .share-float__button:hover,
    .share-float[open] .share-float__button {
        background: var(--ink-deep);
    }

    /* The pop-up sits above the button, with a small pointer down to it. */
    .share-float__panel {
        position: absolute;
        left: 0;
        bottom: calc(100% + 0.8rem);
        width: 17rem;
        padding: 0.75rem;
        border: 1px solid var(--grey-300);
        border-radius: 0.5rem;
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .share-float__panel::after {
        content: "";
        position: absolute;
        left: 1.6rem;
        top: 100%;
        width: 0.8rem;
        height: 0.8rem;
        margin-top: -0.4rem;
        border-right: 1px solid var(--grey-300);
        border-bottom: 1px solid var(--grey-300);
        background: var(--white);
        transform: rotate(45deg);
    }

    .share-float__image {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 0.75rem;
        border: 1px solid var(--grey-300);
        border-radius: var(--radius);
    }

    .share-float__title {
        margin: 0 0.5rem 0.5rem;
        font-weight: 700;
    }

    .share-float .share__list {
        flex-direction: column;
        gap: 0.1rem;
    }

    .share-float .share__link {
        justify-content: flex-start;
        gap: 0.7rem;
        width: 100%;
        height: auto;
        padding: 0.5rem;
        border-radius: var(--radius);
        background: none;
        color: var(--ink);
        font: inherit;
        text-align: left;
        text-decoration: none;
    }

    .share-float .share__link:hover {
        background: var(--grey-100);
        color: var(--ink-deep);
    }

    .share-float .share__name {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }

    .share-float .share__status {
        margin: 0.4rem 0.5rem 0;
    }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--ink);
    color: var(--white);
    padding: 3rem 0 2rem;
}

.site-footer a {
    color: var(--white);
}

.site-footer__grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 760px) {
    .site-footer__grid {
        grid-template-columns: 1.1fr 0.8fr 0.8fr 1.3fr;
    }
}

.site-footer__brand-col {
    text-align: center;
}

/* The logo file is painted with currentColor, so this makes it white. */
.site-footer__logo-link {
    display: block;
    width: 100%;
    max-width: 9rem;
    margin: 0 auto 1rem;
    color: var(--white);
}

.site-footer__logo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.site-footer__brand {
    margin: 0;
    line-height: 1.4;
}

.site-footer__heading {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.site-footer .contact-list {
    margin: 0.5rem 0 0;
    font-size: 1rem;
}

.site-footer .contact-list .icon {
    color: var(--white);
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: 0.4rem;
}

/* Copyright line on the left, share buttons on the right */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 0.2);
}

.site-footer__legal {
    flex: 1 1 20rem;
    margin: 0;
    font-size: 0.9rem;
}

.site-footer :focus-visible {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Print (mainly for the accessible version of the plan)
   -------------------------------------------------------------------------- */

@media print {
    /* Navigation and decoration are no use on paper. */
    .skip-link,
    .draft-banner,
    .nav-toggle,
    .site-nav,
    .skyline-strip,
    .share,
    .share-float,
    .site-footer nav,
    .carousel__controls {
        display: none !important;
    }

    body {
        font-size: 11pt;
    }

    /* Browsers leave out backgrounds when printing, so the footer's white text needs to turn dark. */
    .site-footer,
    .site-footer a,
    .site-footer__heading,
    .site-footer__logo-link,
    .site-footer .contact-list .icon {
        background: none;
        color: var(--ink-deep);
    }

    .site-footer {
        padding: 1.5rem 0 0;
        border-top: 1px solid var(--grey-300);
    }

    .site-footer__grid {
        grid-template-columns: 1fr 2fr;
    }

    .site-footer__logo-link {
        max-width: 5rem;
    }

    .site-footer__bottom {
        border-top-color: var(--grey-300);
    }

    .section,
    .page-head {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .prose {
        max-width: none;
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
    }

    p,
    li {
        orphans: 3;
        widows: 3;
    }

    img,
    table,
    .toc {
        break-inside: avoid;
    }
}