/*
 * NewsStack — the whole front end.
 *
 * Hand-written, no framework, no webfont. Everything is driven by the tokens
 * in :root, so a second news site can be re-skinned from the first block
 * without touching a selector. Layout is CSS grid; the only JavaScript in the
 * theme is the mobile menu toggle.
 */

/* ─── TOKENS ─────────────────────────────────────────────────────────────── */

:root {
    --ns-bg: #ffffff;
    --ns-bg-soft: #f6f7f9;
    --ns-ink: #14171c;
    --ns-ink-soft: #5c646f;
    --ns-line: #e3e6ea;
    --ns-navy: #12263a;
    --ns-accent: #d8264e;
    --ns-link: #12263a;

    --ns-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --ns-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --ns-wrap: 1200px;
    --ns-gutter: 20px;
    --ns-gap: 24px;
    --ns-radius: 3px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ns-bg: #12141a;
        --ns-bg-soft: #1a1d25;
        --ns-ink: #eef0f3;
        --ns-ink-soft: #a3acb9;
        --ns-line: #2a2f3a;
        --ns-navy: #eef0f3;
        --ns-link: #eef0f3;
    }
}

/* ─── RESET AND BASE ─────────────────────────────────────────────────────── */

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

body {
    margin: 0;
    background: var(--ns-bg);
    color: var(--ns-ink);
    font-family: var(--ns-sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--ns-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--ns-accent);
}

h1,
h2,
h3,
h4 {
    font-family: var(--ns-serif);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0 0 .4em;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
}

:focus-visible {
    outline: 2px solid var(--ns-accent);
    outline-offset: 2px;
}

/* WordPress requires both of these to exist. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ns-skip {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: .6em 1em;
    background: var(--ns-navy);
    color: #fff;
}

.ns-skip:focus {
    left: var(--ns-gutter);
    top: .5rem;
}

.ns-wrap {
    width: 100%;
    max-width: var(--ns-wrap);
    margin-inline: auto;
    padding-inline: var(--ns-gutter);
}

/* ─── MASTHEAD ───────────────────────────────────────────────────────────── */

.ns-masthead {
    border-bottom: 1px solid var(--ns-line);
    background: var(--ns-bg);
}

.ns-masthead__inner {
    display: flex;
    align-items: center;
    gap: var(--ns-gap);
    padding-block: 18px;
    flex-wrap: wrap;
}

.ns-brand {
    margin-right: auto;
}

.ns-brand__name {
    margin: 0;
    font-family: var(--ns-serif);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ns-brand__name a {
    text-decoration: none;
    color: var(--ns-ink);
}

.ns-brand__tagline {
    margin: .1em 0 0;
    font-size: .78rem;
    color: var(--ns-ink-soft);
}

.custom-logo {
    display: block;
    max-height: 54px;
    width: auto;
}

/* Belt and braces: any UL the nav ends up containing loses its bullets, so a
   plugin or a fallback that supplies its own markup cannot break the bar. */
.ns-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    font-size: .9rem;
}

.ns-nav__list a {
    text-decoration: none;
    color: var(--ns-ink);
    padding-block: .25em;
    display: inline-block;
}

.ns-nav__list .current-menu-item > a,
.ns-nav__list .current_page_item > a {
    box-shadow: inset 0 -2px 0 var(--ns-accent);
}

/* Submenus: no hover-only trap — the parent link still works on touch. */
.ns-nav__list li {
    position: relative;
}

.ns-nav__list .sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 190px;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: var(--ns-bg);
    border: 1px solid var(--ns-line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    display: none;
    z-index: 20;
}

.ns-nav__list li:hover > .sub-menu,
.ns-nav__list li:focus-within > .sub-menu {
    display: block;
}

.ns-nav__list .sub-menu a {
    display: block;
    padding: .4rem 1rem;
}

.ns-search input[type="search"] {
    width: 150px;
    padding: .45em .7em;
    font: inherit;
    font-size: .85rem;
    color: var(--ns-ink);
    background: var(--ns-bg-soft);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
}

.ns-navtoggle {
    display: none;
    width: 42px;
    height: 38px;
    padding: 0;
    background: none;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    cursor: pointer;
}

.ns-navtoggle__bars,
.ns-navtoggle__bars::before,
.ns-navtoggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    margin-inline: auto;
    background: var(--ns-ink);
    content: "";
}

.ns-navtoggle__bars::before {
    transform: translateY(-6px);
}

.ns-navtoggle__bars::after {
    transform: translateY(4px);
}

/* ─── SHARED PIECES ──────────────────────────────────────────────────────── */

.ns-main {
    padding-block: 32px 48px;
}

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

/* The stand-in for a post with no featured image: tinted panel, post initial.
   The hue comes from the post ID, so a story keeps its colour everywhere. */
.ns-thumb--none {
    display: grid;
    place-items: center;
    background:
        linear-gradient(150deg,
            hsl(var(--ns-hue, 210) 42% 82%),
            hsl(calc(var(--ns-hue, 210) + 28) 38% 66%));
    color: rgba(0, 0, 0, .4);
    font-family: var(--ns-serif);
    font-size: clamp(2rem, 12cqw, 4rem);
    font-weight: 700;
    user-select: none;
}

.ns-tag {
    display: inline-block;
    margin-bottom: .5em;
    font-family: var(--ns-sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ns-accent);
}

.ns-meta {
    margin: .5em 0 0;
    font-size: .78rem;
    color: var(--ns-ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .1em .5em;
    align-items: baseline;
}

/* The dot belongs to the item after it, so wrapping moves the two together. */
.ns-meta > *:not(:first-child)::before {
    margin-right: .5em;
    opacity: .5;
    content: "·";
}

.ns-meta a {
    color: inherit;
    text-decoration: none;
}

.ns-meta a:hover {
    text-decoration: underline;
}

.ns-meta__sep {
    opacity: .5;
}

/* ─── FRONT PAGE: LEAD BLOCK ─────────────────────────────────────────────── */

.ns-leadblock {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--ns-gap);
    align-items: stretch;
}

/* 16/9 is the shape it wants; min-block-size is what it does when the 2x2 of
   cards beside it comes out taller, which it usually does once the headlines
   run to three lines. Without this the lead stops short and leaves a band of
   white under it the width of the page. */
.ns-lead {
    position: relative;
    aspect-ratio: 16 / 9;
    min-block-size: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--ns-radius);
    container-type: inline-size;
    background: var(--ns-bg-soft);
}

.ns-lead__media {
    position: absolute;
    inset: 0;
    display: block;
}

.ns-lead::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 9, 14, .88) 0%, rgba(6, 9, 14, .45) 38%, rgba(6, 9, 14, 0) 72%);
    content: "";
}

/* On a phone the headline, the standfirst and the byline fill nearly the whole
   16/9 box, so a gradient that clears by 72% leaves white type on bare
   photograph. A container query, not a media query: what matters is how wide
   the lead itself is, which is also why it is a container in the first place. */
@container (max-width: 560px) {
    .ns-lead::after {
        background: linear-gradient(to top, rgba(6, 9, 14, .92) 0%, rgba(6, 9, 14, .74) 45%, rgba(6, 9, 14, .3) 88%);
    }
}

.ns-lead__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: clamp(16px, 3cqw, 32px);
    color: #fff;
}

/* In a card the stand-in letter is the whole picture; under the lead's
   headline it is competing with type, so it drops right back. */
.ns-lead .ns-thumb--none {
    color: rgba(255, 255, 255, .22);
}

/* Brighter than the tag on a white card: this one sits on a photograph, where
   the gradient behind it is at its thinnest. */
.ns-lead__body .ns-tag {
    color: #ffa8bd;
    text-shadow: 0 1px 3px rgba(6, 9, 14, .55);
}

.ns-lead__title {
    margin: 0 0 .3em;
    font-size: clamp(1.35rem, 4.2cqw, 2.4rem);
    color: #fff;
}

.ns-lead__title a {
    color: inherit;
    text-decoration: none;
}

.ns-lead__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.ns-lead__excerpt {
    margin: 0;
    max-width: 54ch;
    font-size: clamp(.82rem, 1.7cqw, .98rem);
    color: rgba(255, 255, 255, .82);
}

.ns-lead__body .ns-meta {
    color: rgba(255, 255, 255, .72);
}

/* The 2×2 of secondary stories. */
.ns-sidegrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ns-gap);
}

/* ─── CARDS AND ROWS ─────────────────────────────────────────────────────── */

.ns-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--ns-radius);
    background: var(--ns-bg-soft);
    container-type: inline-size;
}

/* The card is a column so the byline can be pushed to the bottom of it: in a
   row of four, headlines run to two or three lines and the bylines would
   otherwise sit at three different heights. */
.ns-card {
    display: flex;
    flex-direction: column;
}

.ns-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: .6rem;
}

.ns-card__body .ns-meta {
    margin-top: auto;
    padding-top: .35rem;
}

.ns-card__title {
    margin: 0;
    font-size: 1rem;
}

.ns-card__title a {
    text-decoration: none;
}

.ns-card__excerpt {
    margin: .35em 0 0;
    font-size: .85rem;
    color: var(--ns-ink-soft);
}

.ns-row {
    margin-top: 44px;
}

/* Heading and arrows share a line; the heading takes the slack so its rule
   still runs to wherever the buttons begin. */
.ns-row__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
}

/* The label-plus-rule heading. The rule is drawn by the ::after so it always
   fills whatever space the label leaves. */
.ns-row__heading {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--ns-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ns-row__heading a {
    color: #fff;
    text-decoration: none;
}

.ns-row__heading > a,
.ns-row__heading > span {
    background: var(--ns-accent);
    color: #fff;
    padding: .42em .8em;
    border-radius: var(--ns-radius);
}

.ns-row__heading::after {
    flex: 1;
    height: 1px;
    background: var(--ns-accent);
    opacity: .35;
    content: "";
}

.ns-rownav {
    display: flex;
    flex: none;
    gap: 8px;
}

.ns-rownav__btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    border: 1px solid var(--ns-line);
    border-radius: 50%;
    background: var(--ns-bg);
    color: var(--ns-ink);
    cursor: pointer;
    transition: border-color .15s, color .15s, opacity .15s;
}

.ns-rownav__btn:hover:not(:disabled) {
    border-color: var(--ns-accent);
    color: var(--ns-accent);
}

/* Kept in place rather than hidden: buttons that come and go as you reach
   either end make the heading jump. */
.ns-rownav__btn:disabled {
    opacity: .3;
    cursor: default;
}

/* A row of cards that scrolls sideways. Four in view, the rest a click or a
   swipe away. grid-auto-columns, not a fixed width: the cards keep the same
   column width they would have had in a static grid, so a row that does not
   overflow is indistinguishable from the one this replaced. */
.ns-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--ns-gap)) / 4);
    gap: var(--ns-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* The arrows are the affordance; a scrollbar under every row is noise. The
       track stays keyboard- and touch-scrollable either way. */
    scrollbar-width: none;
}

.ns-track::-webkit-scrollbar {
    display: none;
}

.ns-track > .ns-card {
    scroll-snap-align: start;
}

/* ─── SHARE ──────────────────────────────────────────────────────────────── */

/* It sits in the article header, under the byline, so it is a light rule and
   a small margin rather than the heavy top border a footer block would want. */
.ns-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
    max-width: 820px;
}

.ns-share__label {
    margin: 0;
    font-family: var(--ns-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ns-ink-soft);
}

.ns-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .42em .8em;
    font: inherit;
    font-family: var(--ns-sans);
    font-size: .82rem;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-bg);
    color: var(--ns-ink-soft);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.ns-share__btn:hover,
.ns-share__btn:focus-visible {
    border-color: var(--ns-accent);
    color: var(--ns-accent);
}

.ns-share__btn.is-done {
    border-color: var(--ns-accent);
    color: var(--ns-accent);
}

/* currentColor, so one icon works on both themes and picks up the hover. */
.ns-share__icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex: none;
}

/* ─── LIST BAR (sort on the left, pages on the right) ────────────────────── */

.ns-listbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 24px;
    padding: 10px 14px;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-bg-soft);
}

.ns-listbar__sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ns-listbar__label {
    font-family: var(--ns-sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ns-ink-soft);
}

.ns-listbar__select,
.ns-listbar__go {
    padding: .35em .6em;
    font: inherit;
    font-family: var(--ns-sans);
    font-size: .85rem;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-bg);
    color: var(--ns-ink);
}

.ns-listbar__go {
    font-weight: 600;
    cursor: pointer;
}

.ns-listbar__go:hover {
    border-color: var(--ns-accent);
    color: var(--ns-accent);
}

.ns-listbar__pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ns-listbar__pages .page-numbers {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .4em;
    font-family: var(--ns-sans);
    font-size: .85rem;
    text-decoration: none;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-bg);
    color: var(--ns-ink);
}

.ns-listbar__pages .page-numbers:hover {
    border-color: var(--ns-accent);
    color: var(--ns-accent);
}

.ns-listbar__pages .page-numbers.current {
    border-color: var(--ns-accent);
    background: var(--ns-accent);
    color: #fff;
}

.ns-listbar__pages .page-numbers.dots {
    border-color: transparent;
    background: none;
}

@media (max-width: 680px) {
    .ns-listbar {
        justify-content: flex-start;
    }
}

/* ─── WRITER CARD (author page, and the box under a story) ───────────────── */

.ns-author {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

/* On the author page it is the page's masthead, so it gets the accent rule the
   category rows use; in a story it is a panel, like the newsletter box. */
.ns-author--page {
    padding-block: 8px 22px;
    border-bottom: 1px solid var(--ns-line);
    margin-bottom: 28px;
}

.ns-author--post {
    gap: 18px;
    margin-top: 40px;
    padding: 20px 22px;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-bg-soft);
}

.ns-author__photo {
    display: grid;
    flex: none;
    place-items: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ns-accent) 14%, var(--ns-bg-soft));
}

.ns-author--post .ns-author__photo {
    width: 56px;
    height: 56px;
    background: var(--ns-bg);
}

.ns-author__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ns-author__initials {
    font-family: var(--ns-serif);
    font-size: 2rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--ns-accent) 72%, var(--ns-ink));
}

.ns-author--post .ns-author__initials {
    font-size: 1.15rem;
}

.ns-author__kicker {
    margin: 0 0 .3em;
    font-family: var(--ns-sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ns-accent);
}

.ns-author__name {
    margin: 0;
    font-family: var(--ns-serif);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.12;
}

.ns-author--post .ns-author__name {
    font-size: 1.1rem;
}

.ns-author__name a {
    color: inherit;
    text-decoration: none;
}

.ns-author__name a:hover {
    text-decoration: underline;
}

.ns-author__bio {
    margin: .6em 0 0;
    max-width: 62ch;
    font-size: .97rem;
    line-height: 1.6;
    color: var(--ns-ink-soft);
}

.ns-author--post .ns-author__bio {
    font-size: .9rem;
}

/* Story count on one side, contact links on the other, wrapping to two lines
   before either of them gets squeezed. */
.ns-author__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: .9em;
}

.ns-author__count {
    margin: 0;
    font-family: var(--ns-sans);
    font-size: .8rem;
    color: var(--ns-ink-soft);
}

.ns-author__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-author__linkslabel {
    font-family: var(--ns-sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ns-ink-soft);
}

.ns-author__link {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--ns-line);
    border-radius: 50%;
    color: var(--ns-ink-soft);
    transition: border-color .15s, color .15s;
}

.ns-author__link:hover,
.ns-author__link:focus-visible {
    border-color: var(--ns-accent);
    color: var(--ns-accent);
}

.ns-author__link svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

@media (max-width: 680px) {
    .ns-author {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .ns-author__name {
        font-size: 1.6rem;
    }
}

/* ─── NEWSLETTER ─────────────────────────────────────────────────────────── */

.ns-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: center;
    gap: 18px 32px;
    padding: 22px 24px;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-bg-soft);
}

.ns-news--post {
    margin-top: 40px;
}

.ns-news--footer {
    margin-bottom: 28px;
}

.ns-news__heading {
    margin: 0;
    font-size: 1.15rem;
}

.ns-news__blurb {
    margin: .3em 0 0;
    font-size: .9rem;
    color: var(--ns-ink-soft);
}

.ns-news__form {
    display: flex;
    gap: 8px;
}

.ns-news__input {
    flex: 1;
    min-width: 0;
    padding: .55em .7em;
    font: inherit;
    font-size: .9rem;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-bg);
    color: var(--ns-ink);
}

.ns-news__btn {
    flex: none;
    padding: .55em 1.1em;
    font: inherit;
    font-family: var(--ns-sans);
    font-size: .9rem;
    font-weight: 600;
    border: 1px solid var(--ns-accent);
    border-radius: var(--ns-radius);
    background: var(--ns-accent);
    color: #fff;
    cursor: pointer;
}

.ns-news__btn:hover {
    filter: brightness(1.08);
}

@media (max-width: 680px) {
    .ns-news {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── LISTS (blog index, archive, search) ────────────────────────────────── */

.ns-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
}

body.no-sidebar .ns-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
}

.ns-list {
    display: grid;
    gap: 30px;
}

.ns-entry {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--ns-line);
}

.ns-list > .ns-entry:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ns-entry__media {
    display: block;
    aspect-ratio: 3 / 2;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--ns-radius);
    background: var(--ns-bg-soft);
    container-type: inline-size;
}

.ns-entry__title {
    margin: 0;
    font-size: 1.4rem;
}

.ns-entry__title a {
    text-decoration: none;
}

.ns-entry__excerpt {
    margin: .45em 0 0;
    color: var(--ns-ink-soft);
    font-size: .92rem;
}

.ns-pagehead {
    padding-block: 8px 26px;
    border-bottom: 1px solid var(--ns-line);
    margin-bottom: 30px;
}

.ns-pagehead__title {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
}

.ns-pagehead__desc {
    margin: .5em 0 0;
    color: var(--ns-ink-soft);
}

.ns-pagination {
    margin-top: 36px;
    font-size: .9rem;
}

.ns-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ns-pagination .page-numbers {
    padding: .45em .8em;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    text-decoration: none;
}

.ns-pagination .page-numbers.current {
    background: var(--ns-navy);
    color: var(--ns-bg);
    border-color: var(--ns-navy);
}

/* ─── SINGLE POST AND PAGES ──────────────────────────────────────────────── */

.ns-single__head {
    padding-block: 10px 22px;
}

/* Measure the headline block without re-centring it: .ns-wrap already has
   margin-inline auto, so a max-width on that same element pulls the title
   into the middle of the page while the prose underneath stays left. */
.ns-single__head > * {
    max-width: 820px;
}

/* The headline is the exception. 820px is a measure for reading sentences,
   and a headline is read in one glance, not one line at a time -- capping it
   there wrapped it two lines early while the picture below ran the full width
   of the page. It gets the whole column. (A ch cap does not work here: 24ch of
   3rem serif is narrower than the 820px it was meant to widen.) */
.ns-single__title {
    max-width: none;
    font-size: clamp(1.8rem, 5vw, 3rem);
    margin-bottom: .35em;
}

/* No measure of its own: it takes the head block's 820px, which is also where
   the rule under the byline ends, so the standfirst, that rule and the block
   all stop on the same line. At 60ch it stopped 250px short of both and read
   as a mistake under a headline running the full width. */
.ns-single__standfirst {
    font-family: var(--ns-serif);
    font-size: 1.22rem;
    line-height: 1.5;
    color: var(--ns-ink-soft);
}

.ns-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45em 1.2em;
    align-items: baseline;
    padding-top: .6rem;
    border-top: 1px solid var(--ns-line);
}

.ns-single__meta .ns-meta {
    margin: 0;
}

.ns-single__read {
    margin: 0;
    font-size: .78rem;
    color: var(--ns-ink-soft);
}

.ns-single__figure {
    margin: 0 auto 34px;
}

.ns-single__figure .ns-thumb {
    border-radius: var(--ns-radius);
}

.ns-single__figure figcaption {
    margin-top: .5em;
    font-size: .8rem;
    color: var(--ns-ink-soft);
}

.ns-prose {
    max-width: 68ch;
    font-size: 1.07rem;
    line-height: 1.68;
}

.ns-prose > * {
    margin-block: 0 1.1em;
}

.ns-prose h2 {
    font-size: 1.55rem;
    margin-top: 1.8em;
}

.ns-prose h3 {
    font-size: 1.25rem;
    margin-top: 1.6em;
}

.ns-prose blockquote {
    margin: 1.6em 0;
    padding-left: 1.1em;
    border-left: 3px solid var(--ns-accent);
    font-family: var(--ns-serif);
    font-size: 1.15rem;
    color: var(--ns-ink-soft);
}

.ns-prose img,
.ns-prose figure {
    border-radius: var(--ns-radius);
}

.ns-prose figcaption {
    font-size: .8rem;
    color: var(--ns-ink-soft);
}

.ns-prose pre {
    padding: 1em;
    overflow-x: auto;
    background: var(--ns-bg-soft);
    border-radius: var(--ns-radius);
    font-size: .88rem;
}

.ns-prose :is(code, kbd) {
    font-size: .9em;
    background: var(--ns-bg-soft);
    padding: .1em .35em;
    border-radius: 2px;
}

.ns-prose pre code {
    background: none;
    padding: 0;
}

.ns-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.ns-prose :is(th, td) {
    padding: .5em .6em;
    border-bottom: 1px solid var(--ns-line);
    text-align: left;
}

/* Wide and full alignments, so the block editor's own options work. */
.ns-prose .alignwide {
    width: min(1000px, 100%);
    max-width: none;
    margin-inline: calc(50% - min(500px, 50vw));
}

.ns-prose .alignfull {
    width: 100%;
}

.ns-prose .alignleft {
    float: left;
    margin: .3em 1.4em 1em 0;
    max-width: 45%;
}

.ns-prose .alignright {
    float: right;
    margin: .3em 0 1em 1.4em;
    max-width: 45%;
}

.ns-tags {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--ns-line);
    font-size: .85rem;
}

.ns-tags a {
    display: inline-block;
    margin: 0 .4em .5em 0;
    padding: .3em .7em;
    background: var(--ns-bg-soft);
    border-radius: 99px;
    text-decoration: none;
    color: var(--ns-ink-soft);
}

/* ─── SIDEBAR, FOOTER, COMMENTS ──────────────────────────────────────────── */

.ns-sidebar .widget {
    margin-bottom: 34px;
    font-size: .92rem;
}

.widget-title {
    font-family: var(--ns-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding-bottom: .5em;
    border-bottom: 2px solid var(--ns-accent);
}

.ns-sidebar :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-sidebar li {
    padding-block: .4em;
    border-bottom: 1px solid var(--ns-line);
}

.ns-footer {
    margin-top: 56px;
    border-top: 1px solid var(--ns-line);
    background: var(--ns-bg-soft);
    font-size: .88rem;
}

.ns-footer__widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ns-gap);
    padding-block: 36px;
}

.ns-footer__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 20px;
    border-top: 1px solid var(--ns-line);
    color: var(--ns-ink-soft);
}

.ns-footer__copy {
    margin: 0;
}

.ns-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-comments {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--ns-line);
}

.ns-comments__title,
.comment-reply-title {
    font-family: var(--ns-sans);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ns-comments__list,
.ns-comments__list .children {
    list-style: none;
    padding: 0;
}

.ns-comments__list .children {
    margin-left: 1.6rem;
}

.ns-comments__list .comment-body {
    padding: 1rem 0;
    border-bottom: 1px solid var(--ns-line);
    font-size: .94rem;
}

.ns-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
    width: 100%;
    max-width: 480px;
    padding: .55em .7em;
    font: inherit;
    color: var(--ns-ink);
    background: var(--ns-bg);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
}

.ns-comments .comment-form textarea {
    max-width: 100%;
}

:is(.ns-btn, .ns-comments input[type="submit"], .wp-block-search__button) {
    padding: .6em 1.3em;
    font: inherit;
    font-size: .9rem;
    background: var(--ns-navy);
    color: var(--ns-bg);
    border: 0;
    border-radius: var(--ns-radius);
    cursor: pointer;
}

/* ─── EMPTY STATES ───────────────────────────────────────────────────────── */

.ns-none {
    max-width: 55ch;
    padding-block: 32px 48px;
}

.ns-none__title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.ns-empty {
    padding-block: 20px;
}

.search-form :is(input[type="search"]) {
    padding: .5em .7em;
    font: inherit;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-bg);
    color: var(--ns-ink);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

/* Sidebar tucks under the content before the grid gets cramped. */
@media (max-width: 1040px) {
    .ns-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Three in view instead of four. Nothing is dropped any more: before the
       track existed the fourth card had to be hidden here, because three
       columns from four cards left an orphan on a second line. */
    .ns-track {
        grid-auto-columns: calc((100% - 2 * var(--ns-gap)) / 3);
    }
}

/* Tablet: the lead goes full width and the side grid becomes a row of four. */
@media (max-width: 880px) {
    .ns-leadblock {
        grid-template-columns: minmax(0, 1fr);
    }

    .ns-sidegrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ns-nav {
        order: 3;
        width: 100%;
    }

    .ns-search input[type="search"] {
        width: 120px;
    }
}

/* Phone: everything stacks, nav goes behind the toggle. */
@media (max-width: 680px) {
    /* A little taller, so the headline and standfirst have room without
       covering the whole photograph. Not in the container query above: an
       element cannot query its own size, only its ::after can. */
    .ns-lead {
        aspect-ratio: 4 / 3;
    }

    body {
        font-size: 16px;
    }

    :root {
        --ns-gutter: 16px;
        --ns-gap: 18px;
    }

    .ns-navtoggle {
        display: block;
        order: 2;
    }

    .ns-nav {
        display: none;
        order: 4;
        width: 100%;
        border-top: 1px solid var(--ns-line);
        padding-top: .8rem;
    }

    .ns-nav.is-open {
        display: block;
    }

    .ns-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .ns-nav__list > li {
        border-bottom: 1px solid var(--ns-line);
    }

    .ns-nav__list a {
        padding-block: .6em;
    }

    /* Static, not absolute: a dropdown pinned over a stacked menu is a trap. */
    .ns-nav__list .sub-menu {
        position: static;
        display: block;
        border: 0;
        box-shadow: none;
        padding: 0 0 .4rem 1rem;
    }

    .ns-search {
        order: 5;
        width: 100%;
    }

    .ns-search input[type="search"] {
        width: 100%;
    }

    .ns-sidegrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ns-track {
        grid-auto-columns: calc((100% - var(--ns-gap)) / 2);
    }

    .ns-entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ns-entry__title {
        font-size: 1.2rem;
    }

    .ns-row {
        margin-top: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}