/* ==========================================================================
   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, or behind small white text: 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;

    /* The type and spacing scales (plan 19, step 7.6): every font size and space in the three
       stylesheets is one of these steps, but for a few that are not spacing at all: a negative
       margin that cancels a padding or places an arrow, an icon's size, the print and chart sizes
       in pt and px, and the space kept for something of a fixed size. --text-body is the body's. */
    --text-2xs: 0.78rem;
    --text-xs: 0.875rem;
    --text-sm: 0.95rem;
    --text-md: 1rem;
    --text-body: 1.0625rem;
    --text-lg: 1.125rem;
    --text-xl: 1.2rem;
    --text-2xl: 1.4rem;
    --text-3xl: 1.5rem;
    --text-4xl: 1.75rem;
    --text-5xl: 2rem;

    /* --space-n is n x 4px, at 16px to the rem; --space-0-5 2px, --space-1-5 6px, --space-2-5 10px. */
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;

    --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: var(--text-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);

    /* A page shorter than the window still fills it: the content takes the room there is,
       so the footer sits at the base of the window with no blank space under it. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

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 var(--space-5);
}

.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: var(--space-3) var(--space-4);
    background: var(--gold-text); /* white on plain gold is 3.4:1; this is 4.7:1 */
    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: var(--text-xs);
    color: var(--ink-soft);
}

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

.notice {
    background: var(--grey-100);
    border-left: 5px solid var(--gold);
    padding: var(--space-3) var(--space-4);
}

.lead {
    font-size: var(--text-lg);
    color: var(--ink-soft);
}

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

/* On a light grey background the brand gold drops just under 3:1, so the accent uses the
   darker gold there (4.1:1). */
.section--grey .accent,
.objectives .accent {
    color: var(--gold-text);
}

.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: var(--space-2-5);
    padding: var(--space-3) var(--space-5);
    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;
}

/* One look for a button that cannot be pressed just now, whatever its kind (plan 19, step 7.51). */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.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: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.text-link {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

/* --------------------------------------------------------------------------
   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: var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    flex-wrap: wrap;
}

/* The logo inherits this colour through currentColor. */
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    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: var(--text-md);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brand__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.brand__tag {
    margin-top: var(--space-0-5);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gold-text);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4);
    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: var(--space-6);
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
}

.site-nav ul a {
    display: block;
    padding: var(--space-1-5) 0;
    font-size: var(--text-md);
    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. On desktop they drop down below the
   link's underline on hover or keyboard focus, styled like the Share pop-up; on phones and
   tablets they open in place, from a button beside the link (below). */
.site-nav .site-nav__sub {
    display: none;
}

/* The button that opens a sub-menu on phones and tablets. site.js adds it; it is not shown
   on desktop, where the sub-menus drop down instead. */
.site-nav__expand {
    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: var(--space-2);
        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);
    }

    /* Override: the Have your say button at the end of the menu, with a sub-menu of its own.
       It runs the menu's full height, as the items do, so its sub-menu hangs from the same
       place, and lines up with the button's right-hand edge so it stays on the page. */
    .site-nav__cta {
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    .site-nav .site-nav__cta > .site-nav__sub {
        left: auto;
        right: 0;
    }

    .site-nav__cta:hover > .btn,
    .site-nav__cta:focus-within > .btn {
        border-color: transparent;
    }

    .site-nav .site-nav__sub a {
        padding: var(--space-2) var(--space-2-5);
        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: var(--space-2-5);
    }

    /* Small white numbers need the darker gold behind them (4.7:1). */
    .site-nav__sub .number-badge {
        flex: none;
        background: var(--gold-text);
        font-size: var(--text-sm);
        padding: var(--space-1-5) var(--space-2);
    }

    .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. Have your say
       is one of its items here, so it follows straight on from the list. */
    .site-nav {
        flex: 0 0 calc(100% + 2.5rem);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: var(--space-1) -1.25rem 0;
        padding: var(--space-4) var(--space-5) var(--space-6);
        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: var(--space-3) 0;
        border-bottom: 1px solid var(--grey-200);
        font-size: var(--text-body);
    }

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

    /* Its gold mark is a shadow too, which would take the place of the focus ring's dark edge (plan 19, step 4.1). */
    .site-nav ul a[aria-current="page"]:focus-visible {
        box-shadow: inset 4px 0 0 var(--gold), 0 0 0 6px var(--ink-deep);
    }

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

    /* An item with a sub-menu: its link, the button that opens the sub-menu beside it, and
       the sub-menu under both, with the item's line below the lot (plan 19, step 5.1). */
    .site-nav__item--has-sub {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--grey-200);
    }

    .site-nav ul .site-nav__item--has-sub > a {
        flex: 1;
        border-bottom: 0;
    }

    .js .site-nav__expand {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 0;
        border-radius: var(--radius);
        background: none;
        color: var(--ink);
        cursor: pointer;
    }

    .site-nav__expand:hover {
        background: var(--grey-100);
    }

    /* The chevron points down when the sub-menu is closed, and up when it is open. */
    .site-nav__expand .icon {
        width: 1.4rem;
        height: 1.4rem;
        transform: rotate(90deg);
    }

    .site-nav__expand[aria-expanded="true"] .icon {
        transform: rotate(-90deg);
    }

    /* Open, indented under its item. Without script every sub-menu is open. */
    .js .site-nav .site-nav__expand[aria-expanded="true"] + .site-nav__sub,
    html:not(.js) .site-nav .site-nav__sub {
        display: flex;
        flex-basis: 100%;
        margin: 0 0 var(--space-2);
        padding: 0 0 0 var(--space-4);
        border-left: 3px solid var(--grey-200);
    }

    .site-nav ul.site-nav__sub a {
        display: flex;
        align-items: center;
        gap: var(--space-2-5);
        padding: var(--space-2-5) 0;
        border-bottom: 0;
        font-size: var(--text-md);
    }

    .site-nav ul.site-nav__sub a[aria-current="page"] {
        padding-left: var(--space-3);
    }

    /* Small white numbers need the darker gold behind them (4.7:1). */
    .site-nav__sub .number-badge {
        flex: none;
        background: var(--gold-text);
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-1-5);
    }

    /* Override: Have your say is the gold button on desktop; on phones and tablets it looks like
       the other items in the menu (David, mock-up sheet 16). */
    .site-nav .site-nav__cta > .btn {
        flex: 1;
        align-self: auto;
        display: block;
        padding: var(--space-3) 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--ink);
        font-size: var(--text-body);
        font-weight: 400;
        line-height: inherit;
    }

    .site-nav .site-nav__cta > .btn:hover {
        background: none;
    }

    .site-nav .site-nav__cta > .btn[aria-current="page"] {
        padding-left: var(--space-3);
        font-weight: 700;
        box-shadow: inset 4px 0 0 var(--gold);
    }

    .site-nav .site-nav__cta > .btn[aria-current="page"]:focus-visible {
        box-shadow: inset 4px 0 0 var(--gold), 0 0 0 6px var(--ink-deep);
    }
}

.draft-banner {
    background: var(--ink);
    color: var(--white);
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
}

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

.section {
    padding: var(--space-14) 0;
}

.section--tight {
    padding: var(--space-8) 0;
}

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

.section__head {
    margin-bottom: var(--space-7);
}

.section__head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    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: var(--text-lg);
    color: var(--ink-soft);
    max-width: 48rem;
}

.split {
    display: grid;
    gap: var(--space-10);
    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: var(--space-12) 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: var(--space-1);
    /* 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: var(--text-xl);
    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: var(--space-3);
}

/* 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: var(--space-8);
    color: var(--ink);
}

/* Override: a page that ends in a full-width grey band carries the grey on down to the footer,
   behind the skyline, with no white gap (plan 19, step 9.16). The band is .section--grey on the
   website's pages or .block--grey in Have your say's pages of blocks, and it ends the page when
   it is the last thing in <main>, or in an <article> that is, leaving out the "Share this page"
   row and button and what is never shown. In a page shorter than the window the band takes the
   room left; on a phone the share row under it sits on the grey too; and the skyline's strip has
   the grey for its ground, with the gap above it inside the strip. A page that ends any other
   way is as it was, and on paper there is no skyline to go behind. */
@media screen {
    main:has(> :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey),
             > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) > :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)),
    main > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):has(> :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)) {
        display: flex;
        flex-direction: column;
    }

    main > :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey),
    main > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):has(> :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)),
    main > article > :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey) {
        flex-grow: 1;
    }

    main > :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey) ~ .share,
    main > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):has(> :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)) ~ .share {
        background: var(--grey-100);
    }

    main:has(> :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey),
             > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) > :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)) ~ .skyline-strip {
        height: 12rem;
        max-height: 12rem;
        margin-top: 0;
        padding-top: var(--space-8);
        background: var(--grey-100);
    }

    main:has(> :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey),
             > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) > :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)) ~ .skyline-strip::before {
        top: 2rem;
    }
}

/* Override: a page that ends in a full-width photo, such as a survey's start screen or one of
   the public's forms, carries the photo on down behind the footer's wave, with no white gap,
   the box in the middle of it (plan 19, step 9.19, sheet 20b). The photo is cropped, never
   stretched (its object-fit, from the centre). Over it the skyline's buildings are left off and
   its wave alone is drawn (skyline-wave.svg), on every such page, the space to fill or not. A
   page that ends any other way is as it was, and on paper there is no skyline. */
@media screen {
    main:has(> .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden]))) {
        display: flex;
        flex-direction: column;
    }

    main > .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) {
        flex-grow: 1;
        display: flex;
        align-items: center;
        padding-bottom: 18rem;
    }

    main > .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])).photo-hero--compact {
        padding-bottom: calc(clamp(1.5rem, 5vw, 3.5rem) + 12rem);
    }

    main > .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) > .container {
        width: 100%;
    }

    main:has(> .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden]))) ~ .skyline-strip {
        position: relative;
        z-index: 1;
        height: 12rem;
        max-height: 12rem;
        margin-top: -12rem;
        padding-top: 2rem;
    }

    main:has(> .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden]))) ~ .skyline-strip::before {
        top: 2rem;
        -webkit-mask-image: url("../images/skyline-wave.svg");
        mask-image: url("../images/skyline-wave.svg");
    }
}

/* --------------------------------------------------------------------------
   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: var(--space-10);
}

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

.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: var(--space-8);
    }
}

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

.hero__text {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
    max-width: 34rem;
}

.action-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

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

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

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

/* The card's own shadow would take the place of the focus ring's dark edge: both, so the ring
   shows on every colour of card and over the photo behind them (plan 19, step 4.1). */
.action-card:focus-visible {
    box-shadow: 0 0 0 6px var(--ink-deep), var(--shadow);
}

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

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

.action-card__text {
    font-size: var(--text-md);
}

.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: var(--space-4);
    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: var(--text-3xl);
    line-height: 1;
    padding: var(--space-2) var(--space-2-5);
}

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

.priority-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    flex: 1;
    padding: var(--space-4) var(--space-4) var(--space-4);
    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: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.35;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid currentColor; /* white on the dark cards, ink on the pale ones */
}

.priority-card__text {
    font-size: var(--text-sm);
    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: var(--space-6);
}

.priority-head__title-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.number-badge {
    font-size: var(--text-5xl);
    padding: var(--space-2) var(--space-3);
}

.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: var(--text-body);
}

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

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

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

/* Override: in a grey stripe the width of the page (section--grey), the panel needs no ground or edge of its own (plan 19, step 9.14). */
.objectives--in-stripe {
    padding: 0;
    background: none;
}

/* 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: var(--space-10);
    }
}

.objectives__list li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    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: var(--space-6);
}

@media (min-width: 860px) {
    .more__image {
        float: left;
        width: 46%;
        margin: var(--space-1) var(--space-9) var(--space-4) 0;
    }

    .more__image--right {
        float: right;
        margin: var(--space-1) 0 var(--space-4) var(--space-9);
    }
}

.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: var(--space-8);
}

.whatif__kicker {
    display: inline-block;
    padding: var(--space-1) var(--space-2-5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--gold-text);
    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: var(--space-5) 0 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    background: var(--white);
    border-left: 4px solid var(--gold);
}

.whatif__ask strong {
    display: block;
    font-size: var(--text-body);
    margin-bottom: var(--space-1);
}

.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: var(--space-5);
    padding: var(--space-6);
    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: var(--space-3);
}

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

.cta-band__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Previous / all / next links at the foot of each priority page: three boxes across the
   page, all as tall as the tallest, light grey at each side and white in the middle. */
.pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}

.pager__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    background: var(--grey-100);
    text-decoration: none;
}

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

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

/* --ink-soft, as gold small text on the grey of the link was short of 4.5:1 (plan 19, step 4.1). */
.pager__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.pager__title {
    font-weight: 700;
}

.pager__all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    background: var(--white);
    font-weight: 700;
    text-align: center;
}

@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: var(--space-4);
}

.panel {
    padding: var(--space-6);
    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: var(--text-md);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: var(--space-3);
}

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

/* Panels that lead somewhere, such as the latest projects and ideas on Get Involved: the
   title is the link, and on a dark panel the links and the kicker read light. */
.panel__title a {
    color: inherit;
}

.panel:nth-child(even) .kicker {
    color: var(--yellow);
}

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

.carousel__controls {
    display: none;
    gap: var(--space-2);
}

.carousel__btn {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: var(--text-xl);
    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([aria-disabled="true"]),
.carousel__btn:focus-visible:not([aria-disabled="true"]) {
    background: var(--ink-deep);
}

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

.carousel__btn--next:hover:not([aria-disabled="true"]),
.carousel__btn--next:focus-visible:not([aria-disabled="true"]) {
    transform: translateX(0.25rem);
}

/* At the end there is no more that way: it says so (aria-disabled, which keeps its place for the keyboard). */
.carousel__btn[aria-disabled="true"] {
    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: var(--space-1);

        /* 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);
        --fade-start: 35px;
        --fade-end: 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 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
    }

    /* A side fades only while there is more to scroll to on it: site.js marks a track that is
       at its start or its end. Without the script both sides fade, as the track may scroll either way. */
    .carousel__track[data-at-start] {
        --fade-start: 0px;
    }

    .carousel__track[data-at-end] {
        --fade-end: 0px;
    }

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

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

.vision-quote {
    margin: 0 0 var(--space-6);
    padding: var(--space-5) var(--space-6);
    border-left: 6px solid var(--gold);
    background: var(--grey-100);
    font-size: var(--text-xl);
    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: var(--space-12) var(--space-8) var(--space-8) 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: var(--space-4) 0 var(--space-12);
    }
}

.involved-hero__text {
    padding: var(--space-12) var(--space-5) var(--space-8);
    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: var(--space-4) var(--space-5) var(--space-12);
}

.choice-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

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

.choice-card {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-7);
    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: var(--text-xl);
}

/* A link on a line of its own under a card's button: far enough from the button to be
   pressed on its own, at least 24px clear (target size, plan 19, step 4.3). */
.choice-card .btn + .small {
    margin-top: var(--space-3);
}

.steps {
    padding-left: var(--space-5);
}

.steps li {
    margin-bottom: var(--space-2-5);
}

.contact-list {
    list-style: none;
    margin: var(--space-4) 0;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2-5);
}

/* A long email address breaks onto a second line on a narrow phone, in place of widening the page. */
.contact-list li > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

/* --------------------------------------------------------------------------
   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: var(--space-4);
}

@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: var(--space-6) var(--space-5);
    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: var(--space-2-5);
}

.idea-point__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-1-5);
    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: var(--space-7) var(--space-5) var(--space-8);
    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: var(--space-9) var(--space-10) var(--space-10);
    }
}

.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;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.field__label {
    font-weight: 700;
}

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

.field__input {
    width: 100%;
    padding: var(--space-3) var(--space-3);
    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: var(--text-sm);
    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: var(--space-8);
    padding: var(--space-4) var(--space-5);
    border: 4px solid var(--error);
}

.error-summary__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

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

.error-summary li + li {
    margin-top: var(--space-1);
}

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

/* A table too wide for a narrow screen scrolls sideways inside its own box, and the page does
   not. The box is the reference for anything in the table placed out of sight for screen
   readers (a caption, the name on a button), so that those scroll with the table too: left to
   the page, they would make the page as wide as the table. Have your say's tables use it too. */
.table-scroll {
    position: relative;
    overflow-x: auto;
}

/* 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: var(--space-4);
}

.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: var(--space-10);
    padding: var(--space-8);
    background: rgb(255 255 255 / 0.96);
    box-shadow: var(--shadow);
}

@media (min-width: 760px) {
    .plan-card {
        grid-template-columns: 16rem 1fr;
        gap: var(--space-14);
        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: var(--space-4);
}

.plan-card__body p {
    margin-bottom: var(--space-6);
}

.plan-card__body .btn {
    margin-bottom: var(--space-6);
}

.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: var(--space-2-5) var(--space-3);
    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: var(--text-md);
    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;
}

.prose h2 {
    font-size: var(--text-3xl);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-top: var(--space-10);
}

.prose h3 {
    font-size: var(--text-lg);
    margin-top: var(--space-6);
}

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

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

.table th,
.table td {
    padding: var(--space-3) var(--space-4) var(--space-3) 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: var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
    background: var(--grey-100);
}

.toc h2 {
    margin-top: 0;
    font-size: var(--text-lg);
}

.toc ol {
    margin: 0;
    padding-left: var(--space-5);
}

.credits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    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: var(--space-2-5) var(--space-3);
    font-size: var(--text-xs);
}

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

.share {
    padding: var(--space-8) 0 0;
}

.share__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
}

.share__title {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 700;
}

.share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2-5);
}

.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: var(--text-sm);
    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: var(--space-3) var(--space-4);
}

.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: var(--space-2);
        padding: var(--space-2-5) var(--space-4);
        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);
    }

    /* Its own shadow would take the place of the focus ring's dark edge (plan 19, step 4.1). */
    .share-float__button:focus-visible {
        box-shadow: 0 0 0 6px var(--ink-deep), var(--shadow);
    }

    /* 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: var(--space-3);
        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: var(--space-3);
        border: 1px solid var(--grey-300);
        border-radius: var(--radius);
    }

    .share-float__title {
        margin: 0 var(--space-2) var(--space-2);
        font-weight: 700;
    }

    .share-float .share__list {
        flex-direction: column;
        gap: var(--space-0-5);
    }

    .share-float .share__link {
        justify-content: flex-start;
        gap: var(--space-3);
        width: 100%;
        height: auto;
        padding: var(--space-2);
        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: var(--space-1-5) var(--space-2) 0;
    }
}

/* --------------------------------------------------------------------------
   Tooltips: add data-tooltip="text" to any element (site.js shows it after one second).
   Styled like the Share pop-up, with a speech-bubble pointer unless the element also has
   data-tooltip-callout="false".
   -------------------------------------------------------------------------- */

.tooltip {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    max-width: min(20rem, calc(100vw - 1rem));
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--grey-300);
    border-radius: 0.5rem;
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow);
    font-size: var(--text-sm);
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* The pointer: a small square turned on its corner, aimed at the element. This is its place
   when the pop-up sits above the element, which only happens when there is no room below. */
.tooltip--callout::after {
    content: "";
    position: absolute;
    left: var(--tooltip-arrow, 50%);
    top: 100%;
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
    border-right: 1px solid var(--grey-300);
    border-bottom: 1px solid var(--grey-300);
    background: var(--white);
    transform: rotate(45deg);
}

/* The usual case: the pop-up sits below its element, so the pointer is on its top edge. */
.tooltip--below.tooltip--callout::after {
    top: 0;
    transform: rotate(225deg);
}

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

.site-footer {
    background: var(--ink);
    color: var(--white);
    padding: var(--space-12) 0 var(--space-8);
}

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

.site-footer__grid {
    display: grid;
    gap: var(--space-8);
}

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

/* In one column, on a phone, everything in the grid is centred. The line of copyright
   under it stays as it is. */
@media (max-width: 759.98px) {
    .site-footer__grid {
        text-align: center;
    }

    .site-footer__grid .contact-list li {
        justify-content: center;
    }
}

.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 var(--space-4);
    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: var(--text-xl);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.site-footer .contact-list {
    margin: var(--space-2) 0 0;
    font-size: var(--text-md);
}

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

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

.site-footer li {
    margin-bottom: var(--space-1-5);
}

/* 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: var(--space-4) var(--space-8);
    margin-top: var(--space-10);
    padding-top: var(--space-5);
    border-top: 1px solid rgb(255 255 255 / 0.2);
}

.site-footer__legal {
    flex: 1 1 20rem;
    margin: 0;
    font-size: var(--text-xs);
}

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

/* --------------------------------------------------------------------------
   Focused pages: the header is the logo alone and the footer is one slim row.
   A page asks for this with ViewData["Header"] = "focused" (Listen's survey pages do).
   -------------------------------------------------------------------------- */

.site-footer--slim {
    padding: 0 0 var(--space-5);
}

.site-footer--slim .site-footer__bottom {
    margin-top: 0;
    border-top: 0;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5) var(--space-6);
    font-size: var(--text-xs);
}

.site-footer__links li {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Signed-in strip: above the banner on every page, but only for someone signed
   in to Listen. The markup is Listen's (Pages/Shared/_SignedInStrip.cshtml).
   -------------------------------------------------------------------------- */

.staff-bar {
    background: var(--ink-deep);
    color: var(--white);
    font-size: var(--text-sm);
}

/* No room above or under the tabs: they run from the top of the strip to its bottom edge. */
.staff-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0 var(--space-6);
}

.staff-bar__who {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.staff-bar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-5);
}

.staff-bar a,
.staff-bar__sign-out {
    color: inherit;
    font: inherit;
    font-weight: 600;
}

.staff-bar__sign-out {
    padding: 0;
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.staff-bar :focus-visible {
    box-shadow: none;
}

/* The two halves of the site, as tabs: the one the page is in is white and runs into the
   white header under the strip; the other is the steel colour. */
.staff-bar__tabs {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff-bar__tabs a {
    display: block;
    padding: var(--space-2-5) var(--space-4);
    background: var(--steel);
    color: var(--ink-deep);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.staff-bar__tabs a:hover {
    background: var(--grey-300);
}

.staff-bar__tabs a[aria-current] {
    background: var(--white);
}

/* Who is signed in, which opens a small menu: changing a password, and signing out. */
.staff-bar__account {
    position: relative;
    align-self: center;
    padding: var(--space-1) 0;
}

.staff-bar__account > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    cursor: pointer;
}

.staff-bar__account > summary::-webkit-details-marker {
    display: none;
}

/* A small arrow that turns over when the menu is open */
.staff-bar__account > summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: var(--space-0-5);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
}

.staff-bar__account[open] > summary::after {
    transform: translateY(0.12rem) rotate(225deg);
}

.staff-bar__menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 40;
    min-width: 13rem;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    border: 1px solid var(--grey-300);
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.staff-bar__menu a,
.staff-bar__menu .staff-bar__sign-out {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius);
    text-align: left;
    text-decoration: none;
}

.staff-bar__menu a:hover,
.staff-bar__menu .staff-bar__sign-out:hover {
    background: var(--grey-100);
}

/* For the last half hour of a sign-in, a line under the strip says when it ends, with a way
   to sign in again and come back (plan 19, step 3.9). Yellow, with the strip's dark text; its
   focus ring is dark too, as the usual one does not show on yellow. */
.staff-bar__warning {
    background: var(--yellow);
    color: var(--ink-deep);
}

.staff-bar__warning p {
    margin: 0;
    padding: var(--space-2) 0;
}

.staff-bar__warning form {
    display: inline;
}

.staff-bar__warning :focus-visible {
    outline-color: var(--ink-deep);
}

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

@media print {
    /* Navigation and decoration are no use on paper. */
    .skip-link,
    .staff-bar,
    .draft-banner,
    .nav-toggle,
    .site-nav,
    .skyline-strip,
    .share,
    .share-float,
    .tooltip,
    .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: var(--space-6) 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: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .prose {
        max-width: none;
    }

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

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

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

    /* Paper does not scroll: a wide table's box shows all of it (plan 19, step 7.7). */
    .table-scroll {
        overflow: visible;
    }

    /* Nor does a carousel: it prints whole, its items one after another down the page, not a
       row running past the paper's edge, which on paper wide enough for three at a time (A4
       the long way) lost all but the first three (plan 19, step 9.17). */
    .carousel__track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* The dark panels lose their backgrounds too, so their white headings and words would
       vanish: on paper they are dark on white, with a line round them (plan 19, step 7.5). */
    .page-title--light,
    .involved-hero,
    .involved-hero *,
    .idea-box,
    .idea-box *,
    .plan-cover,
    .plan-cover *,
    .action-card--dark,
    .action-card--dark *,
    .panel:nth-child(even),
    .panel:nth-child(even) *,
    .priority-card:nth-child(even) .priority-card__body,
    .priority-card:nth-child(even) .priority-card__body *,
    .idea-point:nth-child(even),
    .idea-point:nth-child(even) * {
        background: none !important;
        color: var(--ink-deep) !important;
    }

    .involved-hero,
    .idea-box,
    .plan-cover,
    .action-card--dark,
    .panel:nth-child(even),
    .priority-card:nth-child(even) .priority-card__body,
    .idea-point:nth-child(even) {
        border: 1px solid var(--grey-300);
    }

    /* Small marks keep their colours: a drop of ink, and their white words stay readable. */
    .btn--dark,
    .number-badge,
    .priority-card__number,
    .priority-card__go,
    .whatif__kicker {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}