:root {
    --fg: #213030;
    --head: #13201F;
    --mute: #5C7070;
    --on-accent: #FFFFFF;
    --bg: #FFFFFF;
    --accent: #1B7E7B;
    --alt: #EDF7F7;
    --line: #D2E4E4;
    --link: #157976;
}

.feature > .inner {
    grid-template-columns: minmax(0,1fr);
    align-items: center;
    padding: 2em 1em;
    gap: 1.5em;
    display: grid;
}

.figure {
    min-height: 12em;
    border-radius: 0.5em;
    overflow: hidden;
    background: linear-gradient(160deg, var(--alt), var(--accent));
}

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

.intro-heading {
    color: var(--head);
    font-size: 2em;
    margin: 0 0 0.5em;
}

.feature {
    margin-bottom: 2em;
    border-bottom: 1px solid var(--line);
}

.section-title h1 {
    color: var(--head);
    font-size: 1.5em;
    margin: 0 0 1.25em;
}

.inner {
    max-width: 66em;
    padding-left: 1em;
    box-sizing: border-box;
    padding-right: 1em;
    margin: 0 auto;
}

.page-grid {
    padding-top: 1.5em;
    padding-bottom: 2.5em;
}

.stream {
    min-width: 0;
}

.left-rail {
    margin-top: 2em;
    min-width: 0;
}

ul.articles, ol.articles {
    padding: 0;
    margin: 0;
    list-style: none;
}

.item-title {
    line-height: 1.25;
    font-size: 1.55em;
    margin: 0 0 0.4em;
    font-family: "Montserrat", Arial, sans-serif;
}

.item-title a {
    color: var(--head);
    text-decoration: none;
}

.item-title a:hover {
    color: var(--link);
    text-decoration: underline;
}

.meta {
    color: var(--mute);
    font-size: 0.85em;
    margin: 0 0 0.9em;
}

.meta a {
    color: var(--mute);
}

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

.details h2:not(.item-title), .standfirst h2 {
    font-size: 1.15em;
    margin: 1.25em 0 0.5em;
}

.details h3, .standfirst h3 {
    font-size: 1.02em;
}

.media {
    margin: 0 0 1em;
}

.media img {
    width: 100%;
    border-radius: 0.25em;
    display: block;
    height: auto;
}

.top-story .item-title {
    line-height: 1.15;
    font-size: 2.1em;
}

.top-story {
    padding-bottom: 1.5em;
    margin-bottom: 2em;
    border-bottom: 3px solid var(--head);
}

.small-post {
    grid-template-columns: minmax(0,1fr);
    gap: 2em;
    display: grid;
    margin-bottom: 2em;
}

.articles-mg .mag .item-title {
    line-height: 1.1;
    font-size: 2.2em;
}

.articles-mg .mag {
    padding-bottom: 1.5em;
    margin-bottom: 2em;
    border-bottom: 4px double var(--head);
}

.articles-mg .single-head {
    grid-template-columns: minmax(0,1fr);
    align-items: end;
    gap: 1em;
    display: grid;
}

.articles-mg .small-post {
    grid-template-columns: minmax(0,1fr);
    padding: 0;
    margin: 0;
    gap: 1.75em;
    display: grid;
    list-style: none;
}

.articles-mg > .band, .articles-mg > li > .band {
    grid-column: 1 / -1;
}

.articles-mg .small-post > *:has(.band) {
    grid-column: 1 / -1;
}

.articles-mg .small-post .item-title {
    font-size: 1.2em;
}

.articles-mg .small-post .details {
    font-size: 0.93em;
}

.module {
    font-size: 0.92em;
    margin-bottom: 1.75em;
}

.side-heading {
    text-transform: none;
    color: var(--head);
    font-size: 1em;
    padding-bottom: 0.35em;
    margin: 0 0 0.6em;
    border-bottom: 2px solid var(--accent);
    font-family: "Montserrat", Arial, sans-serif;
}

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

.side-list li, .side-list > div {
    padding: 0.3em 0;
    border-bottom: 1px solid var(--line);
}

.module a {
    color: var(--link);
    text-decoration: none;
}

.module a:hover {
    text-decoration: underline;
}

.page-heading {
    color: var(--head);
    line-height: 1.2;
    font-size: 2.1em;
    margin: 0 0 0.5em;
    font-family: "Montserrat", Arial, sans-serif;
}

.post-date {
    color: var(--mute);
    font-size: 0.88em;
    margin: 0 0 1.5em;
}

.post-date a {
    color: var(--mute);
}

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

.entry-footer {
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: 1px solid var(--line);
}

.outline {
    border-radius: 0.25em;
    padding: 1em 1.25em;
    margin-bottom: 1.5em;
    background: var(--alt);
}

.outline p {
    margin: 0 0 0.4em;
}

.author-box {
    border: 1px solid var(--line);
    border-radius: 0.25em;
    padding: 1.25em;
    margin-bottom: 1.5em;
}

.author-box p {
    margin: 0 0 0.4em;
}

.see-also h2 {
    font-size: 1.15em;
}

.pager {
    margin-top: 1.5em;
    gap: 1em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.path {
    color: var(--mute);
    font-size: 0.82em;
    margin: 0 0 1em;
}

.path a {
    color: var(--mute);
}

.page-footer {
    color: var(--mute);
    border-top: 1px solid var(--line);
    font-size: 0.85em;
    padding: 1.25em 0;
}

.credits {
    margin: 0;
}

.page-footer a {
    color: var(--mute);
    margin-left: 0.4em;
}

.button-group {
    padding: 0;
    margin: 1em 0 0;
    gap: 0.75em;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
}

.pill-link {
    color: var(--on-accent);
    border: 2px solid var(--accent);
    border-radius: 0.5em;
    padding: 0.6em 1.1em;
    text-decoration: none;
    display: inline-block;
    font-weight: 700;
    background: var(--accent);
}

.pill-link-alt {
    color: var(--accent);
    background: var(--bg);
}

.trust-list {
    font-size: 0.85em;
    padding: 0;
    margin: 0.9em 0 0;
    gap: 0.5em;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
}

.trust-list li, .trust-list span {
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 1em;
    padding: 0.25em 0.65em;
    background: var(--alt);
}

.over-title {
    text-transform: uppercase;
    color: var(--mute);
    letter-spacing: 0.08em;
    font-size: 0.8em;
    margin: 0 0 0.4em;
    font-weight: 700;
}

.feed-title, h2.feed-title {
    margin: 0 0 1.5em;
}

.feed-title h2, h2.feed-title {
    font-size: 1.9em;
    margin-bottom: 0.35em;
}

.feed-title p {
    color: var(--mute);
    margin: 0;
}

.list-summary {
    max-width: 70ch;
    margin: 0 0 1.5em;
}

.hello-card {
    max-width: 100%;
    box-sizing: border-box;
    margin: 1em 0;
}

.hello-card .callback {
    grid-template-columns: minmax(0,1fr);
    gap: 0.6em;
    display: grid;
}

.hello-card .form-row {
    gap: 0.2em;
    display: grid;
    min-width: 0;
}

.hello-card label {
    font-size: 0.85em;
    font-weight: 600;
}

.hello-card input[type=text], .hello-card input[type=tel], .hello-card textarea {
    color: var(--fg);
    border: 1px solid var(--line);
    width: 100%;
    border-radius: 0.25em;
    box-sizing: border-box;
    padding: 0.5em 0.6em;
    font: inherit;
    background: var(--bg);
}

.hello-card button {
    color: var(--on-accent);
    border: 0;
    border-radius: 0.25em;
    padding: 0.65em 1.1em;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    background: var(--accent);
}

.hello-card .phone-line {
    font-size: 0.9em;
    margin: 0.6em 0 0;
}

.hello-card .standfirst-line {
    margin: 0 0 0.6em;
}

.hello-card-boxed {
    color: var(--fg);
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    border: 1px solid var(--line);
    border-radius: 0.5em;
    padding: 1.25em;
    background: var(--bg);
}

.hello-card-inline {
    color: var(--fg);
    border-radius: 0.5em;
    padding: 0.9em;
    background: var(--alt);
}

.hello-card-tabbed {
    color: var(--fg);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    border-top: 4px solid var(--accent);
    padding: 1em;
    background: var(--bg);
}

.hello-card .segments {
    gap: 0;
    display: flex;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.hello-card .segments input {
    width: 1px;
    position: absolute;
    opacity: 0;
    height: 1px;
}

.hello-card .segments label {
    color: var(--mute);
    padding: 0.45em 0.9em;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.hello-card .segments input:checked + label {
    color: var(--head);
    border-bottom-color: var(--accent);
}

.hello-card-call {
    color: var(--fg);
    border-radius: 0.5em;
    padding: 1em;
    text-align: center;
    background: var(--alt);
}

.hello-card .call-now {
    color: var(--on-accent);
    border-radius: 999px;
    font-size: 1.25em;
    padding: 0.9em 1.6em;
    text-decoration: none;
    display: inline-block;
    font-weight: 700;
    background: var(--accent);
}

.hello-card-two {
    color: var(--fg);
    border: 2px dashed var(--line);
    border-radius: 0.5em;
    padding: 1.1em;
    background: var(--bg);
}

.hello-card fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    gap: 0.5em;
    display: grid;
    min-width: 0;
}

.hello-card legend {
    color: var(--mute);
    letter-spacing: 0.08em;
    font-size: 0.75em;
}

.hello-card details > summary {
    color: var(--bg);
    border-radius: 0.25em;
    padding: 0.5em 1em;
    cursor: pointer;
    margin: 0.3em 0;
    display: inline-block;
    background: var(--head);
    list-style: none;
}

.hello-card-compact {
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 0.5em;
    padding: 1em;
    background: var(--alt);
}

.hello-card-halves {
    color: var(--fg);
    border-radius: 0.5em;
    padding: 1.2em;
    border-left: 4px solid var(--accent);
    background: var(--alt);
}

.photos {
    grid-template-columns: repeat(2, minmax(0,1fr));
    margin: 0 0 2em;
    gap: 0.5em;
    display: grid;
}

.photos a {
    border-radius: 0.25em;
    overflow: hidden;
    display: block;
    background: var(--alt);
}

.photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    height: auto;
}

.single-head .post-date {
    margin: 0 0 1.25em;
}

.post-full-cd {
    border: 1px solid var(--line);
    border-radius: 0.75em;
    padding: 1.25em;
    background: var(--alt);
}

.title {
    letter-spacing: 0.05em;
    font-variant: small-caps;
}

.details a, .post-content a {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.media img, .post-content img, .details img {
    border-radius: 1.25em;
}

.details p, .post-content p {
    margin: 0 0 0.6em;
}

body {
    line-height: 1.45;
}

[data-rt]::after {
    content: " · " attr(data-rt);
}

.path {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72em;
}

.outline li {
    list-style: decimal inside;
}

.details ul, .post-content ul {
    list-style-type: "\203A  ";
}

.chips a::before, .meta a::before {
    color: var(--accent);
    content: "#";
}

.pager-top {
    text-align: right;
    margin: 0.5em 0;
}

.post-full-pg-centered {
    max-width: 60ch;
    text-align: center;
    margin: 0 auto;
}

.pager-arrows a {
    font-size: 1.5em;
    text-decoration: none;
}

@media (min-width: 800px) {
    .feature > .inner {
        grid-template-columns: minmax(0,5fr) minmax(0,6fr);
    }
    .page-grid {
        align-items: flex-start;
        gap: 2.25em;
        display: flex;
    }
    .stream {
        order: 2;
        flex: 1 1 0;
    }
    .left-rail {
        margin-top: 0;
        order: 1;
        flex: 0 0 12em;
    }
    .small-post {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .articles-mg .single-head:has(figure) {
        grid-template-columns: minmax(0,3fr) minmax(0,2fr);
    }
    .articles-mg .small-post {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .hello-card-inline .callback {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
        align-items: end;
    }
    .hello-card-halves .callback {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    }
    .hello-card-halves .form-row:nth-of-type(3), .hello-card-halves button {
        grid-column: 1 / -1;
    }
    .photos {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
    .post-full-cd {
        padding: 2em;
    }
}