/* ==========================================================================
   Wales Updates Theme Styles
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
    --wu-red: #c8102e;
    --wu-red-dark: #a00d24;
    --wu-red-light: #fef2f2;
    --wu-red-on-dark: #ef3b4f; /* brand red lifted for legibility on the dark footer */
    --wu-red-on-dark-soft: #ff6b7f; /* lighter still, for small text on the dark footer */
    --wu-green: #00a651;

    --wu-bg: #ffffff;
    --wu-bg-alt: #f6f6f6;
    --wu-bg-card: #ffffff;
    --wu-text: #1a1a1a;
    --wu-text-secondary: #666666;
    --wu-text-tertiary: #999999;
    --wu-border: #e5e5e5;
    --wu-border-light: #f0f0f0;
    --wu-search-bg: #f0f0f0;
    --wu-nav-hover: #f5f5f5;

    --wu-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --wu-font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --wu-max-width: 1200px;
    --wu-content-width: 720px;
    --wu-radius: 6px;
    --wu-transition: 0.2s ease;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--wu-font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--wu-text);
    background: var(--wu-bg-alt);
}

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

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Utility ---------- */
.wu-container {
    max-width: var(--wu-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Read by screen readers, not shown */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wu-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--wu-red);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-size: 14px;
}

.wu-skip-link:focus {
    top: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.wu-header {
    position: relative;
    z-index: 90;
    background: var(--wu-bg);
    border-bottom: 1px solid var(--wu-border);
    transition: box-shadow var(--wu-transition);
}

/* Pinned while scrolling. On desktop navigation.js measures the today
   strip and masthead above the menu bar (--wu-pin) so only the menu bar
   stays on screen; on tablets just the strip scrolls away. Without JS the header just
   scrolls (phones pin it anyway, see the 768px rules) */
.wu-header.wu-header-sticky {
    position: sticky;
    top: calc(var(--wu-admin-bar) - var(--wu-pin, 0px));
}

.wu-header.is-stuck {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Height of the WordPress admin bar, so the header pins below it */
body {
    --wu-admin-bar: 0px;
}

body.admin-bar {
    --wu-admin-bar: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --wu-admin-bar: 46px;
    }
}

/* The admin bar scrolls away on small phones */
@media (max-width: 600px) {
    body.admin-bar {
        --wu-admin-bar: 0px;
    }
}

/* Links to a spot on the page land below the pinned header */
html {
    scroll-padding-top: 96px;
}

/* -- Today strip: the date and the day's line, with the weather (or
   anything hooked to wu_topbar_right) on the right -- */
.wu-topbar {
    background: var(--wu-bg-alt);
    border-bottom: 1px solid var(--wu-border-light);
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
}

.wu-topbar-left,
.wu-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wu-topbar-right:empty {
    display: none;
}

.wu-topbar-date {
    font-weight: 600;
    color: var(--wu-text);
    white-space: nowrap;
}

/* A dot between the date and the day's line */
.wu-topbar-sep {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--wu-text-tertiary);
}

.wu-social-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wu-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    color: var(--wu-text-secondary);
    transition: color var(--wu-transition), background var(--wu-transition);
}

.wu-social-links a:hover {
    color: var(--wu-red);
    background: var(--wu-bg);
}

/* -- Header: the masthead (logo, social links and newsletter) over the
   menu bar (menu and search) on desktop; one bar with the hamburger on
   phones and tablets -- */
.wu-header-main {
    position: relative;
}

.wu-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 76px;
}

.wu-logo {
    flex-shrink: 0;
}

.wu-logo a {
    display: flex;
}

.wu-logo .custom-logo {
    max-height: 48px;
    width: auto;
}

/* Logo lockup (header and footer): dragon | name over tagline */
.wu-lockup {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.wu-lockup-mark {
    display: block;
    flex-shrink: 0;
    color: var(--wu-red);
}

.wu-lockup-mark svg {
    display: block;
    width: auto;
    height: 50px;
}

.wu-lockup-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 14px;
    border-left: 1px solid var(--wu-border);
}

.wu-lockup-name {
    font-family: var(--wu-font-heading);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--wu-text);
    white-space: nowrap;
}

.wu-lockup-tagline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--wu-text-secondary);
    white-space: nowrap;
}

/* A smaller lockup in the header bar, where it shares the row with the menu */
.wu-logo .wu-lockup {
    gap: 12px;
}

.wu-logo .wu-lockup-mark svg {
    height: 40px;
}

.wu-logo .wu-lockup-text {
    gap: 4px;
    padding-left: 12px;
}

.wu-logo .wu-lockup-name {
    font-size: 24px;
}

.wu-logo .wu-lockup-tagline {
    font-size: 9.5px;
    letter-spacing: 0.09em;
}

.wu-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-left: auto;
}

.wu-search-box {
    position: relative;
    min-width: 0;
}

/* The results page has its own search box, so the header's would be a second one.
   Phones keep the search icon, which opens it over the page */
@media (min-width: 769px) {
    body.search .wu-search-box.wu-search-open {
        display: none;
    }
}

.wu-search-box form {
    display: flex;
    align-items: center;
    min-height: 40px;
    background: var(--wu-search-bg);
    border-radius: 24px;
    padding: 0 16px;
    gap: 8px;
    border: 1px solid transparent;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-search-box form:focus-within {
    border-color: var(--wu-red);
    background: var(--wu-bg);
}

.wu-search-box svg {
    color: var(--wu-text-tertiary);
    flex-shrink: 0;
}

.wu-search-box input {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--wu-text);
    flex: 1;
    min-width: 0;
    width: 130px;
    font-family: var(--wu-font);
    transition: width var(--wu-transition);
}

.wu-search-box input::placeholder {
    color: var(--wu-text-tertiary);
}

/* "Search in" picker at the start of the box: All, Crime & Court, What's On… */
.wu-search-scope {
    flex-shrink: 0;
    max-width: 130px;
    align-self: stretch;
    margin-left: -4px;
    padding: 0 22px 0 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: none;
    border-right: 1px solid var(--wu-border);
    border-radius: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--wu-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--wu-text);
    text-overflow: ellipsis;
    cursor: pointer;
}

.wu-search-scope:focus-visible {
    color: var(--wu-red);
}

/* -- Search panel (search.js): opens under the search box with the
   sections, recent searches and results as you type -- */
.wu-search-enhanced {
    position: relative;
}

.wu-search-enhanced .wu-search-scope {
    display: none;
}

/* The section picked, shown in the box */
.wu-search-token {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    height: 24px;
    padding: 0 3px 0 10px;
    border-radius: 999px;
    background: var(--wu-red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.wu-search-token[hidden] {
    display: none;
}

.wu-search-token button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
}

.wu-search-box .wu-search-token svg {
    color: #fff;
}

.wu-search-back {
    display: none;
}

.wu-search-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    width: min(540px, calc(100vw - 32px));
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    color: var(--wu-text);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}

.is-open > .wu-search-panel {
    display: block;
}

.wu-search-panel > * + *,
.wu-sp-body > * + * {
    border-top: 1px solid var(--wu-border-light);
}

.wu-search-panel.is-empty .wu-sp-body {
    display: none;
}

.wu-sp-block {
    padding: 14px 18px;
}

.wu-sp-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.wu-sp-heading {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

.wu-sp-clear {
    padding: 0;
    border: 0;
    background: none;
    font: 500 13px var(--wu-font);
    color: var(--wu-text-secondary);
    cursor: pointer;
}

.wu-sp-clear:hover {
    color: var(--wu-red);
}

.wu-sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wu-sp-chip {
    padding: 7px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    background: var(--wu-bg);
    font: 500 14px/1.2 var(--wu-font);
    color: var(--wu-text);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--wu-transition), color var(--wu-transition);
}

.wu-sp-chip:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-sp-chip[aria-pressed="true"] {
    background: var(--wu-red);
    border-color: var(--wu-red);
    color: #fff;
}

.wu-sp-chip-small {
    padding: 5px 12px;
    font-size: 13px;
}

.wu-sp-chip-small[aria-pressed="true"] {
    background: var(--wu-text);
    border-color: var(--wu-text);
}

/* What's On: area and date */
.wu-sp-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    background: var(--wu-bg-alt);
}

.wu-sp-filters[hidden] {
    display: none;
}

.wu-sp-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wu-sp-filter-label {
    width: 56px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wu-text-secondary);
}

.wu-sp-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--wu-text);
}

.wu-search-panel .wu-sp-recent-item svg {
    flex-shrink: 0;
    color: var(--wu-text-tertiary);
}

.wu-sp-recent-q {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wu-sp-recent-scope {
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-sp-recent-item:hover .wu-sp-recent-q {
    color: var(--wu-red);
}

.wu-sp-courts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

.wu-sp-courts a {
    padding: 8px 0;
    border-bottom: 1px solid var(--wu-border-light);
    font-size: 14px;
    font-weight: 500;
    color: var(--wu-text);
}

.wu-sp-courts a:hover,
.wu-sp-courts .wu-sp-courts-all {
    color: var(--wu-red);
}

.wu-sp-courts .wu-sp-courts-all {
    grid-column: 1 / -1;
    border-bottom: 0;
    font-weight: 600;
}

.wu-sp-message {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-sp-message:last-child {
    margin-bottom: 0;
}

.wu-sp-results {
    display: flex;
    flex-direction: column;
    margin: 0 -18px;
    transition: opacity var(--wu-transition);
}

.is-loading .wu-sp-results {
    opacity: 0.55;
}

.wu-sp-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 18px;
    color: var(--wu-text);
}

.wu-sp-item:hover,
.wu-sp-item.is-active {
    background: var(--wu-bg-alt);
}

.wu-sp-thumb {
    display: block;
    flex-shrink: 0;
    width: 72px;
    height: 48px;
    border-radius: 6px;
    background: var(--wu-border);
    object-fit: cover;
    /* Mugshots: keep the face, not the chin */
    object-position: 50% 25%;
}

/* Portraits and mugshots (search.js): the whole photo, with a darkened,
   softened copy of it filling the space either side */
.wu-sp-thumb.is-whole {
    position: relative;
    overflow: hidden;
    background: #111;
}

.wu-sp-thumb.is-whole::before {
    content: "";
    position: absolute;
    inset: -6px;
    background: var(--wu-thumb-bg) center / cover no-repeat;
    filter: blur(3px) brightness(0.45);
}

.wu-sp-thumb.is-whole img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wu-sp-item-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.wu-sp-item-kicker {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    font-size: 11px;
    white-space: nowrap;
}

/* A long court name gives way to the date */
.wu-sp-item-cat {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wu-red);
}

.wu-sp-item-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--wu-text-tertiary);
}

.wu-sp-item-cat + .wu-sp-item-date::before {
    content: "·";
    margin-right: 6px;
}

.wu-sp-item-title {
    font-weight: 600;
    line-height: 1.3;
}

.wu-sp-item:hover .wu-sp-item-title,
.wu-sp-item.is-active .wu-sp-item-title {
    color: var(--wu-red);
}

.wu-sp-item-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-results mark,
.wu-event-title mark {
    padding: 0 2px;
    border-radius: 3px;
    background: #fde4e8;
    color: inherit;
}

/* In the panel the search words are picked out in the snippet only: the
   headline already shows why it matched, and boxes break it up */
.wu-search-panel mark {
    background: none;
    color: var(--wu-text);
    font-weight: 600;
}

.wu-sp-item-title mark {
    font-weight: inherit;
    color: inherit;
}

.wu-sp-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    color: var(--wu-red);
    font-size: 14px;
    font-weight: 600;
    transition: background var(--wu-transition);
}

.wu-sp-all:hover,
.wu-sp-all.is-active {
    background: var(--wu-red-light);
    color: var(--wu-red-dark);
}

.wu-sp-all svg {
    flex-shrink: 0;
    transition: transform var(--wu-transition);
}

.wu-search-box .wu-sp-all svg {
    color: inherit;
}

.wu-sp-all:hover svg,
.wu-sp-all.is-active svg {
    transform: translateX(3px);
}

.wu-sp-keys {
    display: flex;
    gap: 18px;
    padding: 9px 18px;
    background: var(--wu-bg-alt);
    font-size: 12px;
    color: var(--wu-text-secondary);
}

.wu-search-panel > .wu-sp-keys {
    border-top: 0;
}

@media (hover: none) {
    .wu-sp-keys {
        display: none;
    }
}

/* "Newsletter": jumps to the signup in the footer */
.wu-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 24px;
    background: var(--wu-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--wu-transition);
}

.wu-header-cta:hover {
    background: var(--wu-red-dark);
}

.wu-search-toggle,
.wu-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--wu-text);
    cursor: pointer;
    transition: background var(--wu-transition), color var(--wu-transition);
}

@media (hover: hover) {
    .wu-search-toggle:hover,
    .wu-menu-toggle:hover {
        background: var(--wu-nav-hover);
    }
}

.wu-menu-toggle {
    display: none;
}

/* The results page has its own search box, so the header's search
   buttons go too (phones keep theirs, which open it over the page) */
@media (min-width: 769px) {
    body.search .wu-search-toggle {
        display: none;
    }
}

.wu-search-toggle[aria-expanded="true"] {
    color: var(--wu-red);
}

/* Hamburger turns into a cross while the menu is open */
.wu-menu-icon-close,
.wu-menu-toggle[aria-expanded="true"] .wu-menu-icon-open {
    display: none;
}

.wu-menu-toggle[aria-expanded="true"] .wu-menu-icon-close {
    display: block;
}

/* -- Menu bar --
   The menu on the left and the search box on the right. Once it's pinned
   and the masthead has gone it gains a small logo and a round newsletter
   button */
.wu-navbar {
    border-top: 1px solid var(--wu-border-light);
}

.wu-navbar-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 56px;
}

.wu-navbar-home,
.wu-navbar-newsletter {
    display: none;
}

.is-stuck .wu-navbar-home,
.is-stuck .wu-navbar-newsletter {
    display: flex;
}

.wu-navbar-home {
    flex-shrink: 0;
    color: var(--wu-red);
}

.wu-navbar-home svg {
    display: block;
    width: auto;
    height: 30px;
}

.wu-navbar-home img {
    width: auto;
    max-width: 140px;
    max-height: 30px;
}

/* Just the envelope, in the pinned bar */
.wu-header-cta--round {
    flex-shrink: 0;
    width: 40px;
    padding: 0;
    border-radius: 50%;
}

/* The social links beside the newsletter, desktop only (phones and
   tablets have them at the foot of the menu) */
.wu-masthead-social {
    display: none;
}

/* -- Menu --
   Built by inc/mega-menu.php. Top-level links and buttons sit in the menu
   bar; a section with sub-items opens a full-width panel under it: its
   links with icons and a line each, and its latest stories. navigation.js
   opens one panel at a time on click or when the mouse rests on it
   (Escape, a click elsewhere or the dimmed page closes it); without JS
   they open on hover or keyboard focus */
.wu-nav {
    display: flex;
    flex: 1;
    align-self: stretch;
    min-width: 0;
}

.wu-nav-list {
    display: flex;
    align-items: stretch;
    gap: 32px;
    list-style: none;
}

.wu-nav-item {
    display: flex;
    align-items: center;
    /* The section's colour (set on the item by inc/mega-menu.php), a pale
       tint of it for backgrounds and a version for text */
    --sec: var(--wu-red);
    --sec-soft: var(--wu-red-light);
    --sec-ink: var(--sec);
}

@supports (color: color-mix(in srgb, red 10%, white)) {
    .wu-nav-item {
        --sec-soft: color-mix(in srgb, var(--sec) 10%, var(--wu-bg));
    }
}

.wu-nav-link,
.wu-nav-trigger {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--wu-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--wu-text);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--wu-transition);
}

/* A bar along the bottom of the header under the open section, and the
   section being read, e.g. Crime & Court on a court story */
.wu-nav-link::after,
.wu-nav-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--sec);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.wu-nav-item.is-open > .wu-nav-trigger::after,
.wu-nav-item.current-menu-item > .wu-nav-link::after,
.wu-nav-item.current_page_item > .wu-nav-link::after,
.wu-nav-item.current-menu-ancestor > .wu-nav-trigger::after,
.wu-nav-item.current-menu-parent > .wu-nav-trigger::after,
.wu-nav-item.current-post-ancestor > :is(.wu-nav-link, .wu-nav-trigger)::after,
.wu-nav-item.current-category-ancestor > :is(.wu-nav-link, .wu-nav-trigger)::after,
.wu-nav-item.current-menu-item > .wu-nav-trigger::after {
    transform: scaleX(1);
}

.wu-nav-item.current-menu-item > :is(.wu-nav-link, .wu-nav-trigger),
.wu-nav-item.current_page_item > .wu-nav-link,
.wu-nav-item.current-menu-ancestor > .wu-nav-trigger,
.wu-nav-item.current-menu-parent > .wu-nav-trigger,
.wu-nav-item.current-post-ancestor > :is(.wu-nav-link, .wu-nav-trigger),
.wu-nav-item.current-category-ancestor > :is(.wu-nav-link, .wu-nav-trigger),
.wu-nav-item.is-open > .wu-nav-trigger {
    color: var(--sec-ink);
}

/* Only where there's a pointer, so a tap on a phone doesn't leave it coloured */
@media (hover: hover) {
    .wu-nav-link:hover,
    .wu-nav-trigger:hover {
        color: var(--sec-ink);
    }
}

/* In the section's colour, so each section is recognisable before it opens */
.wu-nav-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--sec);
    opacity: 0.85;
    transition: transform var(--wu-transition);
}

.wu-nav-item.is-open .wu-nav-chevron {
    transform: rotate(180deg);
}

/* The panel: a card floating under the menu bar, topped with the section's
   colour. The ::before bridges the gap above it for the mouse */
.wu-mega {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 5;
    width: min(1160px, calc(100vw - 40px));
    transform: translateX(-50%);
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-top: 4px solid var(--sec);
    border-radius: 20px;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.45);
    color: var(--wu-text);
    cursor: auto;
}

.wu-mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 16px;
}

.wu-nav-item.is-open > .wu-mega {
    display: block;
    animation: wu-mega-in 0.18s ease;
}

/* Without JS: on hover or keyboard focus */
.wu-nav:not(.wu-nav-js) .wu-nav-item:hover > .wu-mega,
.wu-nav:not(.wu-nav-js) .wu-nav-item:focus-within > .wu-mega {
    display: block;
}

@keyframes wu-mega-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wu-nav-item.is-open > .wu-mega {
        animation: none;
    }
}

/* Scrolls on its own if it's taller than the space under the bar */
.wu-mega-inner {
    max-height: calc(100vh - var(--wu-mega-top, 120px) - 24px);
    max-height: calc(100dvh - var(--wu-mega-top, 120px) - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 15px 15px 19px 19px;
}

/* The lead (story or highlight) on the left, the rest on the right */
.wu-mega-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.wu-mega-card.has-lead {
    grid-template-columns: 380px minmax(0, 1fr);
}

.wu-mega-main {
    min-width: 0;
    padding: 24px 30px 26px;
}

/* -- The lead: the newest story's picture with its headline over it -- */
.wu-mega-lead {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 24px;
    overflow: hidden;
    background: #1a1a1a;
    color: #fff;
}

.wu-mega-lead-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%; /* keeps faces in mugshots */
    transition: transform 0.5s ease;
}

.wu-mega-lead::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
}

@media (prefers-reduced-motion: no-preference) {
    .wu-mega-lead:hover .wu-mega-lead-img {
        transform: scale(1.04);
    }
}

.wu-mega-lead-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.wu-mega-lead-label {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sec);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
}

.wu-mega-lead-title {
    font-family: var(--wu-font-heading);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.wu-mega-lead:hover .wu-mega-lead-title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.wu-mega-lead-date {
    font-size: 12.5px;
    opacity: 0.8;
}

/* A highlight card, for a section with no stories: the section's colour
   (About us: green, for the trees) with an icon, a line and a button */
.wu-mega-highlight {
    justify-content: space-between;
    background: linear-gradient(160deg, var(--sec) 0%, color-mix(in srgb, var(--sec) 70%, #f59e0b) 100%);
}

.wu-mega-highlight--green {
    background: linear-gradient(160deg, #166534 0%, #15803d 55%, #4d7c0f 100%);
}

.wu-mega-highlight::before {
    display: none;
}

.wu-mega-highlight .wu-mega-lead-label {
    background: rgba(255, 255, 255, 0.2);
}

.wu-mega-highlight-icon {
    font-size: 40px;
    opacity: 0.9;
}

.wu-mega-highlight-number {
    font-family: var(--wu-font-heading);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.wu-mega-highlight .wu-mega-lead-title {
    font-size: 20px;
}

.wu-mega-highlight:hover .wu-mega-lead-title {
    text-decoration: none;
}

.wu-mega-highlight-cta {
    margin-top: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--sec);
    transition: transform var(--wu-transition);
}

.wu-mega-highlight--green .wu-mega-highlight-cta {
    color: #166534;
}

.wu-mega-highlight:hover .wu-mega-highlight-cta {
    transform: translateX(3px);
}

/* -- The section's name and line, with See all -- */
.wu-mega-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.wu-mega-head-name {
    margin: 0;
    font-family: var(--wu-font-heading);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--sec-ink);
}

.wu-mega-head-desc {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--wu-text-secondary);
}

.wu-mega-head-all {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sec-ink);
    white-space: nowrap;
}

.wu-mega-head-all svg {
    transition: transform var(--wu-transition);
}

.wu-mega-head-all:hover svg {
    transform: translateX(3px);
}

.wu-mega-heading {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

/* -- Links: names with an icon in the section's colour, two columns -- */
.wu-mega-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    margin: 0 -10px;
    list-style: none;
}

/* The same link as See all, for phones */
.wu-mega-item--all {
    display: none;
}

/* Grouped links, e.g. News: "By area" and "By topic", a column each */
.wu-mega-group {
    padding: 0 10px;
}

.wu-mega-group-heading {
    margin-top: 6px;
    color: var(--sec-ink);
}

.wu-mega-sublist {
    display: grid;
    margin: 0 -10px;
    list-style: none;
}

.wu-mega-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--wu-text);
    transition: background var(--wu-transition);
}

.wu-mega-link::after {
    content: '\2192';
    margin-left: auto;
    color: var(--sec-ink);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--wu-transition), transform var(--wu-transition);
}

.wu-mega-link:hover,
.wu-mega-link:focus-visible {
    background: var(--sec-soft);
}

.wu-mega-link:hover::after,
.wu-mega-link:focus-visible::after {
    opacity: 1;
    transform: none;
}

.wu-mega-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--sec-soft);
    font-size: 15px;
    color: var(--sec-ink);
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-mega-link:hover .wu-mega-icon,
.wu-mega-link:focus-visible .wu-mega-icon,
.wu-mega-link[aria-current="page"] .wu-mega-icon {
    background: var(--sec);
    color: var(--wu-bg);
}

.wu-mega-text {
    min-width: 0;
}

.wu-mega-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.wu-mega-link[aria-current="page"] .wu-mega-title {
    color: var(--sec-ink);
}

/* The lines about each link are for phones and screen readers' sake kept
   short; on desktop the names say enough */
.wu-mega-desc {
    display: none;
}

/* -- More stories: headlines under the links -- */
.wu-mega-more {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--wu-border-light);
}

.wu-mega-more-list {
    list-style: none;
}

.wu-mega-more-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 0;
    color: var(--wu-text);
}

.wu-mega-more-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    transition: color var(--wu-transition);
}

.wu-mega-more-list a:hover .wu-mega-more-title {
    color: var(--sec-ink);
}

.wu-mega-more-list time {
    font-size: 12px;
    color: var(--wu-text-tertiary);
}

/* -- Newsletter strip along the bottom of the card -- */
.wu-mega-foot {
    border-top: 1px solid var(--wu-border-light);
}

.wu-mega-foot-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 30px;
}

.wu-mega-foot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sec-soft);
    color: var(--sec-ink);
    font-size: 15px;
}

.wu-mega-foot-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-mega-foot-text strong {
    margin-right: 6px;
    color: var(--wu-text);
}

.wu-mega-foot-cta {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--sec);
    color: var(--wu-bg);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: filter var(--wu-transition);
}

.wu-mega-foot-cta:hover {
    filter: brightness(0.9);
}

/* Dims the page under an open panel (navigation.js) */
.wu-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 89; /* just under the header */
    background: rgba(17, 17, 17, 0.45);
    animation: wu-backdrop-in 0.18s ease;
}

.wu-nav-backdrop[hidden] {
    display: none;
}

@keyframes wu-backdrop-in {
    from {
        opacity: 0;
    }
}

/* Newsletter and social links at the foot of the phone and tablet menu */
.wu-nav-extra {
    display: none;
}

/* Desktop: the logo (larger) on the left; the social links, a divider and
   the newsletter on the right; the search box always in view in the menu
   bar, so the search button goes */
@media (min-width: 1200px) {
    .wu-header-inner {
        min-height: 0;
        padding: 18px 0 16px;
    }

    .wu-header-actions > .wu-search-toggle {
        display: none;
    }

    .wu-masthead-social {
        display: flex;
        gap: 2px;
        margin-right: 6px;
        padding-right: 16px;
        border-right: 1px solid var(--wu-border);
    }

    .wu-masthead-social a {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .wu-masthead-social a:hover {
        background: var(--wu-nav-hover);
    }

    .wu-navbar .wu-search-box {
        display: block;
        flex: 0 1 300px;
    }

    .wu-navbar .wu-search-box input {
        width: auto;
    }

    /* The results page has its own search box */
    body.search .wu-navbar .wu-search-box {
        display: none;
    }

    .wu-logo .wu-lockup {
        gap: 16px;
    }

    .wu-logo .wu-lockup-mark svg {
        height: 56px;
    }

    .wu-logo .wu-lockup-text {
        gap: 6px;
        padding-left: 16px;
    }

    .wu-logo .wu-lockup-name {
        font-size: 36px;
    }

    .wu-logo .wu-lockup-tagline {
        font-size: 11px;
        letter-spacing: 0.12em;
    }

    .wu-logo .custom-logo {
        max-height: 64px;
    }
}

/* Tablets: search opens as a bar under the header from the search button,
   with the box in the middle and its panel (search.js) under it.
   Phones: see the 768px rules */
@media (min-width: 769px) and (max-width: 1199px) {
    .wu-search-box {
        display: none;
    }

    .wu-search-box.wu-search-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        padding: 18px 20px 22px;
        background: var(--wu-bg);
        border-top: 1px solid var(--wu-border);
        box-shadow: 0 24px 32px -24px rgba(0, 0, 0, 0.3);
        animation: wu-mega-in 0.18s ease;
    }

    .wu-search-box.wu-search-open form {
        max-width: 720px;
        min-height: 50px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .wu-search-box.wu-search-open input {
        font-size: 16px;
    }

    .wu-search-box.wu-search-open .wu-search-panel {
        left: 0;
        right: 0;
        width: auto;
        max-height: calc(100vh - var(--wu-mega-top, 120px) - 120px);
    }
}

@media (min-width: 769px) and (max-width: 1199px) and (prefers-reduced-motion: reduce) {
    .wu-search-box.wu-search-open {
        animation: none;
    }
}

/* Phones, tablets and small laptops: the menu is a full-screen panel under
   the header bar, opened by the hamburger, with each section's links folded
   behind it */
@media (max-width: 1199px) {
    /* The menu bar is only the menu's anchor here; the menu itself drops
       down from the bottom of the header */
    .wu-navbar {
        border-top: 0;
    }

    .wu-navbar-inner {
        display: block;
        height: 0;
    }

    .wu-navbar-home,
    .wu-navbar-newsletter {
        display: none !important;
    }

    .wu-menu-toggle {
        display: flex;
    }

    .wu-header-inner {
        gap: 16px;
    }

    html.wu-menu-locked {
        overflow: hidden;
    }

    .wu-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 5;
        height: calc(100vh - var(--wu-nav-top, 70px));
        height: calc(100dvh - var(--wu-nav-top, 70px));
        padding: 8px max(20px, calc((100% - 680px) / 2)) 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--wu-bg);
        border-top: 1px solid var(--wu-border);
    }

    .wu-nav.wu-nav-open {
        display: flex;
    }

    .wu-nav-list {
        flex-direction: column;
        gap: 0;
    }

    .wu-nav-item {
        display: block;
        border-bottom: 1px solid var(--wu-border-light);
    }

    .wu-nav-link,
    .wu-nav-trigger {
        justify-content: space-between;
        width: 100%;
        height: auto;
        padding: 18px 0;
        font-size: 17px;
    }

    .wu-nav-link::after,
    .wu-nav-trigger::after {
        display: none;
    }

    .wu-nav-chevron {
        width: 22px;
        height: 22px;
    }

    .wu-mega,
    .wu-nav:not(.wu-nav-js) .wu-nav-item:hover > .wu-mega {
        display: none;
        position: static;
        width: auto;
        transform: none;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .wu-mega::before {
        display: none;
    }

    /* Without JS every section's links stay open */
    .wu-nav-item.is-open > .wu-mega,
    .wu-nav:not(.wu-nav-js) .wu-mega {
        display: block;
        animation: none;
    }

    .wu-mega-inner {
        max-height: none;
        overflow: visible;
        border-radius: 0;
    }

    .wu-mega-card,
    .wu-mega-card.has-lead {
        display: block;
    }

    .wu-mega-main {
        padding: 0 0 12px;
    }

    /* The section's name is on the button just above, and the newsletter
       button is at the foot of the menu */
    .wu-mega-lead,
    .wu-mega-head,
    .wu-mega-heading,
    .wu-mega-desc,
    .wu-mega-more,
    .wu-mega-foot {
        display: none;
    }

    .wu-mega-item--all {
        display: block;
    }

    .wu-mega-list {
        grid-template-columns: 1fr;
        gap: 2px;
        margin: 0;
    }

    .wu-mega-group,
    .wu-mega-sublist {
        padding: 0;
        margin: 0;
    }

    .wu-mega-link::after {
        display: none;
    }

    /* Group headings stay, as small labels between the links */
    .wu-mega-group-heading {
        display: block;
        margin: 12px 0 4px;
    }

    .wu-mega-link {
        align-items: center;
        padding: 8px 12px;
    }

    .wu-mega-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .wu-mega-title {
        font-size: 16px;
        font-weight: 500;
    }

    .wu-nav-backdrop {
        display: none;
    }

    .wu-nav-extra {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: auto;
        padding: 28px 0 32px;
    }

    .wu-nav-extra .wu-header-cta {
        min-height: 48px;
        border-radius: 10px;
        font-size: 15px;
    }

    .wu-nav-extra .wu-social-links {
        justify-content: center;
        gap: 8px;
    }

    .wu-nav-extra .wu-social-links a {
        width: 40px;
        height: 40px;
        font-size: 16px;
        background: var(--wu-bg-alt);
    }
}

/* -- Trending bar -- */
.wu-trending {
    background: var(--wu-bg);
    border-bottom: 1px solid var(--wu-border);
}

.wu-trending-inner {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 14px;
}

.wu-trending-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--wu-red);
    padding: 3px 10px;
    border-radius: 3px;
    white-space: nowrap;
}

.wu-trending-items {
    display: flex;
    gap: 20px;
    overflow: hidden;
    font-size: 13px;
}

.wu-trending-items a {
    color: var(--wu-text-secondary);
    white-space: nowrap;
    transition: color var(--wu-transition);
}

.wu-trending-items a:hover {
    color: var(--wu-red);
}

.wu-trending-items a + a::before {
    content: '|';
    margin-right: 20px;
    color: var(--wu-border);
}

/* ==========================================================================
   Main Content
   ========================================================================== */

.wu-main {
    padding: 32px 0 48px;
}

/* ---------- Sections ---------- */
.wu-section {
    margin-top: 40px;
}

.wu-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wu-section-title {
    font-family: var(--wu-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--wu-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wu-red);
    display: inline-block;
}

.wu-section-header .wu-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wu-section-link {
    font-size: 14px;
    color: var(--wu-red);
    font-weight: 500;
    transition: opacity var(--wu-transition);
}

.wu-section-link:hover {
    opacity: 0.8;
}

/* ---------- Hero ---------- */
.wu-hero {
    margin-bottom: 8px;
}

.wu-hero-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--wu-bg-card);
    border-radius: var(--wu-radius);
    overflow: hidden;
    border: 1px solid var(--wu-border-light);
    transition: box-shadow var(--wu-transition);
}

.wu-hero-link:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.wu-hero-thumb {
    overflow: hidden;
}

.wu-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Portraits and mugshots (content-hero.php): the whole photo, never
   cropped, with a darkened, softened copy of it filling the space either
   side, as on the story page (.wu-article-featured-frame) */
.wu-hero-thumb--tall {
    position: relative;
    background: #111;
}

.wu-hero-thumb--tall::before {
    content: "";
    position: absolute;
    inset: -4%;
    background: var(--wu-thumb-bg) center / cover no-repeat;
    filter: blur(6px) brightness(0.45);
}

.wu-hero-thumb--tall img {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    object-fit: contain;
}

.wu-hero-link:hover .wu-hero-thumb img {
    transform: scale(1.03);
}

.wu-hero-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wu-hero-cat {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wu-red);
    margin-bottom: 12px;
}

.wu-hero-title {
    font-family: var(--wu-font-heading);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--wu-text);
    margin-bottom: 12px;
}

.wu-hero-excerpt {
    font-size: 16px;
    color: var(--wu-text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.wu-hero-meta {
    font-size: 13px;
    color: var(--wu-text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wu-hero-meta-sep {
    color: var(--wu-border);
}

/* ---------- Post Grid ---------- */
.wu-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.wu-post-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ---------- Card ---------- */
.wu-card {
    background: var(--wu-bg-card);
    border-radius: var(--wu-radius);
    overflow: hidden;
    border: 1px solid var(--wu-border-light);
    transition: box-shadow var(--wu-transition);
}

.wu-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.wu-card-link {
    display: block;
}

.wu-card-thumb {
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.wu-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Portraits and mugshots (content-card.php): the whole photo, never
   cropped, with a darkened, softened copy of it filling the space either
   side, as on the story page (.wu-article-featured-frame) */
.wu-card-thumb--tall {
    position: relative;
    background: #111;
}

.wu-card-thumb--tall::before {
    content: "";
    position: absolute;
    inset: -4%;
    background: var(--wu-thumb-bg) center / cover no-repeat;
    filter: blur(5px) brightness(0.45);
}

.wu-card-thumb--tall img {
    position: relative;
    display: block;
    object-fit: contain;
}

.wu-card:hover .wu-card-thumb img {
    transform: scale(1.03);
}

.wu-card-body {
    padding: 16px 20px 20px;
}

.wu-card-cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wu-red);
    margin-bottom: 8px;
    display: block;
}

.wu-card-title {
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wu-text);
    margin-bottom: 8px;
}

.wu-card-excerpt {
    font-size: 15px;
    color: var(--wu-text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.wu-card-meta {
    font-size: 12px;
    color: var(--wu-text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wu-card-meta-sep {
    color: var(--wu-border);
}

/* ==========================================================================
   Single Article
   ========================================================================== */

/* The story on a white sheet; on wide screens the sidebar
   (template-parts/article-sidebar.php) sits beside it and "More from" runs
   across both. On narrower screens the sidebar follows the story. At every
   width the story takes up the full width left to it, so the sheet, the
   sidebar and "More from" line up with the header and footer. */
.wu-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 48px;
}

.wu-single-layout > .wu-related {
    margin-top: 24px;
}

@media (min-width: 1000px) {
    .wu-single-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .wu-single-layout > .wu-related {
        grid-column: 1 / -1;
    }
}

.wu-article {
    min-width: 0;
    padding: 36px 40px 32px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border-light);
    border-radius: 12px;
}

.wu-article-header {
    margin-bottom: 24px;
}

.wu-article-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wu-red);
    margin-bottom: 12px;
    transition: opacity var(--wu-transition);
}

.wu-article-cat:hover {
    opacity: 0.8;
}

.wu-article-title {
    font-family: var(--wu-font-heading);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--wu-text);
    margin-bottom: 16px;
}

.wu-article-meta {
    font-size: 14px;
    color: var(--wu-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.wu-article-meta-sep {
    color: var(--wu-border);
}

/* The written summary under the headline */
.wu-article-standfirst {
    margin: -4px 0 18px;
    font-size: 20px;
    line-height: 1.5;
    color: #444;
}

/* Byline: authors' initials, names, date and time, then the share buttons */
.wu-article-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 14px 0;
    border-top: 1px solid var(--wu-border-light);
    border-bottom: 1px solid var(--wu-border-light);
}

.wu-article-byline-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wu-article-byline .wu-article-meta {
    display: block;
    font-size: 13px;
    line-height: 1.45;
}

.wu-article-byline .wu-article-author {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--wu-text);
}

.wu-article-avatars {
    display: flex;
    flex: none;
}

.wu-article-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--wu-bg);
    border-radius: 50%;
    background: #e6ddd3;
    font: 700 14px/1 var(--wu-font-heading);
    color: #5b4636;
}

.wu-article-avatar + .wu-article-avatar {
    margin-left: -12px;
}

.wu-share {
    display: flex;
    gap: 6px;
}

.wu-share-link {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--wu-border);
    border-radius: 50%;
    background: var(--wu-bg);
    color: var(--wu-text);
    cursor: pointer;
    transition: border-color var(--wu-transition), color var(--wu-transition), background-color var(--wu-transition);
}

.wu-share-link[hidden] {
    display: none;
}

.wu-share-link:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-share-link:focus-visible {
    outline: 2px solid var(--wu-red);
    outline-offset: 2px;
}

.wu-share-copy.is-copied {
    border-color: var(--wu-green);
    background: var(--wu-green);
    color: #fff;
}

/* A match report's score (inc/match-score.php): a scoreboard under the
   headline here, one line in search results. The winner is in bold. */
.wu-score {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-start;
    gap: 4px 10px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--wu-search-bg);
    font-size: 14px;
    line-height: 1.3;
}

.wu-score-status {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

.wu-score--postponed .wu-score-status,
.wu-score--abandoned .wu-score-status {
    color: var(--wu-red);
}

.wu-score-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}

.wu-score-team {
    font-weight: 500;
    color: var(--wu-text);
}

.wu-score-team.is-winner {
    font-weight: 700;
}

.wu-score-nums {
    font-family: var(--wu-font-heading);
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--wu-text);
}

.wu-score-nums--none {
    font-family: var(--wu-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--wu-text-secondary);
}

.wu-score-note {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--wu-text-secondary);
}

.wu-score--big {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 24px;
    padding: 18px 20px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 12px;
    text-align: center;
}

.wu-score--big .wu-score-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
}

.wu-score--big .wu-score-team {
    font-family: var(--wu-font-heading);
    font-size: 20px;
    line-height: 1.2;
    text-align: right;
}

.wu-score--big .wu-score-team:last-child {
    text-align: left;
}

.wu-score--big .wu-score-nums {
    padding: 4px 16px;
    border-radius: 10px;
    background: var(--wu-text);
    font-size: 36px;
    line-height: 1.15;
    color: #fff;
}

.wu-score--big .wu-score-nums span {
    margin: 0 6px;
}

.wu-score--big .wu-score-nums--none {
    background: none;
    font-size: 18px;
    color: var(--wu-text-secondary);
}

.wu-score--big .wu-score-note {
    font-size: 14px;
}

@media (max-width: 600px) {
    .wu-score--big {
        padding: 14px 12px;
    }

    .wu-score--big .wu-score-line {
        gap: 10px;
    }

    .wu-score--big .wu-score-team {
        font-size: 16px;
    }

    .wu-score--big .wu-score-nums {
        padding: 3px 10px;
        font-size: 28px;
    }
}

.wu-article-featured {
    margin-bottom: 32px;
    border-radius: var(--wu-radius);
    overflow: hidden;
}

.wu-article-featured img {
    width: 100%;
}

/* Portraits and mugshots (content-single.php): the whole photo, never
   cropped, in an 8:5 box, with a darkened, softened copy of it filling
   the space either side */
.wu-article-featured-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 8 / 5;
    background: #111;
}

.wu-article-featured-frame::before {
    content: "";
    position: absolute;
    inset: -4%;
    background: var(--wu-thumb-bg) center / cover no-repeat;
    filter: blur(6px) brightness(0.45);
}

.wu-article-featured-frame img {
    position: relative;
    display: block;
    height: 100%;
    object-fit: contain;
}

/* The caption under the picture: what it shows beside a red bar, then
   who took it in small capitals (wu_split_caption(), inc/featured-caption.php) */
.wu-article-featured figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-top: 12px;
    padding: 1px 0 1px 12px;
    border-left: 3px solid var(--wu-red);
    font-size: 15px;
    line-height: 1.45;
    color: var(--wu-text);
}

.wu-article-caption-credit {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

/* Article body */
.wu-article-content {
    font-size: 18px;
    line-height: 1.85;
    color: var(--wu-text);
}

.wu-article-content p {
    margin-bottom: 1.5em;
}

.wu-article-content h2 {
    font-family: var(--wu-font-heading);
    font-size: 26px;
    font-weight: 700;
    margin: 2em 0 0.75em;
}

.wu-article-content h3 {
    font-family: var(--wu-font-heading);
    font-size: 22px;
    font-weight: 700;
    margin: 1.5em 0 0.5em;
}

.wu-article-content blockquote {
    border-left: 3px solid var(--wu-red);
    margin: 1.5em 0;
    padding: 12px 24px;
    font-style: italic;
    color: var(--wu-text-secondary);
    background: var(--wu-bg-alt);
    border-radius: 0 var(--wu-radius) var(--wu-radius) 0;
}

.wu-article-content a {
    color: var(--wu-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-article-content a:hover {
    text-decoration: none;
}

.wu-article-content ul,
.wu-article-content ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.wu-article-content li {
    margin-bottom: 0.5em;
}

.wu-article-content img {
    border-radius: var(--wu-radius);
    margin: 1.5em 0;
}

.wu-article-content .wp-caption {
    max-width: 100%;
}

.wu-article-content .wp-caption-text {
    font-size: 13px;
    color: var(--wu-text-tertiary);
    font-style: italic;
    margin-top: 6px;
}

/* Galleries (inc/galleries.php): the first photo leads, up to four more in
   a row under it, the last saying "+3" when there are more. Without JS
   every photo shows; gallery.js tucks the rest away once the viewer can
   show them */
.wu-gallery {
    --wu-gallery-cols: 4;
    margin: 2em 0;
}

.wu-gallery--cols-1 { --wu-gallery-cols: 1; }
.wu-gallery--cols-2 { --wu-gallery-cols: 2; }
.wu-gallery--cols-3 { --wu-gallery-cols: 3; }

.wu-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--wu-gallery-cols), minmax(0, 1fr));
    gap: 4px;
    border-radius: var(--wu-radius);
    overflow: hidden;
}

.wu-article-content .wu-gallery-item {
    display: block;
    min-width: 0;
    color: var(--wu-text);
    text-decoration: none;
}

/* Holds the photo cropped to its tile */
.wu-gallery-frame {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--wu-bg-alt);
    color: #ffffff;
}

.wu-gallery--cols-2 .wu-gallery-frame {
    aspect-ratio: 4 / 3;
}

/* Upright photos, like custody photos, are shown whole */
.wu-gallery--tall .wu-gallery-frame {
    aspect-ratio: 3 / 4;
}

.wu-article-content .wu-gallery-item--lead {
    grid-column: 1 / -1;
}

.wu-gallery .wu-gallery-item--lead .wu-gallery-frame {
    aspect-ratio: 3 / 2;
    background: #1a1a1a;
}

.wu-article-content .wu-gallery-img {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* A tall lead photo is shown whole, over a blurred copy of itself */
.wu-article-content .wu-gallery-item.is-portrait .wu-gallery-img {
    object-fit: contain;
}

.wu-gallery-blur {
    position: absolute;
    inset: -24px;
    background-position: center;
    background-size: cover;
    filter: blur(24px) brightness(0.6);
}

.wu-gallery-item:hover .wu-gallery-img {
    transform: scale(1.03);
}

.wu-gallery-item.is-portrait:hover .wu-gallery-img {
    transform: none;
}

.wu-gallery-item:focus-visible {
    outline: 3px solid var(--wu-red);
    outline-offset: -3px;
}

/* Each photo's caption under it: the photos part a little, each with
   rounded corners of its own */
.wu-gallery--labels .wu-gallery-grid {
    gap: 16px 12px;
    border-radius: 0;
    overflow: visible;
}

.wu-gallery--labels .wu-gallery-frame {
    border-radius: var(--wu-radius);
}

.wu-gallery--labels .wu-gallery-item:focus-visible {
    outline-offset: 3px;
    border-radius: var(--wu-radius);
}

.wu-gallery-label {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.wu-gallery-item:hover .wu-gallery-label {
    color: var(--wu-red);
}

.wu-gallery.is-ready .wu-gallery-item.is-extra {
    display: none;
}

.wu-gallery-more {
    display: none;
}

.wu-gallery.is-ready .wu-gallery-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    font-family: var(--wu-font-heading);
    font-size: 28px;
    font-weight: 700;
}

.wu-gallery-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

.wu-gallery-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--wu-text);
}

.wu-gallery-credit {
    font-style: italic;
    color: var(--wu-text-tertiary);
}

.wu-gallery-open {
    margin-left: auto;
    padding: 6px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    background: var(--wu-bg);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--wu-text);
    cursor: pointer;
    transition: border-color var(--wu-transition), color var(--wu-transition);
}

.wu-gallery-open:hover,
.wu-gallery-open:focus-visible {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-gallery-open[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .wu-gallery-grid {
        gap: 3px;
    }

    .wu-gallery--labels .wu-gallery-grid {
        gap: 14px 10px;
    }

    /* 4 upright photos go 2 by 2 */
    .wu-gallery--tall.wu-gallery--cols-4:not(.wu-gallery--lead) {
        --wu-gallery-cols: 2;
    }

    .wu-gallery-label {
        font-size: 14px;
    }

    .wu-gallery.is-ready .wu-gallery-more {
        font-size: 20px;
    }
}

/* The viewer (gallery.js): every photo full screen, one at a time */
html.wu-gv-open {
    overflow: hidden;
}

.wu-gv {
    display: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #0d0d0d;
    color: #ffffff;
}

.wu-gv[open] {
    display: flex;
    flex-direction: column;
}

.wu-gv::backdrop {
    background: #0d0d0d;
}

.wu-gv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 0 20px;
}

.wu-gv-count {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #c9c9c9;
}

.wu-gv-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #ffffff;
    cursor: pointer;
}

.wu-gv-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.wu-gv-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 8px 72px;
}

.wu-gv-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-drag: none;
}

.wu-gv-prev,
.wu-gv-next {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    transition: background var(--wu-transition), opacity var(--wu-transition);
}

.wu-gv-prev {
    left: 12px;
}

.wu-gv-next {
    right: 12px;
}

.wu-gv-prev:hover,
.wu-gv-next:hover {
    background: rgba(255, 255, 255, 0.24);
}

.wu-gv-prev:disabled,
.wu-gv-next:disabled {
    opacity: 0;
    pointer-events: none;
}

.wu-gv-close:focus-visible,
.wu-gv-prev:focus-visible,
.wu-gv-next:focus-visible,
.wu-gv-thumb:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.wu-gv-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 20px 20px;
}

.wu-gv-caption {
    max-width: var(--wu-content-width);
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: #e6e6e6;
}

.wu-gv-thumbs {
    display: flex;
    gap: 6px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.wu-gv-thumbs::-webkit-scrollbar {
    display: none;
}

.wu-gv-thumbs[hidden] {
    display: none;
}

/* Centred while they fit, scrolling from the first when they don't */
.wu-gv-thumb:first-child {
    margin-left: auto;
}

.wu-gv-thumb:last-child {
    margin-right: auto;
}

.wu-gv-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #2b2f36;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity var(--wu-transition);
}

.wu-gv-thumb:hover,
.wu-gv-thumb[aria-current] {
    opacity: 1;
}

.wu-gv-thumb[aria-current] {
    box-shadow: 0 0 0 2px #ffffff;
}

.wu-gv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Phones: the photo edge to edge, smaller arrows over it, no row of photos */
@media (max-width: 600px) {
    .wu-gv-stage {
        padding: 8px 0;
    }

    .wu-gv-prev,
    .wu-gv-next {
        width: 40px;
        height: 40px;
        margin-top: -20px;
        background: rgba(0, 0, 0, 0.45);
    }

    .wu-gv-prev {
        left: 8px;
    }

    .wu-gv-next {
        right: 8px;
    }

    .wu-gv-thumbs {
        display: none;
    }
}

/* "Read more" part way down the story (inc/article-sidebar.php) */
.wu-article-content .wu-read-more {
    display: block;
    margin: 0 0 1.6em;
    padding: 12px 0;
    border-top: 1px solid var(--wu-border);
    border-bottom: 1px solid var(--wu-border);
    font-size: 15px;
    line-height: 1.4;
}

.wu-read-more-label {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wu-red);
}

.wu-article-content .wu-read-more a {
    font-weight: 600;
    color: var(--wu-text);
    text-decoration: none;
}

.wu-article-content .wu-read-more a:hover {
    color: var(--wu-red);
}

/* "Do you know more about this story?" at the end of the story
   (inc/article-sidebar.php). Dark like the footer and the contact page's "Got a story?" box, in
   every look. */
.wu-story-tip {
    display: flex;
    gap: 16px;
    margin-top: 36px;
    padding: 22px 24px;
    border-bottom: 4px solid var(--wu-red);
    border-radius: 12px;
    background: #1e1e1e;
    color: #fff;
}

.wu-story-tip-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 18px;
    color: var(--wu-red-on-dark);
}

.wu-story-tip-body {
    min-width: 0;
}

.wu-story-tip-title {
    margin-bottom: 6px;
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.wu-story-tip p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #c4c4c4;
}

.wu-story-tip-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 16px;
}

.wu-story-tip-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--wu-red);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    transition: background-color var(--wu-transition);
}

.wu-story-tip-button:hover {
    background: var(--wu-red-dark);
    color: #fff;
}

.wu-story-tip-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #e6e6e6;
}

.wu-story-tip-link i {
    color: var(--wu-red-on-dark);
}

.wu-story-tip-link:hover {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 599px) {
    .wu-story-tip {
        padding: 20px 18px;
    }

    .wu-story-tip-icon {
        display: none;
    }

    .wu-story-tip-button {
        justify-content: center;
        width: 100%;
    }
}

/* Article footer */
.wu-article-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--wu-border);
}

.wu-article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-article-tags a {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--wu-bg-alt);
    font-size: 13px;
    font-weight: 500;
    color: var(--wu-text);
    transition: background-color var(--wu-transition), color var(--wu-transition);
}

.wu-article-tags a:hover {
    background: var(--wu-red-light);
    color: var(--wu-red-dark);
}

.wu-tags-label {
    margin-right: 4px;
    font-weight: 600;
    color: var(--wu-text);
}

/* ---------- Police dog stories (inc/police-dogs.php) ----------
   A blue and yellow check band across the top like a police van's, the
   force's dogs as a badge with a paw over the headline, a faint paw print
   behind it, and the dog's card at the end of the story. Wherever stories
   are listed, a paw before the section label. */
:root {
    --wu-dog-blue: #13306b;   /* the band, badge, the card's paw and the cards' paw */
    --wu-dog-yellow: #ffd200;
    --wu-dog-ink: #13306b;    /* blue text: the dog's name, links */
    --wu-dog-tint: #eef2fa;   /* the card and quotes */
    --wu-dog-line: var(--wu-dog-line);
}

.wu-article--dog::before {
    content: "";
    display: block;
    height: 14px;
    margin: -36px -40px 28px;
    border-radius: 11px 11px 0 0;
    background: conic-gradient(var(--wu-dog-blue) 90deg, var(--wu-dog-yellow) 0 180deg, var(--wu-dog-blue) 0 270deg, var(--wu-dog-yellow) 0) 0 0 / 40px 14px;
}

.wu-article--dog .wu-article-header {
    position: relative;
    isolation: isolate;
}

.wu-article--dog .wu-article-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -6px;
    right: -8px;
    width: 120px;
    height: 120px;
    background: var(--wu-dog-ink);
    opacity: 0.07;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5' cy='10' rx='2.2' ry='2.8' transform='rotate(-20 5 10)'/%3E%3Cellipse cx='9.3' cy='5.4' rx='2.3' ry='3' transform='rotate(-8 9.3 5.4)'/%3E%3Cellipse cx='14.7' cy='5.4' rx='2.3' ry='3' transform='rotate(8 14.7 5.4)'/%3E%3Cellipse cx='19' cy='10' rx='2.2' ry='2.8' transform='rotate(20 19 10)'/%3E%3Cpath d='M12 10.5c-2.6 0-6 4.2-6 7 0 1.9 1.4 2.8 3 2.8 1.2 0 2-.6 3-.6s1.8.6 3 .6c1.6 0 3-.9 3-2.8 0-2.8-3.4-7-6-7z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5' cy='10' rx='2.2' ry='2.8' transform='rotate(-20 5 10)'/%3E%3Cellipse cx='9.3' cy='5.4' rx='2.3' ry='3' transform='rotate(-8 9.3 5.4)'/%3E%3Cellipse cx='14.7' cy='5.4' rx='2.3' ry='3' transform='rotate(8 14.7 5.4)'/%3E%3Cellipse cx='19' cy='10' rx='2.2' ry='2.8' transform='rotate(20 19 10)'/%3E%3Cpath d='M12 10.5c-2.6 0-6 4.2-6 7 0 1.9 1.4 2.8 3 2.8 1.2 0 2-.6 3-.6s1.8.6 3 .6c1.6 0 3-.9 3-2.8 0-2.8-3.4-7-6-7z'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
}

.wu-dog-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 14px;
}

.wu-dog-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 9px;
    border-radius: 999px;
    background: var(--wu-dog-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: background-color var(--wu-transition);
}

.wu-dog-badge:hover {
    background: #0b2150;
}

.wu-dog-badge .wu-dog-paw {
    flex-shrink: 0;
    color: var(--wu-dog-yellow);
}

.wu-article--dog .wu-dog-name {
    margin-bottom: 0;
    color: var(--wu-dog-ink);
    font-size: 13px;
}

.wu-article--dog .wu-article-featured {
    border-bottom: 4px solid var(--wu-dog-yellow);
}

.wu-article--dog .wu-article-content blockquote {
    border-left-color: var(--wu-dog-ink);
    background: var(--wu-dog-tint);
}

.wu-article--dog .wu-article-content a {
    color: var(--wu-dog-ink);
}

/* On cards, the homepage lead story, search results, Read next, the
   sidebar's Most read and the footer's Latest news: a paw before the
   section label, which turns police blue */
.wu-dog-mark {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--wu-dog-blue);
    color: var(--wu-dog-yellow);
    vertical-align: -4px;
}

.wu-dog-mark .wu-dog-paw {
    display: block;
}

:is(.wu-card-cat, .wu-hero-cat, .wu-most-read-cat):has(.wu-dog-mark) {
    color: var(--wu-dog-ink);
}

/* Read next has no section label, so the paw comes with "Police dogs" at
   the start of the date line */
.wu-next-dog {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--wu-dog-ink);
}

/* Smaller in Read next, the sidebar's Most read and the footer's Latest news */
:is(.wu-next-dog, .wu-most-read-cat, .wu-footer-post-cat) .wu-dog-mark {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    vertical-align: -3px;
}

:is(.wu-next-dog, .wu-most-read-cat, .wu-footer-post-cat) .wu-dog-paw {
    width: 10px;
    height: 10px;
}

/* The footer is dark, so a lighter blue, and a yellow ring so the navy
   circle stands out */
.wu-footer-post-cat:has(.wu-dog-mark) {
    color: #a9c1ff;
}

.wu-footer-post-cat .wu-dog-mark {
    margin-left: 1.5px;
    box-shadow: 0 0 0 1.5px var(--wu-dog-yellow);
}

/* The dog's card, at the end of the story */
.wu-dog-card {
    margin-top: 36px;
    padding: 22px 24px;
    border: 1px solid var(--wu-dog-line);
    border-top: 6px solid var(--wu-dog-yellow);
    border-radius: 12px;
    background: var(--wu-dog-tint);
}

.wu-dog-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wu-dog-card-avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wu-dog-blue);
    color: var(--wu-dog-yellow);
    box-shadow: 0 0 0 3px var(--wu-dog-yellow);
}

.wu-dog-card-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wu-dog-card-role {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--wu-dog-ink);
}

.wu-dog-card-title {
    font-family: var(--wu-font-heading);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--wu-text);
}

.wu-dog-card-count {
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-dog-card-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wu-dog-line);
}

.wu-dog-card-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--wu-dog-line);
}

.wu-dog-card-list a {
    font-weight: 600;
    line-height: 1.4;
    color: var(--wu-text);
}

.wu-dog-card-list a:hover {
    color: var(--wu-dog-ink);
    text-decoration: underline;
}

.wu-dog-card-list time {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-dog-card-all {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wu-dog-ink);
}

.wu-dog-card-all:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    /* On phones the sheet has no edge, so the band runs across the screen */
    .wu-article--dog::before {
        margin: -20px -20px 20px;
        border-radius: 0;
    }

    .wu-article--dog .wu-article-header::after {
        width: 92px;
        height: 92px;
    }

    .wu-dog-card {
        padding: 18px;
    }

    .wu-dog-card-list li {
        flex-direction: column;
    }
}

/* ---------- Read next, under the story (template-parts/read-next.php) ----------
   The lead story large, with a numbered list beside it on wide screens and
   under it on narrower ones. Each says why it's there. */
.wu-related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--wu-border);
}

.wu-next-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--wu-border);
}

.wu-next-title {
    margin-bottom: -1px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wu-red);
    font-family: var(--wu-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wu-text);
}

.wu-next-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wu-red);
}

.wu-next-all i {
    font-size: 13px;
    transition: transform var(--wu-transition);
}

.wu-next-all:hover i {
    transform: translateX(3px);
}

.wu-next-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1000px) {
    .wu-next-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 28px;
    }

    .wu-next-grid--lead-only {
        grid-template-columns: minmax(0, 1fr);
        max-width: 640px;
    }

    /* The lead's picture grows to keep it level with the list */
    .wu-next-grid {
        align-items: stretch;
    }

    .wu-next-lead .wu-next-thumb {
        flex: 1 0 auto;
    }
}

/* The lead story */
.wu-next-lead {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--wu-border-light);
    border-radius: 12px;
    background: var(--wu-bg-card);
    color: var(--wu-text);
    transition: box-shadow var(--wu-transition);
}

.wu-next-lead:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.wu-next-lead .wu-next-thumb {
    aspect-ratio: 16 / 9;
}

.wu-next-lead-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 22px 22px;
}

.wu-next-lead-title {
    font-family: var(--wu-font-heading);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wu-text);
}

.wu-next-lead:hover .wu-next-lead-title,
.wu-next-link:hover .wu-next-headline {
    color: var(--wu-red);
}

.wu-next-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

/* The numbered list */
.wu-next-list {
    counter-reset: wu-next 1;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--wu-border-light);
    border-radius: 12px;
    background: var(--wu-bg-card);
}

.wu-next-item + .wu-next-item {
    border-top: 1px solid var(--wu-border-light);
}

.wu-next-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    color: var(--wu-text);
    transition: background var(--wu-transition);
}

.wu-next-link:hover {
    background: var(--wu-bg-alt);
}

.wu-next-link::before {
    counter-increment: wu-next;
    content: counter(wu-next);
    flex-shrink: 0;
    align-self: flex-start;
    width: 26px;
    padding-top: 18px;
    font-family: var(--wu-font-heading);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--wu-red);
}

.wu-next-lead:focus-visible,
.wu-next-link:focus-visible {
    outline: 3px solid var(--wu-red);
    outline-offset: -3px;
}

.wu-next-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wu-next-headline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: var(--wu-font-heading);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--wu-text);
}

.wu-next-link .wu-next-thumb {
    width: 96px;
    height: 72px;
    border-radius: 8px;
}

/* Why it's here: "Same court", "Also about Matthew Harris" */
.wu-next-why {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wu-text-secondary);
}

.wu-next-why i {
    flex-shrink: 0;
    font-size: 12px;
}

.wu-next-why--person {
    color: #1d5fbf;
}

.wu-next-why--court {
    color: #6b4fa8;
}

.wu-next-why--place {
    color: #13703a;
}

.wu-next-why--wanted {
    color: var(--wu-red);
}

.wu-next-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12.5px;
    color: var(--wu-text-tertiary);
}

.wu-next-meta .wu-pill {
    margin-right: 2px;
}

.wu-next-read {
    white-space: nowrap;
}

/* A picture: cropped to fit, or shown whole over a blurred copy of itself
   (upright photos and mugshots), a court building for an old custody
   photo, or the dragon for none */
.wu-next-thumb {
    position: relative;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    background: #1a1a1a;
}

.wu-next-thumb img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wu-next-lead:hover .wu-next-thumb img {
    transform: scale(1.03);
}

.wu-next-thumb.is-whole img {
    object-fit: contain;
}

.wu-next-lead:hover .wu-next-thumb.is-whole img {
    transform: none;
}

.wu-next-blur {
    position: absolute;
    inset: -10px;
    background-position: center;
    background-size: cover;
    /* Darkened and softened, as on the story page (.wu-article-featured-frame) */
    filter: blur(5px) brightness(0.45);
}

.wu-next-thumb.is-court {
    background: var(--wu-bg-alt);
    color: var(--wu-text-secondary);
}

.wu-next-thumb.is-court svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wu-next-thumb.is-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wu-red-light);
    color: var(--wu-red);
}

.wu-next-thumb.is-blank svg {
    width: 45%;
    max-width: 96px;
    height: auto;
    opacity: 0.35;
}

@media (max-width: 600px) {
    .wu-related {
        margin-top: 32px;
        padding-top: 24px;
    }

    /* The link to the court or section goes under the heading */
    .wu-next-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 16px;
        border-bottom: none;
    }

    .wu-next-title {
        font-size: 21px;
    }

    .wu-next-all {
        padding-bottom: 0;
    }

    .wu-next-grid {
        gap: 14px;
    }

    .wu-next-lead-body {
        padding: 16px 18px 18px;
    }

    .wu-next-lead-title {
        font-size: 21px;
    }

    .wu-next-link {
        gap: 12px;
        padding: 14px;
    }

    .wu-next-link::before {
        width: 20px;
        padding-top: 16px;
        font-size: 24px;
    }

    .wu-next-headline {
        font-size: 15.5px;
    }

    /* Short rows: the date is enough */
    .wu-next-link .wu-next-read {
        display: none;
    }

    .wu-next-link .wu-next-thumb {
        width: 80px;
        height: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wu-next-lead:hover .wu-next-thumb img {
        transform: none;
    }
}

/* ---------- Story sidebar (template-parts/article-sidebar.php) ---------- */
.wu-article-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* The Follow box and any widgets stay in view below the pinned menu bar */
.wu-article-side-sticky {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1000px) {
    .wu-article-side-sticky {
        position: sticky;
        top: calc(var(--wu-admin-bar) + 72px);
    }
}

.wu-side-box {
    padding: 20px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 10px;
}

.wu-side-title {
    margin-bottom: 12px;
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wu-text);
}

.wu-side-box > p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--wu-text-secondary);
}

/* This case so far: a line of dots, this story's in red */
.wu-case-list {
    list-style: none;
}

.wu-case-list li {
    position: relative;
    padding: 0 0 16px 24px;
    font-size: 14px;
    line-height: 1.45;
}

.wu-case-list li:last-child {
    padding-bottom: 0;
}

.wu-case-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 9px;
    height: 9px;
    border: 2px solid #bbb;
    border-radius: 50%;
    background: var(--wu-bg);
}

.wu-case-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 8.5px;
    top: 19px;
    bottom: 2px;
    width: 2px;
    background: var(--wu-border);
}

.wu-case-list li.is-current::before {
    border-color: var(--wu-red);
    background: var(--wu-red);
}

.wu-case-list-step {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

.wu-case-list li.is-current .wu-case-list-step {
    color: var(--wu-red);
}

.wu-case-list-title {
    display: block;
    font-weight: 500;
    color: var(--wu-text);
}

a.wu-case-list-title:hover {
    color: var(--wu-red);
}

span.wu-case-list-title {
    font-weight: 600;
}

/* Most read: numbered */
.wu-most-read {
    list-style: none;
    counter-reset: wu-most-read;
}

.wu-most-read li {
    counter-increment: wu-most-read;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--wu-border-light);
}

.wu-most-read li:first-child {
    padding-top: 2px;
    border-top: 0;
}

.wu-most-read li:last-child {
    padding-bottom: 0;
}

.wu-most-read li::before {
    content: counter(wu-most-read);
    grid-row: span 2;
    font: 800 26px/1 var(--wu-font-heading);
    color: var(--wu-red);
}

.wu-most-read-cat {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wu-red);
}

.wu-most-read a {
    grid-column: 2;
    font-family: var(--wu-font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wu-text);
}

.wu-most-read a:hover {
    color: var(--wu-red);
}

/* Follow this court, or get the newsletter */
.wu-side-follow {
    background: #fff7f7;
    border-color: #f3d4d8;
}

.wu-side-follow-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.wu-side-follow-title svg {
    flex: none;
    color: var(--wu-red);
}

.wu-side-follow .wu-follow-actions {
    flex-wrap: wrap;
}

.wu-side-follow .wu-follow-button {
    min-width: 110px;
}

.wu-side-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 14px;
    border-radius: 10px;
    background: var(--wu-red);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    transition: background-color var(--wu-transition);
}

.wu-side-button:hover {
    background: var(--wu-red-dark);
    color: #fff;
}

/* Widgets (Appearance → Widgets → Article sidebar), e.g. an advert */
.wu-article-side-widgets .wu-widget:last-child {
    margin-bottom: 0;
}

.wu-article-side-widgets img,
.wu-article-side-widgets iframe {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* ---------- Adverts (inc/adverts.php, assets/js/adverts.js) ---------- */
/* Quiet on purpose: no box or tinted background, just a hairline above and
   below, a small label and room to breathe, and in the story no wider than
   the text, so an advert reads as a pause rather than an interruption.
   An empty slot keeps the space its advert will take (--wu-ad-height), so
   the story doesn't jump as it loads; the label comes from data-label, so
   the slot carries no text of its own. */
.wu-ad {
    min-height: var(--wu-ad-height, 0px);
    margin: 40px 0;
    padding: 10px 0 20px;
    border-top: 1px solid var(--wu-border-light);
    border-bottom: 1px solid var(--wu-border-light);
    text-align: center;
    overflow: hidden;
}

.wu-ad[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 10px;
    font-family: var(--wu-font);
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wu-text-tertiary);
}

/* Settles in rather than popping up */
.wu-ad > * {
    animation: wu-ad-in 0.5s ease both;
}

@keyframes wu-ad-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wu-ad > * {
        animation: none;
    }
}

.wu-a11y-motion .wu-ad > * {
    animation: none;
}

.wu-ad img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--wu-radius);
}

.wu-ad iframe {
    max-width: 100%;
    margin: 0 auto;
}

.wu-ad-link {
    display: inline-block;
}

/* AdSense had nothing to show: fold the space away */
.wu-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

/* In the story: the width of the text and pictures, with a paragraph's
   worth of space */
.wu-article-content .wu-ad {
    margin: 2em 0;
    line-height: normal;
}

.wu-article-side .wu-ad {
    margin: 0;
}

/* Above Read next: across the page under the story and the sidebar */
.wu-single-layout > .wu-ad {
    grid-column: 1 / -1;
    margin: 8px 0;
}

/* ?wu_ads_preview=1 (admins): where each place is */
.wu-ad--preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: repeating-linear-gradient(135deg, var(--wu-bg-alt) 0 12px, var(--wu-bg) 12px 24px);
    border: 2px dashed var(--wu-border);
    border-radius: var(--wu-radius);
    font-family: var(--wu-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--wu-text-secondary);
}

/* ==========================================================================
   Archive & Search
   ========================================================================== */

.wu-archive-header {
    margin-bottom: 32px;
}

.wu-archive-title {
    font-family: var(--wu-font-heading);
    font-size: 30px;
    font-weight: 800;
    color: var(--wu-text);
}

.wu-archive-title span {
    color: var(--wu-red);
}

.wu-archive-desc {
    font-size: 15px;
    color: var(--wu-text-secondary);
    margin-top: 8px;
}

/* Sub-category buttons, e.g. each court on the Magistrates Court page */
.wu-subcat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.wu-subcat-chip {
    padding: 7px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    background: var(--wu-bg);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--wu-text);
    transition: border-color var(--wu-transition), color var(--wu-transition);
}

.wu-subcat-chip:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-subcat-chip.is-current {
    background: var(--wu-red);
    border-color: var(--wu-red);
    color: #fff;
}

/* -- Search results page -- */

/* The search box stands in for a heading, with the sections as tabs
   under it (only those with results) */
.wu-search-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.wu-searchform.wu-search-query {
    max-width: none;
    min-height: 60px;
    margin: 0;
    padding-left: 20px;
    border-radius: 14px;
}

/* Two classes, to win over the .wu-searchform rules further down */
.wu-searchform.wu-search-query > input {
    height: 56px;
    font-family: var(--wu-font-heading);
    font-size: 24px;
    font-weight: 800;
}

.wu-searchform.wu-search-query > button {
    border-radius: 10px;
}

/* The browser's clear button, in the theme's grey rather than its blue */
.wu-search-query > input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background: var(--wu-text-tertiary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}

.wu-search-query > input::-webkit-search-cancel-button:hover {
    background: var(--wu-text);
}

/* Its search panel (search.js) opens the full width of the box, over a
   dimmed page so the results underneath don't show through beside it */
.wu-search-query.is-open {
    z-index: 81;
}

.wu-search-head:has(> .wu-search-query.is-open)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.28);
    animation: wu-scrim-in 0.15s ease;
}

@keyframes wu-scrim-in {
    from {
        opacity: 0;
    }
}

.wu-search-query .wu-search-panel {
    left: 0;
    right: 0;
    width: auto;
}

.wu-search-query .wu-search-panel.is-empty {
    right: auto;
    width: min(640px, 100%);
}

/* Wide screens: the stories on the left, the sections down the right */
@media (min-width: 900px) {
    .wu-search-query.is-open > .wu-search-panel:not(.is-empty) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 250px;
        grid-template-rows: auto auto 1fr auto;
        background: linear-gradient(to left, var(--wu-bg-alt) 250px, var(--wu-border-light) 250px, var(--wu-border-light) 251px, var(--wu-bg) 251px);
    }

    .wu-search-query .wu-search-panel:not(.is-empty) > * {
        border-top: 0;
    }

    .wu-search-query .wu-search-panel:not(.is-empty) > .wu-sp-scopes {
        grid-column: 2;
        grid-row: 1;
    }

    .wu-search-query .wu-search-panel:not(.is-empty) > .wu-sp-filters {
        grid-column: 2;
        grid-row: 2;
        border-top: 1px solid var(--wu-border);
    }

    .wu-search-query .wu-search-panel:not(.is-empty) > .wu-sp-body {
        grid-column: 1;
        grid-row: 1 / 4;
        min-width: 0;
    }

    .wu-search-query .wu-search-panel:not(.is-empty) > .wu-sp-keys {
        grid-column: 1 / -1;
        grid-row: 4;
        border-top: 1px solid var(--wu-border-light);
    }

    /* The sections as a list rather than a row of buttons */
    .wu-search-query .wu-search-panel:not(.is-empty) .wu-sp-scopes .wu-sp-chips {
        flex-direction: column;
        gap: 2px;
        margin: 0 -10px;
    }

    .wu-search-query .wu-search-panel:not(.is-empty) .wu-sp-scopes .wu-sp-chip {
        padding: 8px 10px;
        border: 0;
        border-radius: 8px;
        background: none;
        text-align: left;
    }

    .wu-search-query .wu-search-panel:not(.is-empty) .wu-sp-scopes .wu-sp-chip:hover {
        background: var(--wu-bg);
    }

    .wu-search-query .wu-search-panel:not(.is-empty) .wu-sp-scopes .wu-sp-chip[aria-pressed="true"] {
        background: var(--wu-bg);
        box-shadow: inset 3px 0 var(--wu-red);
        color: var(--wu-red);
        font-weight: 600;
    }

    .wu-search-query .wu-search-panel:not(.is-empty) .wu-sp-filter-label {
        width: 100%;
    }

    .wu-search-query .wu-sp-results {
        margin-bottom: -6px;
    }

    .wu-search-query .wu-sp-item {
        padding: 12px 18px;
    }

    .wu-search-query .wu-sp-thumb {
        width: 88px;
        height: 58px;
    }
}

.wu-search-query .wu-search-token {
    height: 30px;
    padding-left: 12px;
    font-size: 15px;
}

.wu-search-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--wu-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.wu-search-tabs::-webkit-scrollbar {
    display: none;
}

.wu-search-tab {
    flex-shrink: 0;
    margin-bottom: -1px;
    padding: 8px 0 11px;
    border-bottom: 3px solid transparent;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--wu-text-secondary);
    transition: color var(--wu-transition), border-color var(--wu-transition);
}

.wu-search-tab:hover {
    color: var(--wu-text);
}

.wu-search-tab.is-current {
    border-bottom-color: var(--wu-red);
    color: var(--wu-text);
}

.wu-search-tab-count {
    margin-left: 3px;
    font-size: 12px;
    font-weight: 500;
    color: var(--wu-text-tertiary);
}

.wu-search-tab.is-current .wu-search-tab-count {
    color: var(--wu-red);
}

/* In one court: which, with a cross back to all of them */
.wu-search-court {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--wu-red);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    transition: background-color var(--wu-transition);
}

.wu-search-court:hover {
    background: var(--wu-red-dark);
}

/* Small capital labels over parts of the page, e.g. Pages */
.wu-search-label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

/* While search.js fetches another page of results */
.wu-search-page.is-loading > :not(.wu-search-head) {
    opacity: 0.5;
    transition: opacity 0.2s ease 0.1s;
    pointer-events: none;
}

.wu-search-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 40px;
}

.wu-search-main {
    flex: 999 1 560px;
    min-width: 0;
}

.wu-search-side {
    display: flex;
    flex: 1 1 280px;
    flex-direction: column;
    gap: 16px;
}

.wu-search-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 10px;
}

.wu-search-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.wu-search-sort {
    display: flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--wu-search-bg);
}

.wu-search-sort a {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wu-text-secondary);
}

.wu-search-sort a:hover {
    color: var(--wu-text);
}

.wu-search-sort a.is-current {
    background: var(--wu-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    font-weight: 600;
    color: var(--wu-text);
}

.wu-search-controls select,
.wu-search-apply {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--wu-border);
    border-radius: 8px;
    background: var(--wu-bg);
    font: 500 13px var(--wu-font);
    color: var(--wu-text);
}

.wu-search-apply {
    cursor: pointer;
}

.wu-search-apply[hidden] {
    display: none;
}

.wu-result {
    border-bottom: 1px solid var(--wu-border);
}

.wu-result:last-child {
    border-bottom: 0;
}

.wu-result-link {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    color: var(--wu-text);
}

.wu-result-thumb {
    flex-shrink: 0;
    width: 168px;
}

.wu-result-thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    object-fit: cover;
}

/* Portraits and mugshots (content-search.php): the whole photo, with a
   darkened, softened copy of it filling the space either side */
.wu-result-thumb--whole {
    /* Keep its shape rather than stretching to the result's height */
    align-self: flex-start;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
}

.wu-result-thumb--whole::before {
    content: "";
    position: absolute;
    inset: -8px;
    background: var(--wu-thumb-bg) center / cover no-repeat;
    filter: blur(4px) brightness(0.45);
}

.wu-result-thumb.wu-result-thumb--whole img {
    position: relative;
    display: block;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: contain;
}

.wu-result-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wu-result-body .wu-card-cat {
    margin-bottom: 0;
}

.wu-result-title {
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.wu-result-link:hover .wu-result-title {
    color: var(--wu-red);
}

.wu-result-snippet {
    font-size: 15px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

/* What's under the label: the court and its outcome, Wanted, Updated */
.wu-result-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.wu-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--wu-text);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.6;
    text-transform: uppercase;
    white-space: nowrap;
    /* The page's background colour on its text colour, so it stays readable
       when a seasonal look turns the page dark (season-*.css) */
    color: var(--wu-bg);
}

.wu-pill--wanted {
    background: var(--wu-red);
}

.wu-pill--updated {
    background: #13703a;
    color: #fff;
}

/* A live Wanted appeal, pinned above the list */
.wu-result--pinned {
    margin: 12px 0;
    padding: 0 16px;
    border: 1px solid var(--wu-red);
    border-radius: 10px;
    background: var(--wu-red-light);
}

.wu-result--pinned + .wu-result--pinned {
    margin-top: 0;
}

.wu-result-thumb {
    position: relative;
}

/* An old custody photo's place: a court building */
.wu-result-thumb--court {
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
    color: var(--wu-text-secondary);
}

.wu-result-court {
    display: block;
    width: 100%;
    height: 100%;
}

/* The case so far: Charged → Admitted → Jailed */
.wu-case {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 2px 0;
    list-style: none;
    font-size: 12px;
    color: var(--wu-text-secondary);
}

.wu-case li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wu-case li::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid var(--wu-text-tertiary);
    border-radius: 50%;
    background: var(--wu-bg);
}

.wu-case li:not(:last-child)::after {
    content: '';
    width: 16px;
    height: 2px;
    margin: 0 6px;
    background: var(--wu-border);
}

.wu-case b {
    font-weight: 600;
    color: var(--wu-text);
}

.wu-case li.is-current::before {
    border-color: var(--wu-text);
    background: var(--wu-text);
}

.wu-result-mention {
    font-size: 12px;
    color: var(--wu-text-secondary);
}

.wu-result-mention b {
    font-weight: 600;
    color: var(--wu-text);
}

/* Shorter rows in the Everything summary */
.wu-result--compact .wu-result-link {
    gap: 14px;
    padding: 14px 0;
}

.wu-result--compact .wu-result-thumb {
    width: 72px;
}

.wu-result--compact .wu-result-thumb img,
.wu-result--compact .wu-result-thumb--court,
.wu-result--compact .wu-result-thumb--whole {
    aspect-ratio: 1;
}

.wu-result--compact .wu-result-title {
    font-size: 17px;
}

.wu-result--compact .wu-result-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
}

/* An event's date on its picture: the day big, in a white tile (red while
   it's on) */
.wu-event-tile {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 4px 7px 5px;
    border-radius: 8px;
    background: var(--wu-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    line-height: 1.05;
    text-align: center;
    color: var(--wu-text);
}

.wu-event-tile-top {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wu-red);
}

.wu-event-tile-day {
    font-family: var(--wu-font-heading);
    font-size: 21px;
    font-weight: 800;
}

.wu-event-tile-month {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

.wu-event-tile.is-now {
    background: var(--wu-red);
}

.wu-event-tile.is-now span {
    color: #fff;
}

.wu-event-tile--inline {
    position: static;
    flex-shrink: 0;
    align-self: flex-start;
    min-width: 56px;
    border: 1px solid var(--wu-border);
    box-shadow: none;
}

.wu-result-thumb .wu-event-tile {
    transform-origin: top left;
}

.wu-search-card {
    padding: 20px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 10px;
}

.wu-search-card h2 {
    margin-bottom: 8px;
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
}

.wu-search-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--wu-text-secondary);
}

.wu-search-card strong {
    color: var(--wu-text);
}

.wu-search-courts {
    list-style: none;
}

.wu-search-courts a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--wu-border-light);
    font-size: 14px;
    font-weight: 500;
    color: var(--wu-text);
}

.wu-search-courts li:last-child a {
    border-bottom: 0;
}

.wu-search-courts a:hover,
.wu-search-courts a.is-current {
    color: var(--wu-red);
}

.wu-search-courts a.is-current {
    font-weight: 700;
}

/* Back out of one court, under the list */
.wu-search-courts-all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--wu-red-light);
    font-size: 14px;
    font-weight: 600;
    color: var(--wu-red);
    transition: background-color var(--wu-transition), color var(--wu-transition);
}

.wu-search-courts-all:hover {
    background: var(--wu-red);
    color: #fff;
}

.wu-search-courts-all .wu-search-courts-count {
    margin-left: auto;
    color: inherit;
    opacity: 0.8;
}

/* Follow a court (inc/court-follow.php): in the search sidebar, and as a
   bar under the heading of a court's page. In the sidebar the courts are a
   picker: chips for the chosen ones, then a toggle opening a list to tick */
.wu-follow {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.wu-follow input[type="email"] {
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 10px;
    background: var(--wu-bg);
    font: inherit;
    font-size: 15px;
    color: var(--wu-text);
    transition: border-color var(--wu-transition);
}

.wu-follow input[type="email"]:hover {
    border-color: #c9c9c9;
}

.wu-follow input[type="email"]:focus-visible {
    border-color: var(--wu-red);
    outline: 3px solid var(--wu-red-light);
}

/* The chosen courts */
.wu-follow-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}

.wu-follow-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 10px 4px 12px;
    border: 1px solid var(--wu-red);
    border-radius: 999px;
    background: var(--wu-red-light);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--wu-red-dark);
    cursor: pointer;
    transition: background-color var(--wu-transition), color var(--wu-transition);
}

.wu-follow-chip svg {
    flex: none;
    opacity: 0.7;
}

.wu-follow-chip:hover,
.wu-follow-chip:focus-visible {
    background: var(--wu-red);
    color: #fff;
}

.wu-follow-chip:hover svg,
.wu-follow-chip:focus-visible svg {
    opacity: 1;
}

.wu-follow-chip:focus-visible {
    outline: 2px solid var(--wu-red);
    outline-offset: 2px;
}

.wu-follow-chip--more {
    border-color: var(--wu-border);
    background: var(--wu-bg);
    color: var(--wu-text-secondary);
}

.wu-follow-chip--more:hover,
.wu-follow-chip--more:focus-visible {
    border-color: var(--wu-text);
    background: var(--wu-bg);
    color: var(--wu-text);
}

/* The picker */
.wu-follow-picker {
    position: relative;
}

.wu-follow-picker-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 10px;
    background: var(--wu-bg);
    font-size: 15px;
    font-weight: 500;
    color: var(--wu-text);
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--wu-transition), background-color var(--wu-transition);
}

.wu-follow-picker-toggle::-webkit-details-marker {
    display: none;
}

.wu-follow-picker-toggle > span {
    flex: 1;
    min-width: 0;
}

.wu-follow-picker-icon {
    flex: none;
    color: var(--wu-red);
}

.wu-follow-picker-chevron {
    flex: none;
    color: var(--wu-text-secondary);
    transition: transform var(--wu-transition);
}

.wu-follow-picker-toggle:hover {
    border-color: #c9c9c9;
    background: var(--wu-nav-hover);
}

.wu-follow-picker-toggle:focus-visible {
    border-color: var(--wu-red);
    outline: 3px solid var(--wu-red-light);
}

.wu-follow-picker[open] .wu-follow-picker-toggle {
    border-color: var(--wu-red);
}

.wu-follow-picker.is-invalid .wu-follow-picker-toggle {
    border-color: var(--wu-red);
    background: var(--wu-red-light);
    color: var(--wu-red-dark);
}

.wu-follow-picker[open] .wu-follow-picker-chevron {
    transform: rotate(180deg);
}

/* Once the chips show the courts, the toggle is a quieter "Add another court" */
.wu-follow.has-courts .wu-follow-picker-toggle {
    border-style: dashed;
    color: var(--wu-text-secondary);
}

.wu-follow.has-courts .wu-follow-picker[open] .wu-follow-picker-toggle {
    border-style: solid;
    color: var(--wu-text);
}

.wu-follow-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--wu-border);
    border-radius: 12px;
    background: var(--wu-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: wu-follow-pop 0.14s ease-out;
}

@keyframes wu-follow-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wu-follow-picker-panel {
        animation: none;
    }
}

.wu-follow-picker-search {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid var(--wu-border-light);
}

.wu-follow-picker-search svg {
    position: absolute;
    top: 50%;
    left: 22px;
    color: var(--wu-text-tertiary);
    transform: translateY(-50%);
    pointer-events: none;
}

.wu-follow-picker-search input {
    width: 100%;
    min-height: 38px;
    padding: 6px 12px 6px 36px;
    border: 0;
    border-radius: 8px;
    background: var(--wu-search-bg);
    font: inherit;
    font-size: 15px;
    color: var(--wu-text);
}

.wu-follow-picker-search input:focus-visible {
    outline: 2px solid var(--wu-red);
}

.wu-follow-picker-list {
    max-height: 300px;
    padding: 0 6px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wu-follow-picker-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 8px 6px;
    background: var(--wu-bg);
    font-size: 13px;
    font-weight: 700;
    color: var(--wu-text-secondary);
}

.wu-follow-picker-all {
    flex: none;
    white-space: nowrap;
    padding: 2px 6px;
    border: 0;
    border-radius: 4px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--wu-red);
    cursor: pointer;
}

.wu-follow-picker-all:hover {
    background: var(--wu-red-light);
}

.wu-follow-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--wu-text);
    cursor: pointer;
}

.wu-follow-option[hidden],
.wu-follow-picker-group[hidden] {
    display: none;
}

.wu-follow-option:hover {
    background: var(--wu-nav-hover);
}

.wu-follow-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wu-follow-option-box {
    display: grid;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #c9c9c9;
    border-radius: 6px;
    background: var(--wu-bg);
    transition: background-color var(--wu-transition), border-color var(--wu-transition);
}

.wu-follow-option-box::after {
    content: '';
    width: 10px;
    height: 6px;
    margin-top: -2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    opacity: 0;
    transform: rotate(-45deg);
}

.wu-follow-option input:checked ~ .wu-follow-option-box {
    border-color: var(--wu-red);
    background: var(--wu-red);
}

.wu-follow-option input:checked ~ .wu-follow-option-box::after {
    opacity: 1;
}

.wu-follow-option input:checked ~ .wu-follow-option-name {
    font-weight: 600;
}

.wu-follow-option input:focus-visible ~ .wu-follow-option-box {
    outline: 2px solid var(--wu-red);
    outline-offset: 2px;
}

.wu-follow .wu-follow-picker-empty {
    padding: 16px 8px;
    text-align: center;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-follow-picker-done {
    margin: 0 10px 10px;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--wu-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.wu-follow-picker-done:hover {
    background: #000;
}

/* Daily or weekly, beside the button */
.wu-follow-actions {
    display: flex;
    gap: 8px;
}

.wu-follow-freq {
    display: flex;
    flex: none;
    padding: 3px;
    border: 0;
    border-radius: 10px;
    background: var(--wu-search-bg);
}

.wu-follow-freq label {
    position: relative;
    display: flex;
    cursor: pointer;
}

.wu-follow-freq input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wu-follow-freq span {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--wu-text-secondary);
    transition: background-color var(--wu-transition), color var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-follow-freq label:hover span {
    color: var(--wu-text);
}

.wu-follow-freq input:checked + span {
    background: var(--wu-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    font-weight: 600;
    color: var(--wu-text);
}

.wu-follow-freq input:focus-visible + span {
    outline: 2px solid var(--wu-red);
}

.wu-follow-button {
    flex: 1;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--wu-red);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color var(--wu-transition);
}

.wu-follow-button:hover {
    background: var(--wu-red-dark);
}

.wu-follow-button:disabled {
    opacity: 0.7;
    cursor: default;
}

.wu-follow .wu-follow-message {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wu-text);
}

.wu-follow .wu-follow-message.is-error {
    color: var(--wu-red);
}

.wu-follow-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    margin-top: 20px;
    padding: 18px 20px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 10px;
}

.wu-follow-bar h2 {
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.wu-follow-bar p {
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-follow-bar .wu-follow {
    flex: 1 1 360px;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 520px;
    margin-top: 0;
}

.wu-follow-bar .wu-follow input[type="email"] {
    flex: 1 1 220px;
    width: auto;
}

.wu-follow-bar .wu-follow-actions {
    flex: 1 1 220px;
}

.wu-follow-bar .wu-follow-message {
    flex-basis: 100%;
}

.wu-search-courts-count {
    color: var(--wu-text-secondary);
}

/* People the search names, above Crime & Court results (search-people.php):
   a card each with the face, name, outcome, court and date, scrolling
   sideways on phones. mugshots.js opens them in the viewer. */
.wu-people {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 10px;
}

.wu-people-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.wu-people-head h2 {
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.wu-people-count {
    margin-left: 4px;
    font-family: var(--wu-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--wu-text-secondary);
}

.wu-people-hint {
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-people-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    list-style: none;
}

.wu-person {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--wu-border-light);
    border-radius: 10px;
    color: var(--wu-text);
    transition: border-color var(--wu-transition);
}

.wu-person:hover {
    border-color: var(--wu-red);
}

.wu-person.is-wanted {
    border-color: #fde4e8;
    background: var(--wu-red-light);
}

.wu-person-face {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    margin: 3px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--wu-bg), 0 0 0 4px var(--wu-red);
    overflow: hidden;
}

.wu-person-face img {
    width: 100%;
    height: 100%;
    background: #2b2f36;
    object-fit: cover;
    object-position: 50% 25%;
}

.wu-person-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.wu-person .wu-mugshot-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.wu-person:hover .wu-mugshot-name {
    color: var(--wu-red);
}

.wu-person-where {
    font-size: 12px;
    line-height: 1.35;
    color: var(--wu-text-secondary);
}

.wu-people-also {
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-people-also a {
    font-weight: 600;
    color: var(--wu-red);
}

.wu-people-also a:hover {
    text-decoration: underline;
}

/* Just the line about a judge, without the box */
.wu-people:not([aria-labelledby]) {
    padding: 0;
    background: none;
    border: 0;
}

/* The viewer: the whole screen on phones, a tall card over the dimmed page
   on bigger screens */
html.wu-mv-open {
    overflow: hidden;
}

.wu-mv {
    display: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #111111;
    color: #ffffff;
}

.wu-mv[open] {
    display: flex;
    flex-direction: column;
}

.wu-mv::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

@media (min-width: 601px) {
    .wu-mv {
        width: 420px;
        height: min(844px, calc(100% - 48px));
        margin: auto;
        border-radius: 12px;
        overflow: hidden;
    }
}

.wu-mv-bars {
    display: flex;
    gap: 4px;
    padding: 12px 12px 0;
}

.wu-mv-bars span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.wu-mv-bars span.is-seen {
    background: #ffffff;
}

.wu-mv-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 0 12px;
}

.wu-mv-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2b2f36;
    object-fit: cover;
    object-position: 50% 25%;
}

.wu-mv-who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.wu-mv-name {
    font-size: 14px;
    font-weight: 600;
}

.wu-mv-meta {
    overflow: hidden;
    font-size: 12px;
    color: #c9c9c9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wu-mv-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: #ffffff;
    cursor: pointer;
}

.wu-mv-photo {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 12px 16px;
}

.wu-mv-photo img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #2b2f36;
    object-fit: contain;
}

/* Invisible halves of the photo: tap left to go back, right for the next */
.wu-mv-prev,
.wu-mv-next {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
}

.wu-mv-prev {
    left: 0;
    width: 35%;
}

.wu-mv-next {
    right: 0;
    width: 65%;
}

.wu-mv-prev:disabled {
    cursor: default;
}

.wu-mv-prev:focus-visible,
.wu-mv-next:focus-visible,
.wu-mv-close:focus-visible,
.wu-mv-read:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

.wu-mv-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 20px 28px;
}

.wu-mv-outcome {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-transform: uppercase;
}

.wu-mv-outcome.is-wanted {
    background: var(--wu-red);
}

.wu-mv-title {
    font-family: var(--wu-font-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.wu-mv-read {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin-top: 6px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}

.wu-mv-read:hover {
    background: #f0f0f0;
    color: #111111;
}

/* Everything: places and courts whose name matches, then a shelf for each
   section (search-everything.php) */
.wu-search-pages {
    margin-bottom: 24px;
}

.wu-search-pages ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    list-style: none;
}

.wu-search-page-link {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    height: 100%;
    padding: 12px 14px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 10px;
    color: var(--wu-text);
    transition: border-color var(--wu-transition);
}

.wu-search-page-link:hover {
    border-color: var(--wu-red);
}

.wu-search-page-icon {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--wu-red-light);
    color: var(--wu-red);
}

.wu-search-page-name {
    font-family: var(--wu-font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.wu-search-page-note {
    font-size: 12.5px;
    color: var(--wu-text-secondary);
}

.wu-shelves {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wu-shelf {
    padding: 14px 20px 4px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 12px;
}

.wu-shelf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wu-border-light);
}

.wu-shelf-head h2 {
    font-family: var(--wu-font-heading);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.wu-shelf-count {
    margin-left: 6px;
    font-family: var(--wu-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--wu-text-secondary);
}

.wu-shelf-more {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--wu-red);
}

.wu-shelf-more:hover {
    text-decoration: underline;
}

.wu-shelf .wu-result {
    border-bottom-color: var(--wu-border-light);
}

.wu-shelf-empty {
    padding: 16px 0 14px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-shelf-empty a {
    font-weight: 600;
    color: var(--wu-red);
}

/* What's On: when (coming up, this weekend, next 2 weeks, past) and area,
   then events in groups as cards (soon) and rows (later) */
.wu-search-tools--events {
    margin-bottom: 8px;
}

.wu-search-when {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wu-search-when-chip {
    padding: 6px 13px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    background: var(--wu-bg);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--wu-text);
    transition: border-color var(--wu-transition), color var(--wu-transition);
}

.wu-search-when-chip:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-search-when-chip.is-current {
    border-color: var(--wu-red);
    background: var(--wu-red);
    color: #fff;
}

.wu-search-when-count {
    margin-left: 3px;
    font-size: 12px;
    opacity: 0.75;
}

.wu-event-groups {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 20px;
}

.wu-event-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 12px;
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 800;
}

.wu-event-group-title span {
    font-family: var(--wu-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--wu-text-secondary);
}

.wu-event-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.wu-shelf .wu-event-cards {
    padding: 14px 0 16px;
}

.wu-event-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--wu-text);
}

.wu-event-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: var(--wu-search-bg);
    overflow: hidden;
}

.wu-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Upright posters and portraits (content-event.php): the whole picture,
   with a darkened, softened copy of it filling the space either side */
.wu-event-thumb--whole {
    background: #111;
}

.wu-event-thumb--whole::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: var(--wu-thumb-bg) center / cover no-repeat;
    filter: blur(5px) brightness(0.45);
}

.wu-event-thumb--whole img {
    position: relative;
    display: block;
    object-fit: contain;
}

.wu-event-title {
    font-family: var(--wu-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.wu-event-link:hover .wu-event-title {
    color: var(--wu-red);
}

.wu-event-where {
    margin-top: 2px;
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-event-rows {
    padding: 0 16px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 12px;
}

.wu-event-row + .wu-event-row {
    border-top: 1px solid var(--wu-border-light);
}

.wu-event-row .wu-event-link {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.wu-events-past {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 28px;
    padding: 14px 18px;
    border: 1px dashed var(--wu-border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-events-past strong {
    color: var(--wu-text);
}

.wu-events-past a {
    font-weight: 600;
    white-space: nowrap;
    color: var(--wu-red);
}

@media (max-width: 600px) {
    .wu-search-head {
        gap: 10px;
        margin-bottom: 18px;
    }

    .wu-searchform.wu-search-query {
        min-height: 52px;
        padding-left: 14px;
    }

    .wu-searchform.wu-search-query > input {
        height: 48px;
        font-size: 20px;
    }

    .wu-searchform.wu-search-query > button {
        display: none;
    }

    .wu-search-tabs {
        gap: 18px;
        margin: 0 -20px;
        padding: 0 20px;
    }

    /* The sort and filters stay at the top while scrolling the results;
       search.js measures the pinned header (--wu-header-h) */
    .wu-search-main > .wu-search-tools,
    .wu-search-tools--events {
        position: sticky;
        top: calc(var(--wu-admin-bar) + var(--wu-header-h, 60px));
        z-index: 5;
        box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.35);
    }

    .wu-search-tools--events .wu-search-when {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .wu-people {
        margin: 0 -20px 20px;
        padding: 14px 20px 12px;
        border-width: 1px 0;
        border-radius: 0;
    }

    .wu-people:not([aria-labelledby]) {
        margin: 0 0 16px;
        padding: 0;
    }

    .wu-people-hint {
        display: none;
    }

    .wu-people-list {
        grid-template-columns: none;
        grid-auto-columns: 82%;
        grid-auto-flow: column;
        margin: 0 -20px;
        padding: 0 20px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .wu-people-list li {
        scroll-snap-align: start;
    }

    .wu-result-link {
        gap: 14px;
        padding: 16px 0;
    }

    .wu-result-thumb {
        width: 96px;
    }

    .wu-result-thumb img,
    .wu-result-thumb--court,
    .wu-result-thumb--whole {
        aspect-ratio: 1;
    }

    .wu-result-title {
        font-size: 17px;
    }

    .wu-result-snippet {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
    }

    .wu-result--pinned {
        padding: 0 12px;
    }

    .wu-result--compact .wu-result-thumb {
        width: 64px;
    }

    .wu-result-thumb .wu-event-tile {
        top: 4px;
        left: 4px;
        transform: scale(0.8);
    }

    .wu-shelf {
        padding: 12px 14px 2px;
    }

    .wu-search-pages ul,
    .wu-shelf .wu-event-cards {
        grid-template-columns: none;
        grid-auto-columns: 78%;
        grid-auto-flow: column;
        overflow-x: auto;
    }

    .wu-event-cards {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wu-person,
    .wu-search-tab {
        transition: none;
    }
}

/* ==========================================================================
   Page
   ========================================================================== */

.wu-page {
    max-width: var(--wu-content-width);
    margin: 0 auto;
}

.wu-page-header {
    margin-bottom: 28px;
}

.wu-page-title {
    font-family: var(--wu-font-heading);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.25;
}

/* "Last updated" under a site page's title (inc/site-pages.php) */
.wu-page-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-page-dates-sep {
    color: var(--wu-text-tertiary);
}

.wu-page-content {
    font-size: 17px;
    line-height: 1.75;
}

.wu-page-content p {
    margin-bottom: 1.25em;
}

/* ==========================================================================
   Trees page (page-trees.php, inc/trees.php)
   ========================================================================== */

.wu-trees {
    --wu-tree: #1b7a43;
    --wu-tree-bright: #22a35a;
    --wu-tree-soft: rgba(34, 163, 90, 0.1);
    --wu-tree-line: rgba(34, 163, 90, 0.28);
    padding-bottom: 12px;
}

/* Hero: the words beside the live count */
.wu-trees-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
    gap: 32px;
    align-items: center;
    margin: 4px 0 48px;
    padding: 40px;
    border-radius: 20px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(34, 163, 90, 0.16), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(34, 163, 90, 0.08), transparent 60%),
        var(--wu-bg);
    border: 1px solid var(--wu-tree-line);
}

.wu-trees-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wu-tree);
}

.wu-trees-title {
    font-family: var(--wu-font-heading);
    font-size: 48px;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.025em;
}

.wu-trees-lede {
    max-width: 52ch;
    margin-top: 14px;
    font-size: 19px;
    line-height: 1.55;
    color: var(--wu-text-secondary);
}

.wu-trees-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 28px;
    border-radius: 16px;
    background: var(--wu-bg-card);
    border: 1px solid var(--wu-border);
    box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.4);
}

.wu-trees-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.wu-trees-card .wu-live-indicator {
    color: var(--wu-tree);
    font-size: 11px;
}

.wu-trees-since {
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-trees-big {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.wu-trees-big-num {
    font-family: var(--wu-font-heading);
    font-size: 84px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--wu-tree);
}

.wu-trees-big-label {
    font-size: 20px;
    font-weight: 600;
}

.wu-trees-new {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wu-tree);
}

.wu-trees-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    padding-top: 16px;
    border-top: 1px solid var(--wu-border);
}

.wu-trees-card-stats dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

.wu-trees-card-stats dd {
    font-family: var(--wu-font-heading);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.wu-trees-card-stats small {
    font-family: var(--wu-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--wu-text-secondary);
}

.wu-trees-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--wu-tree);
}

.wu-trees-card-link:hover,
.wu-trees-card-link:focus-visible {
    text-decoration: underline;
}

.wu-trees-card-link i {
    font-size: 12px;
}

/* Sections */
.wu-trees-section {
    margin: 0 0 52px;
}

.wu-trees-title,
.wu-trees-heading,
.wu-trees-why-statement {
    text-wrap: balance;
}

.wu-trees-heading {
    font-family: var(--wu-font-heading);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.wu-trees-heading + ul {
    margin-top: 18px;
}

.wu-trees-intro {
    max-width: 62ch;
    margin: 8px 0 22px;
    font-size: 17px;
    color: var(--wu-text-secondary);
}

/* What the CO2e is like */
.wu-trees-equivs,
.wu-trees-projects,
.wu-trees-footprint,
.wu-trees-help {
    list-style: none;
    display: grid;
    gap: 16px;
}

.wu-trees-equivs {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wu-trees-equiv {
    display: flex;
    flex-direction: column;
    padding: 22px 24px 24px;
    border-radius: 14px;
    background: var(--wu-bg-card);
    border: 1px solid var(--wu-border);
}

.wu-trees-equiv-icon,
.wu-trees-project-icon,
.wu-trees-footprint-icon,
.wu-trees-help-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--wu-tree-soft);
    color: var(--wu-tree);
    font-size: 18px;
}

.wu-trees-equiv-num {
    margin-top: 16px;
    font-family: var(--wu-font-heading);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.wu-trees-equiv-label {
    margin-top: 6px;
    font-weight: 600;
}

.wu-trees-equiv-note {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

/* Growing towards: bars beside the little forest */
.wu-trees-goals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 32px;
    border-radius: 18px;
    background: var(--wu-bg-card);
    border: 1px solid var(--wu-border);
}

.wu-trees-bar + .wu-trees-bar {
    margin-top: 18px;
}

.wu-trees-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--wu-text-secondary);
}

.wu-trees-bar-head strong {
    color: var(--wu-text);
}

.wu-trees-bar-track {
    height: 12px;
    border-radius: 999px;
    background: var(--wu-tree-soft);
    overflow: hidden;
}

.wu-trees-bar-track span {
    display: block;
    height: 100%;
    min-width: 12px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--wu-tree), var(--wu-tree-bright));
    animation: wu-trees-grow-bar 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transform-origin: left;
}

@keyframes wu-trees-grow-bar {
    from { transform: scaleX(0); }
}

.wu-trees-forest {
    margin: 0;
}

.wu-trees-forest-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px 6px;
    justify-items: center;
    font-size: 22px;
}

.wu-trees-forest-grid i {
    color: var(--wu-tree-line);
}

.wu-trees-forest-grid i.is-grown {
    color: var(--wu-tree-bright);
    animation: wu-trees-sprout 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
    animation-delay: calc(var(--i) * 18ms);
    transform-origin: bottom;
}

.wu-trees-forest-grid i.is-grown:nth-child(3n) {
    color: var(--wu-tree);
}

@keyframes wu-trees-sprout {
    from { transform: scale(0); opacity: 0; }
}

.wu-trees-forest figcaption {
    margin-top: 14px;
    font-size: 14px;
    text-align: center;
    color: var(--wu-text-secondary);
}

/* Where it goes */
.wu-trees-projects {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.wu-trees-project {
    display: flex;
    gap: 18px;
    padding: 24px;
    border-radius: 14px;
    background: var(--wu-bg-card);
    border: 1px solid var(--wu-border);
}

.wu-trees-project-kind {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wu-tree);
}

.wu-trees-project h3,
.wu-trees-footprint h3,
.wu-trees-help h3 {
    margin: 4px 0 6px;
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.wu-trees-project p:not(.wu-trees-project-kind),
.wu-trees-footprint p,
.wu-trees-help p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--wu-text-secondary);
}

/* Lighter by design */
.wu-trees-light {
    padding: 32px;
    border-radius: 18px;
    background: var(--wu-tree-soft);
}

.wu-trees-footprint {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.wu-trees-footprint li {
    padding: 22px;
    border-radius: 14px;
    background: var(--wu-bg-card);
}

.wu-trees-footprint h3 {
    margin-top: 14px;
    font-size: 18px;
}

/* Help it grow */
.wu-trees-help {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.wu-trees-help-card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 14px;
    background: var(--wu-bg-card);
    border: 1px solid var(--wu-border);
}

.wu-trees-help-card h3 {
    margin-top: 16px;
}

.wu-trees-help-card p {
    flex: 1;
    margin-bottom: 18px;
}

.wu-trees-help-card--main {
    background: linear-gradient(160deg, #1b7a43, #13552f);
    border-color: transparent;
    color: #fff;
}

.wu-trees-help-card--main p {
    color: rgba(255, 255, 255, 0.85);
}

.wu-trees-help-card--main .wu-trees-help-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.wu-trees-button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 999px;
    background: #fff;
    color: #13552f;
    font-size: 15px;
    font-weight: 700;
    transition: transform var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-trees-button:hover,
.wu-trees-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5);
}

.wu-trees-button--quiet {
    background: var(--wu-tree-soft);
    color: var(--wu-tree);
}

/* Why we do it: a statement beside the reasons */
.wu-trees-why {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
    padding: 36px 0;
    border-top: 1px solid var(--wu-border);
    border-bottom: 1px solid var(--wu-border);
}

.wu-trees-why-lede {
    position: sticky;
    top: 120px;
}

.wu-trees-why-statement {
    margin-top: 14px;
    font-family: var(--wu-font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--wu-tree);
}

.wu-trees-why-reasons {
    list-style: none;
    display: grid;
    gap: 22px;
}

.wu-trees-why-reasons li {
    display: flex;
    gap: 18px;
}

.wu-trees-why-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--wu-tree-soft);
    color: var(--wu-tree);
    font-size: 19px;
}

.wu-trees-why-reasons h3 {
    margin: 2px 0 4px;
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.wu-trees-why-reasons p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--wu-text-secondary);
}

/* Work with us: groups and green businesses */
.wu-trees-partner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 36px 40px;
    border-radius: 20px;
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, 0.1), transparent 60%),
        linear-gradient(150deg, #173f2b, #0f2a1d);
    color: #fff;
}

.wu-trees-eyebrow--light {
    color: #8fe0b0;
}

.wu-trees-partner .wu-trees-heading {
    color: #fff;
}

.wu-trees-partner-text p:not(.wu-trees-eyebrow) {
    max-width: 52ch;
    margin: 10px 0 22px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.wu-trees-partner-ideas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wu-trees-partner-ideas li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.wu-trees-partner-ideas i {
    color: #8fe0b0;
    font-size: 18px;
}

/* The small print */
.wu-trees-small {
    max-width: 80ch;
    font-size: 13px;
    color: var(--wu-text-secondary);
}

@media (max-width: 900px) {
    .wu-trees-hero,
    .wu-trees-goals,
    .wu-trees-why,
    .wu-trees-partner {
        grid-template-columns: 1fr;
    }

    .wu-trees-why {
        gap: 24px;
    }

    .wu-trees-why-lede {
        position: static;
    }
}

@media (max-width: 600px) {
    .wu-trees-hero {
        padding: 24px 20px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .wu-trees-title {
        font-size: 34px;
    }

    .wu-trees-lede {
        font-size: 17px;
    }

    .wu-trees-card {
        padding: 22px;
    }

    .wu-trees-big-num {
        font-size: 64px;
    }

    .wu-trees-heading {
        font-size: 25px;
    }

    .wu-trees-goals,
    .wu-trees-light,
    .wu-trees-partner {
        padding: 22px 18px;
    }

    .wu-trees-why-statement {
        font-size: 23px;
    }

    .wu-trees-partner-ideas li {
        padding: 14px;
    }

    .wu-trees-forest-grid {
        font-size: 18px;
    }

    .wu-trees-section {
        margin-bottom: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wu-trees-bar-track span,
    .wu-trees-forest-grid i.is-grown {
        animation: none;
    }
}

/* ==========================================================================
   Contact page (page-contact.php, assets/js/contact.js)
   ========================================================================== */

.wu-contact-head {
    max-width: 760px;
    margin: 0 0 28px;
}

.wu-contact-eyebrow {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wu-red);
}

.wu-contact-title {
    font-family: var(--wu-font-heading);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.wu-contact-lede {
    max-width: 60ch;
    margin-top: 10px;
    font-size: 19px;
    line-height: 1.55;
    color: var(--wu-text-secondary);
}

.wu-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px;
    align-items: start;
}

.wu-contact-form,
.wu-contact-done {
    border: 1px solid var(--wu-border);
    border-radius: 16px;
    background: var(--wu-bg);
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.35);
}

.wu-contact-form {
    position: relative;
    padding: 8px 32px 30px;
}

.wu-contact-form[hidden],
.wu-contact-done[hidden],
.wu-contact-field[hidden],
.wu-contact-note[hidden] {
    display: none;
}

/* Bots fill this in; people never see it */
.wu-contact-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Steps ---------- */
.wu-contact-step {
    min-width: 0;
    margin: 0;
    padding: 24px 0 26px;
    border: 0;
    border-bottom: 1px solid var(--wu-border-light);
}

.wu-contact-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    float: left;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 800;
}

.wu-contact-step-title + * {
    clear: both;
}

.wu-contact-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wu-red);
    color: #fff;
    font-family: var(--wu-font);
    font-size: 13px;
    font-weight: 700;
}

/* ---------- Topic buttons ---------- */
.wu-contact-topics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.wu-contact-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 13px;
    border: 1.5px solid var(--wu-border);
    border-radius: 12px;
    background: var(--wu-bg);
    cursor: pointer;
    transition: border-color var(--wu-transition), background var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-contact-topic:hover {
    border-color: var(--wu-text-tertiary);
}

.wu-contact-topic input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.wu-contact-topic:has(input:checked) {
    border-color: var(--wu-red);
    background: var(--wu-red-light);
    box-shadow: 0 0 0 1px var(--wu-red);
}

.wu-contact-topic:has(input:focus-visible) {
    outline: 2px solid var(--wu-red);
    outline-offset: 2px;
}

.wu-contact-topic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--wu-bg-alt);
    color: var(--wu-red);
    font-size: 15px;
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-contact-topic:has(input:checked) .wu-contact-topic-icon {
    background: var(--wu-red);
    color: #fff;
}

.wu-contact-topic-text strong {
    display: block;
    font-size: 15px;
    line-height: 1.3;
}

.wu-contact-topic-text span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--wu-text-secondary);
}

.wu-contact-note {
    display: flex;
    gap: 10px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--wu-bg-alt);
    font-size: 14px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

.wu-contact-note i {
    margin-top: 3px;
    color: var(--wu-red);
}

.wu-contact-note a {
    color: var(--wu-red);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Boxes ---------- */
.wu-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.wu-contact-grid:empty,
.wu-contact-grid:not(:has(> .wu-contact-field:not([hidden]))) {
    display: none;
}

.wu-contact-grid + .wu-contact-field,
.wu-contact-step > .wu-contact-field + .wu-contact-field {
    margin-top: 18px;
}

.wu-contact-field > label:not(.wu-contact-check):not(.wu-contact-drop),
.wu-contact-files-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.wu-contact-needed {
    color: var(--wu-red);
}

.wu-contact-optional {
    font-weight: 400;
    color: var(--wu-text-tertiary);
}

.wu-contact-optional[hidden] {
    display: none;
}

/* Which topics a box is for: only shown without JavaScript, when every box shows */
.wu-contact-for-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--wu-bg-alt);
    font-size: 11px;
    font-weight: 600;
    color: var(--wu-text-secondary);
    vertical-align: 1px;
}

.wu-contact-form.is-enhanced .wu-contact-for-tag {
    display: none;
}

.wu-contact-field input[type="text"],
.wu-contact-field input[type="email"],
.wu-contact-field input[type="tel"],
.wu-contact-field input[type="url"],
.wu-contact-field select,
.wu-contact-field textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 10px;
    background: var(--wu-bg);
    color: var(--wu-text);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-contact-field textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.6;
}

.wu-contact-field input::placeholder,
.wu-contact-field textarea::placeholder {
    color: var(--wu-text-tertiary);
}

.wu-contact-field input:hover,
.wu-contact-field select:hover,
.wu-contact-field textarea:hover {
    border-color: var(--wu-text-tertiary);
}

.wu-contact-field input:focus,
.wu-contact-field select:focus,
.wu-contact-field textarea:focus {
    outline: none;
    border-color: var(--wu-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}

.wu-contact-hint {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--wu-text-secondary);
}

.wu-contact-field--check {
    margin-top: 14px;
}

.wu-contact-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.45;
    cursor: pointer;
}

.wu-contact-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--wu-red);
}

/* ---------- Files ---------- */
.wu-contact-files {
    position: relative;
}

.wu-contact-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.wu-contact-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 18px;
    border: 2px dashed var(--wu-border);
    border-radius: 12px;
    background: var(--wu-bg-alt);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-contact-drop i {
    margin-bottom: 4px;
    font-size: 26px;
    color: var(--wu-red);
}

.wu-contact-drop-main {
    font-size: 15px;
}

.wu-contact-drop-main strong {
    color: var(--wu-red);
}

.wu-contact-drop-sub {
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-contact-drop[data-summary]::after {
    content: attr(data-summary);
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wu-text);
}

.wu-contact-drop:hover,
.wu-contact-drop.is-over {
    border-color: var(--wu-red);
    background: var(--wu-red-light);
}

.wu-contact-drop.is-invalid {
    border-color: var(--wu-red);
}

.wu-contact-files:has(.wu-contact-file-input:focus-visible) .wu-contact-drop {
    outline: 2px solid var(--wu-red);
    outline-offset: 2px;
}

.wu-contact-picked {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.wu-contact-picked[hidden] {
    display: none;
}

.wu-contact-picked li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 10px;
    border: 1px solid var(--wu-border);
    border-radius: 10px;
    background: var(--wu-bg);
}

.wu-contact-picked img,
.wu-contact-picked-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
}

.wu-contact-picked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wu-bg-alt);
    color: var(--wu-text-secondary);
    font-size: 18px;
}

.wu-contact-picked-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.wu-contact-picked-size {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--wu-text-secondary);
}

.wu-contact-picked-remove {
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--wu-text-secondary);
    font-size: 16px;
    cursor: pointer;
}

.wu-contact-picked-remove:hover,
.wu-contact-picked-remove:focus-visible {
    background: var(--wu-bg-alt);
    color: var(--wu-red);
}

/* ---------- Sending ---------- */
.wu-contact-status {
    margin: 20px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--wu-bg-alt);
    font-size: 15px;
    font-weight: 600;
}

.wu-contact-status.is-error {
    border-left: 4px solid var(--wu-red);
    background: var(--wu-red-light);
}

.wu-contact-status[hidden] {
    display: none;
}

.wu-contact-send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding-top: 24px;
}

.wu-contact-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border: 0;
    border-radius: 10px;
    background: var(--wu-red);
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--wu-transition), transform var(--wu-transition);
}

.wu-contact-button:hover {
    background: var(--wu-red-dark);
}

.wu-contact-button:focus-visible {
    outline: 2px solid var(--wu-red);
    outline-offset: 3px;
}

.wu-contact-button:disabled {
    opacity: 0.75;
    cursor: progress;
}

.wu-contact-progress {
    flex: 1 1 140px;
    height: 6px;
    border-radius: 999px;
    background: var(--wu-bg-alt);
    overflow: hidden;
}

.wu-contact-progress[hidden] {
    display: none;
}

.wu-contact-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--wu-red);
    transition: width 0.2s linear;
}

.wu-contact-privacy {
    flex-basis: 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

.wu-contact-privacy a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Sent ---------- */
.wu-contact-done {
    padding: 44px 36px;
    text-align: center;
}

.wu-contact-done:focus {
    outline: none;
}

.wu-contact-done-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(0, 166, 81, 0.14);
    color: var(--wu-green);
    font-size: 26px;
    animation: wu-nl-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.wu-contact-done h2 {
    margin-bottom: 10px;
    font-family: var(--wu-font-heading);
    font-size: 30px;
    font-weight: 800;
}

.wu-contact-done p {
    max-width: 48ch;
    margin: 0 auto 12px;
    color: var(--wu-text-secondary);
}

.wu-contact-done p[hidden] {
    display: none;
}

.wu-contact-done strong {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 8px;
    background: var(--wu-bg-alt);
    color: var(--wu-text);
    letter-spacing: 0.06em;
}

.wu-contact-again {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    color: var(--wu-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Side column ---------- */
.wu-contact-side {
    display: grid;
    gap: 16px;
}

.wu-contact-card {
    padding: 22px 22px 20px;
    border: 1px solid var(--wu-border);
    border-radius: 16px;
    background: var(--wu-bg);
}

.wu-contact-card h2 {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wu-red);
}

.wu-contact-desks,
.wu-contact-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wu-contact-desks li {
    padding: 10px 0;
    border-top: 1px solid var(--wu-border-light);
}

.wu-contact-desks li:first-child {
    padding-top: 0;
    border-top: 0;
}

.wu-contact-desk-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.wu-contact-desks a {
    display: inline-block;
    font-size: 15px;
    color: var(--wu-red);
    overflow-wrap: anywhere;
}

.wu-contact-desks a:hover {
    text-decoration: underline;
}

.wu-contact-desk-note {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wu-text-secondary);
}

.wu-contact-card--dark {
    border: 0;
    border-bottom: 4px solid var(--wu-red);
    background: #1e1e1e;
    color: #fff;
}

.wu-contact-card--dark h2 {
    color: var(--wu-red-on-dark);
}

.wu-contact-card--dark p {
    font-size: 15px;
    line-height: 1.55;
    color: #c4c4c4;
}

.wu-contact-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-weight: 700;
    color: #fff;
}

.wu-contact-card-link:hover {
    color: var(--wu-red-on-dark);
}

.wu-contact-links li + li {
    border-top: 1px solid var(--wu-border-light);
}

.wu-contact-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 600;
}

.wu-contact-links a i {
    font-size: 11px;
    color: var(--wu-text-tertiary);
}

.wu-contact-links a:hover {
    color: var(--wu-red);
}

.wu-contact-social {
    flex-wrap: wrap;
    gap: 6px;
}

.wu-contact-social a {
    width: 40px;
    height: 40px;
    background: var(--wu-bg-alt);
    font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .wu-contact-done-badge {
        animation: none;
    }

    .wu-contact-progress span {
        transition: none;
    }
}

@media (max-width: 960px) {
    .wu-contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .wu-contact-side {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 640px) {
    .wu-contact-title {
        font-size: 34px;
    }

    .wu-contact-lede {
        font-size: 17px;
    }

    .wu-contact-form {
        padding: 4px 18px 22px;
    }

    .wu-contact-topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wu-contact-topic {
        padding: 12px;
    }

    .wu-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wu-contact-button {
        justify-content: center;
        width: 100%;
    }

    .wu-contact-done {
        padding: 34px 20px;
    }
}

/* Newsletter confirm and unsubscribe pages (inc/subscriber-links.php):
   a card with a dark top like the footer signup, coloured by outcome */
/* Admin-only bar for switching between preview pages */
.wu-nl-preview {
    max-width: 640px;
    margin: 32px auto -24px;
    padding: 14px 18px;
    border: 1px dashed #b5b5b5;
    border-radius: 12px;
    background: var(--wu-bg);
    font-size: 14px;
}

.wu-nl-preview p {
    margin: 0 0 8px;
    color: var(--wu-text-secondary);
}

.wu-nl-preview strong {
    margin-right: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff3cd;
    color: #7a5b00;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wu-nl-preview ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wu-nl-preview a {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    color: var(--wu-text);
    text-decoration: none;
}

.wu-nl-preview a:hover {
    border-color: var(--wu-text);
}

.wu-nl-preview a[aria-current="page"] {
    background: var(--wu-text);
    border-color: var(--wu-text);
    color: #fff;
}

.wu-nl-card {
    --wu-nl-accent: var(--wu-red-on-dark);
    --wu-nl-rule: var(--wu-red);
    --wu-nl-badge-bg: color-mix(in srgb, var(--wu-red-on-dark) 16%, transparent);
    max-width: 640px;
    margin: 48px auto 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--wu-bg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 60px -24px rgba(0, 0, 0, 0.3);
}

.wu-nl-card--green {
    --wu-nl-accent: #3ccf7e;
    --wu-nl-rule: var(--wu-green);
    --wu-nl-badge-bg: rgba(60, 207, 126, 0.16);
}

.wu-nl-card--grey {
    --wu-nl-accent: #d0d0d0;
    --wu-nl-rule: #555;
    --wu-nl-badge-bg: rgba(255, 255, 255, 0.1);
}

.wu-nl-card-top {
    position: relative;
    overflow: hidden;
    padding: 40px 40px 34px;
    background: #1e1e1e;
    border-bottom: 4px solid var(--wu-nl-rule);
    color: #fff;
}

.wu-nl-card-plane {
    position: absolute;
    right: -30px;
    bottom: -60px;
    font-size: 230px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.045);
    transform: rotate(-14deg);
    pointer-events: none;
}

.wu-nl-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--wu-nl-badge-bg);
    color: var(--wu-nl-accent);
    font-size: 26px;
    animation: wu-nl-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes wu-nl-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wu-nl-badge {
        animation: none;
    }
}

.wu-nl-eyebrow {
    position: relative;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wu-nl-accent);
}

.wu-nl-title {
    position: relative;
    margin: 0 0 10px;
    font-family: var(--wu-font-heading);
    font-size: 38px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
}

.wu-nl-intro {
    position: relative;
    max-width: 46ch;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: #c4c4c4;
}

.wu-nl-card-body {
    padding: 30px 40px 32px;
}

.wu-nl-picks {
    margin: 0 0 28px;
    border: 1px solid var(--wu-border);
    border-radius: 14px;
}

.wu-nl-picks > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 20px;
}

.wu-nl-picks > div + div {
    border-top: 1px solid var(--wu-border-light);
}

.wu-nl-picks dt {
    font-size: 15px;
    color: var(--wu-text-secondary);
}

.wu-nl-picks dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.wu-nl-action {
    margin: 0 0 24px;
}

.wu-nl-action .wu-btn--subscribe {
    width: auto;
    min-height: 54px;
    padding: 0 30px;
    gap: 10px;
}

.wu-nl-action .wu-btn--subscribe i {
    font-size: 14px;
    transition: transform var(--wu-transition);
}

.wu-nl-action .wu-btn--subscribe:hover i {
    transform: translateX(3px);
}

/* Preferences form: light versions of the footer signup's chips and cards */
.wu-nl-prefs-switch {
    margin: 0 0 20px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff8e1;
    font-size: 15px;
    color: #6b4e00;
}

.wu-nl-prefs-group {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.wu-nl-prefs-group legend,
.wu-nl-prefs-label {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
}

.wu-nl-prefs-label span {
    font-weight: 400;
    color: var(--wu-text-secondary);
}

.wu-nl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wu-nl-chip,
.wu-nl-freq-option {
    position: relative;
    cursor: pointer;
}

.wu-nl-chip input,
.wu-nl-freq-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wu-nl-chip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px 0 12px;
    border: 1px solid #c9c9c9;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wu-text);
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-nl-chip span::before {
    content: '\f067';
    width: 14px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    text-align: center;
    color: var(--wu-text-secondary);
}

.wu-nl-chip:hover span {
    border-color: var(--wu-text);
}

.wu-nl-chip input:checked + span {
    border-color: var(--wu-red);
    background: var(--wu-red-light);
    color: var(--wu-red-dark);
}

.wu-nl-chip input:checked + span::before {
    content: '\f00c';
    color: var(--wu-red);
}

/* Courts on the preferences page: a hint, a heading for each kind of
   court, and "only these courts", which fades the areas and topics */
.wu-nl-prefs-hint {
    margin: -4px 0 12px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-nl-prefs-sub {
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

.wu-nl-prefs-only {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.wu-nl-prefs-only input {
    width: 18px;
    height: 18px;
    accent-color: var(--wu-red);
}

.wu-nl-prefs-only input:disabled + span {
    color: var(--wu-text-tertiary);
}

.wu-nl-prefs-group.is-off {
    opacity: 0.45;
}

.wu-nl-freq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wu-nl-freq-option > span {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px 14px 46px;
    border: 1px solid #c9c9c9;
    border-radius: 12px;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-nl-freq-option > span::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    margin-top: -9px;
    border: 2px solid #9a9a9a;
    border-radius: 50%;
    background: #fff;
}

.wu-nl-freq-option strong {
    font-size: 16px;
}

.wu-nl-freq-option small {
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-nl-freq-option input:checked + span {
    border-color: var(--wu-red);
    box-shadow: inset 0 0 0 1px var(--wu-red);
    background: var(--wu-red-light);
}

.wu-nl-freq-option input:checked + span::before {
    border: 5px solid var(--wu-red);
}

.wu-nl-chip input:focus-visible + span,
.wu-nl-freq-option input:focus-visible + span {
    outline: 2px solid var(--wu-text);
    outline-offset: 2px;
}

.wu-nl-prefs-input {
    width: 100%;
    max-width: 360px;
    height: 46px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
}

.wu-nl-prefs-input:focus {
    outline: none;
    border-color: var(--wu-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}

.wu-nl-prefs-email {
    margin: -8px 0 20px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

/* A note at the top of the card body, e.g. "already paused" */
.wu-nl-notice {
    margin: 0 0 22px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff8e1;
    font-size: 15px;
    color: #6b4e00;
}

/* Unsubscribe page: alternatives under the unsubscribe button */
.wu-nl-offer {
    margin: 0 0 28px;
}

.wu-nl-offer-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.wu-nl-offer-or::before,
.wu-nl-offer-or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--wu-border);
}

.wu-nl-offer-option {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 10px;
    padding: 16px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
}

.wu-nl-offer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f2f2f2;
    font-size: 16px;
}

.wu-nl-offer-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wu-nl-offer-text strong {
    font-size: 16px;
}

.wu-nl-offer-text > span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

.wu-nl-offer-text select {
    align-self: flex-start;
    margin-top: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    background: var(--wu-bg);
}

.wu-nl-offer-option button,
.wu-nl-offer-option > a,
.wu-nl-prefs-pause button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--wu-text);
    border-radius: 9px;
    background: var(--wu-bg);
    color: var(--wu-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.wu-nl-offer-option button:hover,
.wu-nl-offer-option > a:hover,
.wu-nl-prefs-pause button:hover {
    background: var(--wu-text);
    color: #fff;
}

/* After unsubscribing: optional reasons */
.wu-nl-reasons {
    margin: 0 0 28px;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--wu-border-light);
}

.wu-nl-reasons fieldset {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.wu-nl-reasons legend {
    padding: 0;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
}

.wu-nl-reasons legend span {
    font-weight: 400;
    color: var(--wu-text-secondary);
}

.wu-nl-reasons p {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-nl-chip--plain span::before {
    display: none;
}

.wu-nl-chip--plain span {
    padding: 0 16px;
}

.wu-nl-chip--plain input:checked + span {
    border-color: var(--wu-text);
    background: var(--wu-text);
    color: #fff;
}

.wu-nl-reasons-send {
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--wu-text);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.wu-nl-action-lead {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--wu-text-secondary);
}

/* Preferences page: pause or resume */
.wu-nl-prefs-pause {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px dashed #c9c9c9;
    border-radius: 12px;
}

.wu-nl-prefs-pause p {
    flex: 1 1 260px;
    margin: 0;
    font-size: 15px;
}

.wu-nl-prefs-pause select {
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    background: var(--wu-bg);
}

/* Optional first name, offered once subscribed */
.wu-nl-name {
    margin: 0 0 26px;
}

.wu-nl-name label {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.wu-nl-name label span {
    font-weight: 400;
    color: var(--wu-text-secondary);
}

.wu-nl-name-hint {
    margin: 2px 0 10px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-nl-name-row {
    display: flex;
    gap: 8px;
}

.wu-nl-name-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    color: var(--wu-text);
    background: var(--wu-bg);
    outline: none;
    transition: border-color var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-nl-name-row input:focus {
    border-color: var(--wu-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}

.wu-nl-name-row button {
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--wu-text);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--wu-transition);
}

.wu-nl-name-row button:hover {
    background: #000;
}

.wu-nl-name-row button:focus-visible {
    outline: 2px solid var(--wu-red);
    outline-offset: 2px;
}

.wu-nl-name-saved {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #00843f;
}

.wu-nl-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    font-size: 15px;
}

.wu-nl-links a {
    color: var(--wu-text-secondary);
    text-decoration: none;
}

.wu-nl-links a:hover {
    color: var(--wu-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-nl-links a:first-child {
    margin-right: auto;
}

.wu-nl-stories {
    margin-top: 56px;
}

@media (max-width: 600px) {
    .wu-nl-card {
        margin-top: 24px;
        border-radius: 16px;
    }

    .wu-nl-card-top {
        padding: 30px 22px 26px;
    }

    .wu-nl-title {
        font-size: 30px;
    }

    .wu-nl-card-body {
        padding: 24px 22px 26px;
    }

    .wu-nl-picks > div {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 12px 16px;
    }

    .wu-nl-action .wu-btn--subscribe {
        width: 100%;
    }

    .wu-nl-freq {
        grid-template-columns: 1fr;
    }

    .wu-nl-offer-option {
        flex-wrap: wrap;
    }

    .wu-nl-offer-option button,
    .wu-nl-offer-option > a {
        margin-left: 56px;
    }

    .wu-nl-stories {
        margin-top: 40px;
    }
}

/* ==========================================================================
   404
   ========================================================================== */

.wu-404 {
    text-align: center;
    padding: 80px 20px;
}

.wu-404 h1 {
    font-family: var(--wu-font-heading);
    font-size: 36px;
    margin-bottom: 12px;
}

.wu-404 p {
    font-size: 16px;
    color: var(--wu-text-secondary);
    margin-bottom: 24px;
}

.wu-btn {
    display: inline-block;
    background: var(--wu-red);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--wu-radius);
    font-size: 14px;
    font-weight: 600;
    transition: background var(--wu-transition);
}

.wu-btn:hover {
    background: var(--wu-red-dark);
}

/* ==========================================================================
   No Results
   ========================================================================== */

.wu-no-results {
    text-align: center;
    padding: 60px 20px;
}

.wu-no-results h2 {
    font-family: var(--wu-font-heading);
    font-size: 28px;
    margin-bottom: 12px;
}

.wu-no-results p {
    color: var(--wu-text-secondary);
    margin-bottom: 20px;
}

.wu-no-results p a {
    color: var(--wu-red);
    font-weight: 600;
}

.wu-no-results p a:hover {
    text-decoration: underline;
}

/* A search that finds nothing: "Did you mean", fewer words, courts and the
   latest stories (content-none.php) */
.wu-no-results-suggest {
    font-size: 18px;
    color: var(--wu-text) !important;
}

.wu-no-results-suggest a {
    font-family: var(--wu-font-heading);
    font-size: 22px;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.wu-no-results-suggest span {
    margin-left: 6px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-no-results-group {
    margin: 0 auto 24px;
}

.wu-no-results-group > h3,
.wu-no-results-latest > h3 {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

.wu-no-results-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
}

.wu-no-results-chips a {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    background: var(--wu-bg);
    font-size: 14px;
    font-weight: 500;
    color: var(--wu-text);
    transition: border-color var(--wu-transition), color var(--wu-transition);
}

.wu-no-results-chips a:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-no-results-chips span {
    margin-left: 4px;
    font-size: 12px;
    color: var(--wu-text-secondary);
}

.wu-no-results-latest {
    margin-top: 36px;
    text-align: left;
}

.wu-no-results-latest > h3 {
    text-align: center;
}

/* Search form (searchform.php): the header's rounded box, bigger, with a
   Search button */
.wu-searchform {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    min-height: 54px;
    margin: 0 auto;
    padding: 0 6px 0 18px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    transition: border-color var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-searchform:focus-within {
    border-color: var(--wu-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}

.wu-searchform > svg {
    flex-shrink: 0;
    color: var(--wu-text-tertiary);
}

.wu-searchform > input {
    flex: 1;
    min-width: 0;
    height: 50px;
    background: none;
    border: none;
    outline: none;
    font-family: var(--wu-font);
    font-size: 16px;
    color: var(--wu-text);
}

.wu-searchform > input::placeholder {
    color: var(--wu-text-tertiary);
}

.wu-searchform > button {
    flex-shrink: 0;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--wu-red);
    font-family: var(--wu-font);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background var(--wu-transition);
}

.wu-searchform > button:hover {
    background: var(--wu-red-dark);
}

@media (max-width: 480px) {
    .wu-searchform {
        padding-left: 14px;
    }

    .wu-searchform > svg {
        display: none;
    }

    .wu-searchform > button {
        padding: 0 16px;
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.wu-pagination {
    margin-top: 40px;
    text-align: center;
}

.wu-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.wu-pagination a,
.wu-pagination span {
    display: inline-block;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: var(--wu-radius);
    transition: all var(--wu-transition);
}

.wu-pagination a {
    color: var(--wu-text);
    border: 1px solid var(--wu-border);
}

.wu-pagination a:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-pagination .current {
    background: var(--wu-red);
    color: #fff;
    border: 1px solid var(--wu-red);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.wu-footer {
    background: var(--wu-text);
    color: #ccc;
    padding: 40px 0 0;
    margin-top: 48px;
}

.wu-footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Same height as the link columns: icons sit level with the last link */
.wu-footer-brand {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.wu-footer-desc {
    max-width: 300px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #999;
}

.wu-footer-brand .wu-footer-social {
    margin-top: auto;
}

.wu-footer-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.wu-footer-logo .wu-lockup-mark {
    color: var(--wu-red-on-dark);
}

.wu-footer-logo .wu-lockup-mark svg {
    height: 42px;
}

.wu-footer-logo .wu-lockup-text {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.wu-footer-logo .wu-lockup-name {
    color: #fff;
    font-size: 24px;
}

.wu-footer-logo .wu-lockup-tagline {
    color: #999;
    font-size: 10px;
}

.wu-footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wu-footer-nav a {
    font-size: 14px;
    color: #ccc;
    transition: color var(--wu-transition);
}

.wu-footer-nav a:hover {
    color: #fff;
}

.wu-footer-bottom {
    padding: 20px 0;
    font-size: 13px;
    color: #888;
}

/* ==========================================================================
   Widgets
   ========================================================================== */

.wu-widget {
    margin-bottom: 28px;
}

.wu-widget-title {
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--wu-red);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .wu-hero-link {
        grid-template-columns: 1fr;
    }

    /* A deeper box for a face when the picture sits above the text */
    .wu-hero-thumb--tall img {
        aspect-ratio: 4 / 3;
    }

    .wu-hero-body {
        padding: 20px;
    }

    .wu-hero-title {
        font-size: 24px;
    }

    .wu-post-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .wu-footer-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .wu-topbar {
        display: none;
    }

    .wu-search-box {
        display: none;
    }

    .wu-search-box.wu-search-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--wu-bg);
        padding: 12px 20px;
        border-bottom: 1px solid var(--wu-border);
        z-index: 99;
    }

    .wu-search-box.wu-search-open form {
        max-width: 100%;
    }

    .wu-search-box.wu-search-open input {
        width: 100%;
    }

    /* With search.js: the search fills the screen (back button, box,
       then the sections and results) */
    html.wu-search-locked {
        overflow: hidden;
    }

    .wu-search-box.wu-search-full.wu-search-open {
        position: fixed;
        inset: 0;
        z-index: 1000;
        padding: 0;
        border: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .wu-search-box.wu-search-full form {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
        background: var(--wu-bg);
        border: 0;
        border-radius: 0;
    }

    .wu-search-box.wu-search-full form > svg,
    .wu-search-box.wu-search-full .wu-search-token {
        display: none;
    }

    .wu-search-box.wu-search-full .wu-search-back {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--wu-text);
        cursor: pointer;
    }

    .wu-search-box.wu-search-full .wu-search-back svg {
        color: var(--wu-text);
    }

    .wu-search-box.wu-search-full input,
    .wu-search-box.wu-search-full input:focus {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 44px;
        padding: 0 16px;
        border: 1px solid var(--wu-red);
        border-radius: 24px;
        font-size: 16px;
    }

    .wu-search-box.wu-search-full .wu-search-panel {
        display: block;
        position: static;
        flex-basis: 100%;
        width: auto;
        min-width: 0;
        max-height: none;
        margin: 4px -12px -10px;
        overflow: visible;
        border: 0;
        border-top: 1px solid var(--wu-border-light);
        border-radius: 0;
        box-shadow: none;
    }

    /* Sections as one row that scrolls sideways */
    .wu-search-full .wu-sp-scopes .wu-sp-heading {
        display: none;
    }

    .wu-search-full .wu-sp-scopes .wu-sp-chips {
        flex-wrap: nowrap;
        margin: 0 -18px;
        padding: 0 18px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .wu-search-full .wu-sp-scopes .wu-sp-chips::-webkit-scrollbar {
        display: none;
    }

    .wu-search-full .wu-sp-chip {
        padding: 9px 14px;
    }

    .wu-search-full .wu-sp-thumb {
        width: 64px;
        height: 64px;
    }

    .wu-search-full .wu-sp-all {
        justify-content: center;
        margin: 16px;
        border-top: 0;
        border-radius: 24px;
        background: var(--wu-red);
        color: #fff;
        font-size: 15px;
    }

    .wu-search-full .wu-sp-all:hover,
    .wu-search-full .wu-sp-all.is-active {
        background: var(--wu-red-dark);
        color: #fff;
    }

    .wu-search-full .wu-sp-keys,
    .wu-search-query .wu-sp-keys {
        display: none;
    }

    .wu-search-toggle {
        display: flex;
    }

    .wu-header-actions {
        gap: 4px;
    }

    .wu-header-actions > .wu-header-cta {
        display: none;
    }

    .wu-header-inner {
        min-height: 64px;
    }

    .wu-logo .wu-lockup {
        gap: 10px;
    }

    .wu-logo .wu-lockup-mark svg {
        height: 32px;
    }

    .wu-logo .wu-lockup-text {
        padding-left: 10px;
    }

    .wu-logo .wu-lockup-name {
        font-size: 22px;
    }

    .wu-logo .wu-lockup-tagline {
        display: none;
    }

    /* The whole bar stays pinned, with or without JS */
    .wu-header,
    .wu-header.wu-header-sticky {
        position: sticky;
        top: var(--wu-admin-bar);
    }

    html {
        scroll-padding-top: 80px;
    }

    .wu-trending-items {
        overflow-x: auto;
    }

    .wu-article-title {
        font-size: 30px;
    }

    /* On phones the white sheet is the whole page */
    .single-post .wu-main {
        padding-top: 20px;
        background: var(--wu-bg);
    }

    .wu-article {
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .wu-article-standfirst {
        font-size: 17px;
    }

    .wu-article-featured {
        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0;
    }

    /* The picture runs edge to edge on phones; the caption keeps to the text */
    .wu-article-featured figcaption {
        margin-left: 20px;
        margin-right: 20px;
    }

    /* A deeper box on phones, where 2:1 would leave a face too small */
    .wu-article-featured-frame {
        aspect-ratio: 4 / 3;
    }

    .wu-article-tags a {
        background: var(--wu-search-bg);
    }

    .wu-post-grid,
    .wu-post-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .wu-logo .wu-lockup-mark svg {
        height: 28px;
    }

    .wu-logo .wu-lockup-name {
        font-size: 20px;
    }

    .wu-hero-body {
        padding: 16px;
    }

    .wu-hero-title {
        font-size: 20px;
    }

    .wu-card-body {
        padding: 14px 16px 16px;
    }

    .wu-article-title {
        font-size: 26px;
    }
}

/* ==========================================================================
   Footer — Mega Footer
   ========================================================================== */

.wu-footer {
    background: #1e1e1e;
    color: #ccc;
    margin-top: 0;
    padding: 0;
}

/* ---------- Live Dot Animation ---------- */
@keyframes wu-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

@keyframes wu-ping {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes wu-stat-flash {
    0% { background: rgba(0, 166, 81, 0.15); }
    100% { background: transparent; }
}

.wu-stat-updated {
    animation: wu-stat-flash 1.5s ease-out;
}

.wu-stat-updated .wu-footer-stat-num {
    color: var(--wu-green);
    transition: color 1.5s ease-out;
}

.wu-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--wu-green);
    border-radius: 50%;
    position: relative;
    animation: wu-pulse 2s ease-in-out infinite;
}

.wu-live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wu-green);
    animation: wu-ping 2s ease-out infinite;
}

.wu-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wu-green);
}

/* ---------- Footer Nav Bar ---------- */
.wu-footer-nav-bar {
    padding: 44px 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand, link columns and stats card share one row when they fit. The
   columns never shrink below their text, so if the row is too tight (larger
   text, wider fonts, more links) the stats card moves to its own row below
   instead of the columns running over it. */
.wu-footer-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

/* Takes the row's spare space, so the stats card stays at its own width
   beside it but fills the row when it wraps below */
.wu-footer-nav-columns {
    display: flex;
    gap: clamp(24px, 2.8vw, 48px);
    flex: 999 1 auto;
}

.wu-footer-col-heading {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    padding: 0;
    letter-spacing: -0.2px;
}

.wu-footer-col-heading a {
    color: inherit;
    transition: color var(--wu-transition);
}

/* Gavel, scales or newspaper before the column name */
.wu-footer-col-icon {
    font-size: 12px;
    color: var(--wu-red-on-dark-soft);
    margin-right: 8px;
    opacity: 0.85;
}

.wu-footer-col-heading a:hover {
    color: var(--wu-red);
}

.wu-footer-col-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-footer-col-list > li > a {
    display: block;
    white-space: nowrap;
    padding: 3px 0;
    font-size: 14px;
    color: #aaa;
    transition: color var(--wu-transition);
}

.wu-footer-col-list > li > a:hover {
    color: #fff;
}

/* Phones only (see the 768px rules) */
.wu-footer-col-toggle,
.wu-footer-col-all {
    display: none;
}

/* "+7 more" links to the court type's page */
.wu-footer-col-list > li.wu-footer-col-more > a {
    color: var(--wu-red-on-dark-soft);
}

.wu-footer-col-list > li.wu-footer-col-more > a:hover {
    color: #fff;
}

.wu-footer-col-more i {
    font-size: 11px;
    margin-left: 2px;
}

/* ---------- Footer Stats ---------- */
/* Stretches to the link columns' height so the box starts and ends level with them */
/* "By the numbers" card: a fixed width so long numbers never push it past
   the edge, stretched to the link columns' height */
.wu-footer-stats-wrap {
    position: relative;
    flex: 1 1 340px;
    min-width: 290px;
    container-type: inline-size;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
}

/* A short red streak that runs round the card's border. The ring is a
   rotating conic gradient masked down to the 1px border. */
@property --wu-border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.wu-footer-stats-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--wu-border-angle), transparent 0 72%, color-mix(in srgb, var(--wu-red) 40%, transparent) 84%, var(--wu-red-on-dark) 94%, #fff 96%, transparent 97%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: wu-border-spin 14s linear infinite;
    pointer-events: none;
}

@keyframes wu-border-spin {
    to {
        --wu-border-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wu-footer-stats-wrap::before {
        display: none;
    }
}

.wu-footer-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wu-footer-stats-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.wu-footer-stats {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 0;
}

.wu-footer-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

/* Keeps link hover backgrounds inside the card's rounded corners */
.wu-footer-stat:nth-last-child(2):nth-child(odd) {
    border-bottom-left-radius: 10px;
}

.wu-footer-stat:last-child {
    border-bottom-right-radius: 10px;
}

/* Large faded icon cropped at the cell's corner. Its own clipped layer, so
   the change badge's tooltip isn't clipped with it. */
.wu-footer-stat-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.wu-footer-stat-icon {
    position: absolute;
    right: -6px;
    bottom: -10px;
    font-size: 54px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
}

/* The number and label sit above the icon */
.wu-footer-stat-num,
.wu-footer-stat-label {
    position: relative;
}

.wu-footer-stat--link {
    text-decoration: none;
    transition: background var(--wu-transition);
}

.wu-footer-stat--link:hover {
    background: rgba(255, 255, 255, 0.04);
}

.wu-footer-stat--link:hover .wu-footer-stat-label {
    color: #bbb;
}

.wu-footer-stat:nth-child(2n) {
    border-right: none;
}

.wu-footer-stat:nth-last-child(-n+2) {
    border-bottom: none;
}

/* A long change badge drops below the number rather than widening the card */
.wu-footer-stat-num {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.wu-footer-stat-label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.wu-footer-stat-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    position: relative;
    cursor: default;
}

.wu-footer-stat-change i {
    font-size: 8px;
}

.wu-footer-stat-change--up {
    color: var(--wu-green);
    background: rgba(0, 166, 81, 0.12);
}

.wu-footer-stat-change::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #444;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.wu-footer-stat-change:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Newsletter Signup ---------- */
.wu-footer-newsletter {
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wu-footer-newsletter-plugin {
    color: #ccc;
}

/* Signup card: intro on the left, the numbered steps on the right */
.wu-footer-newsletter-inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 64px;
    padding: 40px 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

/* Large faded paper plane cropped at the card's bottom left, behind the intro */
.wu-footer-newsletter-bg {
    position: absolute;
    left: -40px;
    bottom: -70px;
    font-size: 280px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.035);
    transform: rotate(-14deg);
    pointer-events: none;
}

.wu-footer-newsletter-text,
.wu-footer-newsletter-signup {
    position: relative;
}

.wu-footer-newsletter-text {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #ccc;
}

.wu-footer-newsletter-text strong {
    display: block;
    font-family: var(--wu-font-heading);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
}

.wu-footer-newsletter-desc {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    color: #bbb;
}

/* Live recap of the visitor's picks, kept up to date by navigation.js */
.wu-newsletter-summary {
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.wu-newsletter-summary[hidden] {
    display: none;
}

.wu-newsletter-summary-label {
    margin: 0;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a8a8a8;
}

.wu-newsletter-summary-list {
    margin: 0;
    padding: 4px 18px;
}

.wu-newsletter-summary-list > div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    line-height: 1.45;
}

.wu-newsletter-summary-list > div + div {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wu-newsletter-summary-list dt {
    color: #a8a8a8;
}

.wu-newsletter-summary-list dd {
    margin: 0;
    color: #fff;
    overflow-wrap: anywhere;
}

.wu-newsletter-summary-list dd.is-empty {
    color: #8f8f8f;
}

.wu-newsletter-summary-recent {
    margin: 0;
    padding: 13px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 14px;
    line-height: 1.5;
    color: #ccc;
}

.wu-newsletter-summary-recent a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-footer-newsletter-signup {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wu-footer-newsletter-message {
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.wu-footer-newsletter-message.is-success {
    color: var(--wu-green);
}

.wu-footer-newsletter-message.is-error {
    color: var(--wu-red-on-dark-soft);
}

/* Hidden field that only bots fill in */
.wu-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wu-footer-newsletter-note {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: #a8a8a8;
}

.wu-footer-newsletter-note i {
    margin-right: 6px;
    font-size: 12px;
    color: var(--wu-green);
}

.wu-footer-newsletter-note a {
    color: #ddd;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-footer-newsletter-note a:hover {
    color: #fff;
}

.wu-footer-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Each numbered step: topics, how often, email */
.wu-newsletter-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.wu-newsletter-step-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

/* A <legend> ignores the fieldset's gap, so labels carry the spacing */
.wu-newsletter-step--email .wu-newsletter-step-label {
    margin-bottom: 0;
}

.wu-newsletter-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
}

/* Areas and Topics inside step 1. "All" is ticked until something more specific is */
.wu-newsletter-group {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.wu-newsletter-group + .wu-newsletter-group {
    margin-top: 6px;
}

.wu-newsletter-group-label {
    padding: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #bbb;
}

/* Area and topic chips: "+" when off, a tick and red outline when on */
.wu-newsletter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wu-newsletter-chip,
.wu-newsletter-freq-option {
    position: relative;
    cursor: pointer;
}

.wu-newsletter-chip input,
.wu-newsletter-freq-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wu-newsletter-chip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: #ddd;
    transition: border-color var(--wu-transition), background var(--wu-transition), color var(--wu-transition);
}

.wu-newsletter-chip span::before {
    content: '\f067';
    width: 14px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    text-align: center;
}

.wu-newsletter-chip:hover span {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.wu-newsletter-chip input:checked + span {
    background: color-mix(in srgb, var(--wu-red-on-dark) 16%, transparent);
    border-color: var(--wu-red-on-dark);
    color: #fff;
}

.wu-newsletter-chip input:checked + span::before {
    content: '\f00c';
}

/* How often: two cards with a radio dot and a one-line description */
.wu-newsletter-freq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wu-newsletter-freq-option > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px 14px 48px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    position: relative;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-newsletter-freq-option > span::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    margin-top: -10px;
    border: 2px solid #777;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    transition: border var(--wu-transition);
}

.wu-newsletter-freq-option strong {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.wu-newsletter-freq-option small {
    font-size: 14px;
    color: #bbb;
}

.wu-newsletter-freq-option:hover > span {
    border-color: rgba(255, 255, 255, 0.4);
}

.wu-newsletter-freq-option input:checked + span {
    border-color: var(--wu-red-on-dark);
    box-shadow: inset 0 0 0 1px var(--wu-red-on-dark);
    background: color-mix(in srgb, var(--wu-red-on-dark) 10%, transparent);
}

.wu-newsletter-freq-option input:checked + span::before {
    border: 6px solid var(--wu-red-on-dark);
}

.wu-newsletter-chip input:focus-visible + span,
.wu-newsletter-freq-option input:focus-visible + span {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wu-footer-newsletter-form input[type="email"] {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 16px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    font-family: var(--wu-font);
    font-size: 16px;
    color: #fff;
    outline: none;
    transition: border-color var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-footer-newsletter-form input[type="email"]::placeholder {
    color: #8f8f8f;
}

.wu-footer-newsletter-form input[type="email"]:focus {
    border-color: var(--wu-red-on-dark);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wu-red-on-dark) 25%, transparent);
}

.wu-btn--subscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    padding: 12px 20px;
    background: var(--wu-red);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--wu-font);
    font-size: 17px;
    font-weight: 700;
    transition: background var(--wu-transition);
}

.wu-btn--subscribe:hover {
    background: var(--wu-red-dark);
}

.wu-btn--subscribe:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wu-btn--subscribe:disabled {
    cursor: wait;
}

/* Locked once the visitor is on the list: just the email box and a green button */
.wu-footer-newsletter-form.is-done .wu-newsletter-prefs,
.wu-footer-newsletter-form.is-done .wu-newsletter-step-label {
    display: none;
}

.wu-footer-newsletter-form.is-done input[type="email"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.wu-footer-newsletter-form.is-done .wu-btn--subscribe {
    background: var(--wu-green);
    cursor: default;
}

/* Phones and upright tablets (up to 900px, where the form is one column): one
   page at a time, with Back, "Step 2 of 4" and Next. navigation.js adds
   .is-stepped (and .is-last-step, when the recap shows) to the box */
.wu-newsletter-progress,
.wu-newsletter-next {
    display: none;
}

.is-stepped .wu-newsletter-progress {
    display: block;
}

.is-stepped .wu-newsletter-step:not(.is-current),
.is-stepped .wu-newsletter-group.is-off-step,
.is-stepped:not(.is-last-step) .wu-newsletter-summary,
.is-stepped .wu-newsletter-step-num,
.is-stepped .wu-newsletter-summary-list > div:has([data-wu-summary-for="email"]) {
    display: none;
}

/* Areas and Topics are pages of their own, so the gap between them goes */
.is-stepped .wu-newsletter-group + .wu-newsletter-group {
    margin-top: 0;
}

.is-stepped .wu-newsletter-step:focus,
.is-stepped .wu-newsletter-group:focus {
    outline: none;
}

.wu-newsletter-progress-row {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 10px;
}

.wu-newsletter-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--wu-font);
    font-size: 15px;
    font-weight: 600;
    color: #ddd;
    cursor: pointer;
}

.wu-newsletter-back[hidden] {
    display: none;
}

.wu-newsletter-back:hover {
    color: #fff;
}

.wu-newsletter-back:focus-visible,
.wu-newsletter-next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wu-newsletter-progress-text {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #a8a8a8;
}

.wu-newsletter-progress-bar {
    display: flex;
    gap: 4px;
}

.wu-newsletter-progress-bar span {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    transition: background var(--wu-transition);
}

.wu-newsletter-progress-bar span.is-done {
    background: var(--wu-red-on-dark);
}

.is-stepped .wu-newsletter-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 10px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--wu-font);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.is-stepped .wu-newsletter-next:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Newsletter pop-up, opened from the header: the signup card above, moved in
   while it's open (navigation.js). The body scrolls; the close button stays put */
.wu-newsletter-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto; /* centres it; the reset at the top of this file removes the browser's own */
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #1e1e1e;
    color: #ccc;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.wu-newsletter-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: wu-pref-in 0.2s ease-out;
}

.wu-newsletter-dialog::backdrop {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(2px);
}

.wu-newsletter-dialog-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wu-newsletter-dialog .wu-footer-newsletter-inner {
    border: 0;
    border-radius: 0;
}

.wu-newsletter-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ddd;
    font-size: 17px;
    cursor: pointer;
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-newsletter-dialog-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* The page behind doesn't scroll while it's open */
html.wu-modal-open {
    overflow: hidden;
}

/* Phones: fills the screen */
@media (max-width: 600px) {
    .wu-newsletter-dialog {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

/* ---------- Footer Stories ---------- */
.wu-footer-stories {
    padding: 28px 0 32px;
}

.wu-footer-stories-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wu-footer-stories-title {
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}


.wu-footer-stories-inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: stretch;
}

.wu-footer-stories-inner--full {
    grid-template-columns: 1fr;
}

.wu-footer-featured {
    height: 100%;
}

/* Featured story */
.wu-footer-featured-link {
    display: block;
    position: relative;
    border-radius: var(--wu-radius);
    overflow: hidden;
    height: 100%;
    min-height: 420px;
}

.wu-footer-featured-thumb {
    position: absolute;
    inset: 0;
}

/* A darkened, softened copy of the image fills the space around the
   uncropped photo, as on the story page (.wu-article-featured-frame) */
.wu-footer-featured-thumb::before,
.wu-footer-post-thumb::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: var(--wu-thumb-bg) center / cover no-repeat;
    filter: blur(5px) brightness(0.45);
}

.wu-footer-featured-thumb img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

/* Photos close to the box's shape fill it (set by footer-images.js).
   Trim more from the bottom so faces and heads stay in view. */
.wu-footer-featured-thumb img.wu-img-cover,
.wu-footer-post-thumb img.wu-img-cover {
    object-fit: cover;
    object-position: center 25%;
}

.wu-footer-featured-link:hover .wu-footer-featured-thumb img {
    transform: scale(1.03);
}

.wu-footer-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 60%),
                linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 25%);
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.wu-footer-featured-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--wu-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 999px;
}

.wu-footer-featured-badge i {
    font-size: 9px;
}

.wu-footer-post-meta.wu-footer-featured-meta {
    margin-top: auto;
    margin-bottom: 10px;
}

/* Label sits on a photo, so it needs a shadow to stay readable */
.wu-footer-featured-meta .wu-footer-post-cat {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.wu-footer-featured-meta .wu-footer-post-date {
    color: rgba(255,255,255,0.8);
}

.wu-footer-featured-meta .wu-footer-post-date::before {
    color: rgba(255,255,255,0.5);
}

.wu-footer-featured-title {
    font-family: var(--wu-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

/* Recent posts grid */
.wu-footer-recent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-content: start;
}

.wu-footer-post {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background var(--wu-transition);
    border-radius: 6px;
}

.wu-footer-post:hover {
    background: rgba(255,255,255,0.035);
}

/* No separator under the last row: the section border follows */
.wu-footer-post:last-child,
.wu-footer-post:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.wu-footer-post-thumb {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #2a2a2a;
    overflow: hidden;
    flex-shrink: 0;
}

.wu-footer-post-thumb::before {
    filter: blur(6px) brightness(0.55);
}

.wu-footer-post-thumb img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.wu-footer-post:hover .wu-footer-post-thumb img {
    transform: scale(1.06);
}

.wu-footer-post-thumb--empty {
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 18px;
}

.wu-footer-post-body {
    flex: 1;
    min-width: 0;
}

/* "Cardiff Crown Court · 2 hours ago" */
.wu-footer-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin-bottom: 6px;
}

.wu-footer-post-cat {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--wu-red-on-dark-soft);
    white-space: nowrap;
}

.wu-footer-post-date {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #8a8a8a;
}

.wu-footer-post-cat + .wu-footer-post-date::before {
    content: '\00B7';
    margin: 0 7px;
    color: #555;
}

.wu-footer-post-title {
    font-size: 14px;
    font-weight: 600;
    color: #ddd;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--wu-transition);
}

.wu-footer-post:hover .wu-footer-post-title {
    color: var(--wu-red-on-dark-soft);
}

/* Pager: ‹ Page 2 › in the section header */
.wu-footer-stories-header {
    align-items: center;
}

.wu-footer-pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wu-footer-stories-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.wu-footer-stories-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wu-red-on-dark-soft);
    white-space: nowrap;
    transition: color var(--wu-transition);
}

.wu-footer-stories-all i {
    font-size: 11px;
    transition: transform var(--wu-transition);
}

.wu-footer-stories-all:hover {
    color: #fff;
}

.wu-footer-stories-all:hover i {
    transform: translateX(2px);
}

.wu-footer-pager[hidden] {
    display: none;
}

.wu-footer-pager-latest {
    background: none;
    border: none;
    color: var(--wu-red-on-dark-soft);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 6px 0 0;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity var(--wu-transition);
}

.wu-footer-pager-latest[hidden] {
    display: none;
}

.wu-footer-pager-latest:hover {
    opacity: 0.8;
}

.wu-footer-pager-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    min-width: 52px;
    text-align: center;
}

.wu-footer-pager-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: none;
    color: #ddd;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--wu-transition), color var(--wu-transition), opacity var(--wu-transition);
}

.wu-footer-pager-btn:hover:not(:disabled) {
    border-color: var(--wu-red-on-dark-soft);
    color: var(--wu-red-on-dark-soft);
}

.wu-footer-pager-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Slide between pages */
.wu-footer-recent-wrap {
    overflow: hidden;
}

.wu-footer-recent {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.wu-footer-recent.is-out-left {
    transform: translateX(-40px);
    opacity: 0;
}

.wu-footer-recent.is-out-right {
    transform: translateX(40px);
    opacity: 0;
}

.wu-footer-recent.is-busy {
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    .wu-footer-recent {
        transition: none;
    }
}

/* ---------- Footer Bottom Bar ---------- */
.wu-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 0;
}

.wu-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wu-footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.wu-footer-bottom-left p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.wu-footer-prefs {
    display: flex;
    align-items: center;
    gap: 4px 16px;
    flex-wrap: wrap;
}

.wu-footer-pref-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    transition: color var(--wu-transition);
}

.wu-footer-pref-btn i {
    font-size: 12px;
    color: #777;
    transition: color var(--wu-transition);
}

.wu-footer-pref-btn:hover,
.wu-footer-pref-btn:hover i {
    color: #fff;
}

.wu-footer-bottom-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.wu-footer-story-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wu-red-on-dark-soft);
    transition: color var(--wu-transition);
}

.wu-footer-story-link:hover {
    color: #fff;
}

.wu-footer-legal-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 0;
    margin: 0;
}

.wu-footer-legal-nav a,
.wu-footer-legal-nav li a {
    font-size: 13px;
    color: #999;
    transition: color var(--wu-transition);
}

.wu-footer-legal-nav a:hover,
.wu-footer-legal-nav li a:hover {
    color: #fff;
}

.wu-footer-legal-nav li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wu-footer-legal-nav li + li::before {
    content: '\00B7';
    color: #555;
}

.wu-footer-legal-sep {
    color: #555;
}

.wu-footer-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wu-footer-social-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a8a8a;
}

.wu-footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 40px round buttons that take on each network's colour on hover */
.wu-footer-social a {
    --wu-brand: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #bbb;
    font-size: 16px;
    transition: background var(--wu-transition), border-color var(--wu-transition), color var(--wu-transition), transform var(--wu-transition);
}

.wu-footer-social a:hover,
.wu-footer-social a:focus-visible {
    background: var(--wu-brand);
    border-color: var(--wu-brand);
    color: #fff;
    transform: translateY(-2px);
}

.wu-footer-social .wu-social--facebook  { --wu-brand: #1877f2; }
.wu-footer-social .wu-social--x         { --wu-brand: #000; }
.wu-footer-social .wu-social--tiktok    { --wu-brand: #000; }
.wu-footer-social .wu-social--youtube   { --wu-brand: #ff0033; }
.wu-footer-social .wu-social--instagram { --wu-brand: #d62976; }
.wu-footer-social .wu-social--whatsapp  { --wu-brand: #25d366; }
.wu-footer-social .wu-social--bluesky   { --wu-brand: #1185fe; }
.wu-footer-social .wu-social--rss       { --wu-brand: #f26522; }

.wu-footer-social .wu-social--x:hover,
.wu-footer-social .wu-social--tiktok:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.wu-footer-social .wu-social--instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.wu-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--wu-red);
    color: #fff;
    border-radius: 22px;
    font-size: 16px;
    padding: 0 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease, gap 0.25s ease, padding 0.25s ease;
    text-decoration: none;
}

.wu-back-to-top.wu-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wu-back-to-top-label {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}

.wu-back-to-top:hover {
    background: var(--wu-red-dark);
    gap: 8px;
    padding: 0 20px 0 14px;
}

.wu-back-to-top:hover .wu-back-to-top-label {
    max-width: 160px;
    opacity: 1;
}

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

/* A stats card wide enough (on its own row) shows its figures in one row,
   rather than a stretched 2x2 box */
@container (min-width: 640px) {
    .wu-footer-stats {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .wu-footer-stat:nth-child(n) {
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: none;
    }

    .wu-footer-stat:nth-child(n):last-child {
        border-right: none;
    }

    .wu-footer-stat:nth-child(n):not(:first-child) {
        border-bottom-left-radius: 0;
    }

    .wu-footer-stat:first-child {
        border-bottom-left-radius: 10px;
    }
}

/* The brand on its own row (tablets, when the link columns sit under it):
   logo, blurb and social icons centred above them */
@container wu-brand (min-width: 560px) {
    .wu-footer-logo,
    .wu-footer-social {
        align-self: center;
    }

    .wu-footer-desc {
        align-self: center;
        text-align: center;
    }

    .wu-footer-social {
        align-items: center;
    }

    .wu-footer-social-icons {
        justify-content: center;
    }
}

/* Small laptops and tablets: the stats card always spans its own row */
@media (min-width: 769px) and (max-width: 1200px) {
    /* The three link columns stay together beside the brand, spread out
       with the last one level with the stats card's right edge. If they
       don't fit there (larger or wider text), all three move to their own
       row under the brand rather than leaving one stranded below it. */
    .wu-footer-nav-inner {
        column-gap: clamp(32px, 5vw, 60px);
    }

    .wu-footer-nav-columns {
        justify-content: space-between;
    }

    /* The brand keeps a set width beside the columns, but fills the row
       when the columns have moved under it, and its contents then centre
       (the container query below) */
    .wu-footer-brand {
        flex: 1 0 330px;
        container: wu-brand / inline-size;
    }

    .wu-footer-stats-wrap {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .wu-footer-stories-inner {
        grid-template-columns: 280px 1fr;
    }

    .wu-footer-nav-columns {
        gap: 32px;
    }

    .wu-footer-newsletter-inner {
        gap: 40px;
    }

    .wu-footer-newsletter-text {
        flex-basis: 280px;
    }
}

@media (max-width: 900px) {
    .wu-footer-nav-bar {
        padding-top: 36px;
    }

    .wu-footer-stories-inner {
        grid-template-columns: 1fr;
    }

    .wu-footer-featured-link {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .wu-footer-newsletter-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 28px 24px;
    }

    .wu-footer-newsletter-text {
        flex-basis: auto;
    }

    /* Plane moves to the top right, clear of the form below the intro */
    .wu-footer-newsletter-bg {
        left: auto;
        right: -30px;
        top: -30px;
        bottom: auto;
        font-size: 170px;
    }
}

@media (max-width: 768px) {
    .wu-footer-nav-inner {
        flex-direction: column;
    }

    .wu-footer-stats-wrap {
        flex-basis: auto;
        min-width: 100%;
    }

    .wu-footer-nav-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 20px;
    }

    /* Each column collapses behind its heading once navigation.js runs */
    .wu-footer-nav-columns.wu-footer-accordion {
        display: block;
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle .wu-footer-col-heading {
        margin: 0;
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle .wu-footer-col-heading > a,
    .wu-footer-accordion .wu-footer-nav-col--toggle .wu-footer-col-heading > span {
        display: none;
    }

    .wu-footer-accordion .wu-footer-col-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 0;
        background: none;
        border: 0;
        color: #fff;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .wu-footer-accordion .wu-footer-col-toggle > i {
        font-size: 12px;
        color: #777;
        transition: transform var(--wu-transition);
    }

    .wu-footer-accordion .is-open .wu-footer-col-toggle > i {
        transform: rotate(180deg);
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle .wu-footer-col-list {
        display: none;
        padding-bottom: 10px;
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle.is-open .wu-footer-col-list {
        display: block;
    }

    .wu-footer-accordion .wu-footer-col-list > li > a {
        padding: 8px 0;
    }

    .wu-footer-accordion .wu-footer-col-all {
        display: list-item;
    }

    .wu-footer-accordion .wu-footer-col-all a {
        color: var(--wu-red-on-dark-soft);
    }

    .wu-footer-recent {
        grid-template-columns: 1fr;
    }

    .wu-footer-post:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .wu-footer-bottom-inner {
        flex-direction: column;
        gap: 8px;
        align-items: center;
        text-align: center;
    }

    .wu-footer-bottom-left {
        flex-direction: column;
        gap: 6px;
    }

    .wu-footer-bottom-left p {
        margin-bottom: 2px;
    }

    .wu-footer-legal-nav {
        justify-content: center;
    }

    .wu-footer-bottom-right {
        justify-content: center;
    }

    .wu-back-to-top {
        bottom: 16px;
        right: 16px;
        height: 40px;
        font-size: 14px;
        padding: 0 13px;
    }

    .wu-back-to-top-label {
        font-size: 11px;
    }

    .wu-footer-stat-change::after {
        display: none;
    }

    /* Logo, blurb and social icons centred above the link accordion */
    .wu-footer-brand {
        align-items: center;
        text-align: center;
    }

    .wu-footer-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .wu-footer-brand .wu-footer-social {
        align-items: center;
        margin-bottom: 24px;
    }

    .wu-footer-social-icons {
        justify-content: center;
    }

    .wu-footer-prefs {
        justify-content: center;
    }

    .wu-footer-stories-actions {
        gap: 12px;
    }

    .wu-footer-newsletter-text strong {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .wu-footer-logo .wu-lockup-tagline {
        white-space: normal;
    }

    .wu-footer-stats {
        grid-template-columns: 1fr 1fr;
    }

    .wu-footer-stat {
        padding: 12px 14px;
    }

    .wu-footer-newsletter-inner {
        padding: 24px 18px;
    }

    /* Chips sized to their words, so more fit on a line */
    .wu-newsletter-chip span {
        gap: 6px;
        min-height: 42px;
        padding: 0 14px 0 11px;
        font-size: 14px;
    }

    .wu-newsletter-freq {
        grid-template-columns: 1fr;
    }

    .wu-btn--subscribe {
        font-size: 16px;
    }
}
/* ==========================================================================
   Cookie settings and Accessibility pop-ups (inc/site-preferences.php)
   ========================================================================== */

.wu-pref-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: auto; /* centres it; the reset at the top of this file removes the browser's own */
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--wu-bg);
    color: var(--wu-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.wu-pref-dialog::backdrop {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(2px);
}

.wu-pref-dialog[open] {
    animation: wu-pref-in 0.2s ease-out;
}

@keyframes wu-pref-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.wu-pref-inner {
    padding: 22px 24px 20px;
}

.wu-pref-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.wu-pref-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--wu-font-heading);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.wu-pref-head h2 i {
    color: var(--wu-red);
    font-size: 19px;
}

.wu-pref-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--wu-bg-alt);
    color: var(--wu-text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-pref-close:hover {
    background: var(--wu-border);
    color: var(--wu-text);
}

.wu-pref-intro {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wu-text-secondary);
}

.wu-pref-intro a {
    color: var(--wu-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-pref-rows {
    border-top: 1px solid var(--wu-border-light);
}

.wu-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--wu-border-light);
    cursor: pointer;
}

div.wu-pref-row {
    cursor: default;
}

.wu-pref-row-text strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.wu-pref-row-text span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wu-text-secondary);
}

.wu-pref-always {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--wu-green);
    white-space: nowrap;
}

/* On/off switch */
.wu-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    margin: 0;
    border-radius: 999px;
    background: #cfcfcf;
    cursor: pointer;
    transition: background var(--wu-transition);
}

.wu-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform var(--wu-transition);
}

.wu-switch:checked {
    background: var(--wu-red);
}

.wu-switch:checked::after {
    transform: translateX(18px);
}

.wu-switch:focus-visible,
.wu-pref-sizes input:focus-visible + span {
    outline: 2px solid var(--wu-text);
    outline-offset: 2px;
}

/* A / A / A text size picker */
.wu-pref-sizes {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--wu-border);
    border-radius: 8px;
    overflow: hidden;
}

.wu-pref-sizes label {
    position: relative;
    cursor: pointer;
}

.wu-pref-sizes input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wu-pref-sizes label > span[aria-hidden] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    font-weight: 700;
    color: var(--wu-text-secondary);
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-pref-sizes label + label > span[aria-hidden] {
    border-left: 1px solid var(--wu-border);
}

.wu-pref-sizes input:checked + span {
    background: var(--wu-red);
    color: #fff;
}

.wu-pref-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.wu-pref-link {
    margin-right: auto;
    font-size: 13px;
    color: var(--wu-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-pref-link:hover {
    color: var(--wu-red);
}

.wu-pref-btn {
    padding: 9px 16px;
    border: 1px solid var(--wu-border);
    border-radius: var(--wu-radius);
    background: var(--wu-bg);
    color: var(--wu-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--wu-transition), background var(--wu-transition), color var(--wu-transition);
}

.wu-pref-btn:hover {
    border-color: var(--wu-text);
}

.wu-pref-btn--primary {
    background: var(--wu-red);
    border-color: var(--wu-red);
    color: #fff;
}

.wu-pref-btn--primary:hover {
    background: var(--wu-red-dark);
    border-color: var(--wu-red-dark);
}

/* First-visit cookie banner (only when turned on in the Customiser) */
.wu-cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #1e1e1e;
    color: #ddd;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.wu-cookie-banner[hidden] {
    display: none;
}

.wu-cookie-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.wu-cookie-banner p a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-cookie-banner-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.wu-cookie-banner .wu-pref-btn:not(.wu-pref-btn--primary) {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.wu-cookie-banner .wu-pref-btn:not(.wu-pref-btn--primary):hover {
    border-color: #fff;
}

@media (max-width: 768px) {
    .wu-pref-inner {
        padding: 18px 18px 16px;
    }

    .wu-pref-actions .wu-pref-btn {
        flex: 1;
    }

    .wu-pref-link {
        flex-basis: 100%;
        text-align: center;
    }

    .wu-cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .wu-cookie-banner-actions .wu-pref-btn {
        flex: 1;
        padding: 9px 10px;
    }
}

/* ==========================================================================
   Accessibility choices (classes set on <html> by site-preferences.js)
   ========================================================================== */

/* Text size: article and page text */
html[data-wu-text="lg"] .wu-article-content,
html[data-wu-text="lg"] .wu-page-content {
    font-size: 21px;
}

html[data-wu-text="lg"] .wu-article-content h2,
html[data-wu-text="lg"] .wu-page-content h2 {
    font-size: 30px;
}

html[data-wu-text="lg"] .wu-article-content h3,
html[data-wu-text="lg"] .wu-page-content h3 {
    font-size: 25px;
}

html[data-wu-text="xl"] .wu-article-content,
html[data-wu-text="xl"] .wu-page-content {
    font-size: 24px;
}

html[data-wu-text="xl"] .wu-article-content h2,
html[data-wu-text="xl"] .wu-page-content h2 {
    font-size: 33px;
}

html[data-wu-text="xl"] .wu-article-content h3,
html[data-wu-text="xl"] .wu-page-content h3 {
    font-size: 28px;
}

/* High contrast: darker greys on light pages, near-white greys in the footer */
html.wu-a11y-contrast {
    --wu-text-secondary: #2b2b2b;
    --wu-text-tertiary: #444;
    --wu-border: #8c8c8c;
}

html.wu-a11y-contrast .wu-footer-desc,
html.wu-a11y-contrast .wu-footer-col-list > li > a,
html.wu-a11y-contrast .wu-footer-stats-title,
html.wu-a11y-contrast .wu-footer-stat-label,
html.wu-a11y-contrast .wu-footer-post-date,
html.wu-a11y-contrast .wu-footer-pager-label,
html.wu-a11y-contrast .wu-footer-newsletter-desc,
html.wu-a11y-contrast .wu-footer-newsletter-note,
html.wu-a11y-contrast .wu-footer-newsletter-note a,
html.wu-a11y-contrast .wu-newsletter-summary-label,
html.wu-a11y-contrast .wu-newsletter-summary-list dt,
html.wu-a11y-contrast .wu-newsletter-summary-list dd.is-empty,
html.wu-a11y-contrast .wu-newsletter-summary-recent,
html.wu-a11y-contrast .wu-newsletter-group-label,
html.wu-a11y-contrast .wu-newsletter-chip span,
html.wu-a11y-contrast .wu-newsletter-freq-option small,
html.wu-a11y-contrast .wu-footer-social-label,
html.wu-a11y-contrast .wu-footer-social a,
html.wu-a11y-contrast .wu-footer-bottom-left p,
html.wu-a11y-contrast .wu-footer-legal-nav a,
html.wu-a11y-contrast .wu-footer-pref-btn,
html.wu-a11y-contrast .wu-footer-pref-btn i {
    color: #f2f2f2;
}

html.wu-a11y-contrast .wu-footer-newsletter-form input[type="email"]::placeholder {
    color: #bbb;
}

html.wu-a11y-contrast .wu-footer-social a,
html.wu-a11y-contrast .wu-newsletter-chip span,
html.wu-a11y-contrast .wu-newsletter-freq-option > span {
    border-color: rgba(255, 255, 255, 0.45);
}

html.wu-a11y-contrast .wu-newsletter-chip input:checked + span,
html.wu-a11y-contrast .wu-newsletter-freq-option input:checked + span {
    border-color: var(--wu-red-on-dark);
}

/* Underline links (not icon buttons or the logo) */
html.wu-a11y-underline a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.wu-a11y-underline .wu-footer-social a,
html.wu-a11y-underline .wu-back-to-top,
html.wu-a11y-underline .wu-skip-link,
html.wu-a11y-underline .wu-logo a,
html.wu-a11y-underline .wu-footer-logo,
html.wu-a11y-underline .wu-social-links a,
html.wu-a11y-underline .wu-header-cta,
html.wu-a11y-underline .wu-card-link,
html.wu-a11y-underline .wu-next-link,
html.wu-a11y-underline .wu-next-lead,
html.wu-a11y-underline .wu-hero-link,
html.wu-a11y-underline .wu-footer-post,
html.wu-a11y-underline .wu-footer-featured-link {
    text-decoration: none;
}

/* Whole-card links: just the headline */
html.wu-a11y-underline .wu-card-title,
html.wu-a11y-underline .wu-next-headline,
html.wu-a11y-underline .wu-next-lead-title,
html.wu-a11y-underline .wu-hero-title,
html.wu-a11y-underline .wu-footer-post-title,
html.wu-a11y-underline .wu-footer-featured-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Reduce motion */
html.wu-a11y-motion *,
html.wu-a11y-motion *::before,
html.wu-a11y-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}