/*
Theme Name: FiNews
Theme URI: https://finews.io
Description: The finews.io magazine layout - a light child of GeneratePress. Card grids, a hero mosaic and syndication-aware article pages, with every ad position coming from BizAds rather than the theme.
Author: BizJaya
Author URI: https://bizjaya.com
Template: generatepress
Version: 0.1.0
Requires PHP: 8.1
Text Domain: finews
Tags: news, magazine, blog, custom-menu, featured-images, right-sidebar
*/

/* --------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------
   One accent, one ink, one paper. Everything else is a tint of those, so the
   whole site re-skins from this block.
   -------------------------------------------------------------------------- */

:root {
    --fine-ink: #12171f;
    --fine-ink-soft: #5a6472;
    --fine-ink-faint: #8a939f;
    --fine-paper: #ffffff;
    --fine-wash: #f4f6f9;
    --fine-line: #e3e7ed;
    --fine-accent: #6d3ff5;
    --fine-accent-dark: #5730d1;
    --fine-navy: #1b1440;
    --fine-accent-wash: #f1ecff;

    /* The section bar. A light grey strip rather than white, so the bar reads as
       chrome and the article surface below it reads as the page. */
    --fine-bar: #edeff4;
    --fine-bar-line: #dce0e8;
    --fine-bar-hover: rgba(18, 23, 31, .06);

    /* The utility strip. Dark in BOTH themes - it is a rule above the masthead,
       not a surface, and inverting it would leave the page with no top edge. */
    --fine-top: #171325;
    --fine-top-ink: #cfc9e4;
    --fine-top-line: rgba(255, 255, 255, .13);

    --fine-radius: 6px;
    --fine-gap: 26px;

    /* The page's one horizontal inset — see "The gutter" near the end of this
       file. Every container takes it, so the whole site has one left edge. */
    --fine-gutter: 20px;
    --fine-shadow: 0 1px 2px rgba(18, 23, 31, .06), 0 8px 24px rgba(18, 23, 31, .05);

    /* GeneratePress' own global colour, which drives every link the parent theme
       styles. Left at its stock blue it fought the purple on exactly the pages
       this child does not template. */
    --accent: #6d3ff5;
}

body {
    background: var(--fine-wash);
    color: var(--fine-ink);
}

.site-content {
    gap: 0;
}

/* --------------------------------------------------------------------------
   Section headings - the red rule that says "this is a news site"
   -------------------------------------------------------------------------- */

.fine-section {
    margin: 0 0 34px;
}

.fine-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 18px;
    border-bottom: 2px solid var(--fine-line);
}

.fine-section__title {
    position: relative;
    margin: 0;
    padding: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.fine-section__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--fine-accent);
}

.fine-section__more {
    padding: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fine-ink-soft);
    text-decoration: none;
}

.fine-section__more:hover {
    color: var(--fine-accent);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.fine-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fine-gap);
}

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

.fine-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--fine-paper);
    border: 1px solid var(--fine-line);
    border-radius: var(--fine-radius);
    box-shadow: var(--fine-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.fine-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(18, 23, 31, .08), 0 14px 32px rgba(18, 23, 31, .09);
}

.fine-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--fine-wash);
}

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

/* A publisher image that 404s must not leave a torn icon in the grid. */
.fine-card__media img:not([src]),
.fine-card__media img[src=""] {
    display: none;
}

.fine-card__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--fine-navy), #1b3f6b);
    color: rgba(255, 255, 255, .75);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
}

.fine-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
}

.fine-card__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -.005em;
}

.fine-card__title a {
    color: var(--fine-ink);
    text-decoration: none;
}

.fine-card__title a:hover {
    color: var(--fine-accent);
}

.fine-card__excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fine-ink-soft);
}

.fine-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 12px;
    color: var(--fine-ink-faint);
}

/* --------------------------------------------------------------------------
   Chips - source and category
   -------------------------------------------------------------------------- */

.fine-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.fine-chip--cat {
    background: var(--fine-accent);
    color: #fff;
}

.fine-chip--cat:hover {
    background: var(--fine-accent-dark);
    color: #fff;
}

.fine-chip--source {
    background: var(--fine-wash);
    border: 1px solid var(--fine-line);
    color: var(--fine-ink-soft);
}

.fine-chip--source:hover {
    color: var(--fine-ink);
}

.fine-card__media .fine-chip--cat {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
}

.fine-dot::before {
    content: "\00b7";
    margin: 0 2px;
}

/* --------------------------------------------------------------------------
   Hero mosaic - one lead, four followers
   -------------------------------------------------------------------------- */

.fine-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--fine-gap);
    margin: 0 0 34px;
}

.fine-hero__side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fine-gap);
}

.fine-hero__lead .fine-card__media {
    aspect-ratio: 3 / 2;
}

.fine-hero__lead .fine-card__title {
    font-size: 27px;
    line-height: 1.24;
}

.fine-hero__lead .fine-card__excerpt {
    font-size: 15px;
}

.fine-hero__side .fine-card__title {
    font-size: 15px;
}

.fine-hero__side .fine-card__excerpt {
    display: none;
}

/* --------------------------------------------------------------------------
   Ad cells
   --------------------------------------------------------------------------
   An interleaved slot takes ONE grid cell and never spans the row: the column
   count is responsive (3 -> 2 -> 1) and the server cannot know which one the
   browser chose, so a full-width break would leave a hole wherever it landed.
   -------------------------------------------------------------------------- */

.fine-adcell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 12px;
    background: var(--fine-paper);
    border: 1px dashed var(--fine-line);
    border-radius: var(--fine-radius);
}

.fine-adcell:empty {
    display: none;
}

.fine-adrail {
    margin: 0 0 26px;
    text-align: center;
}

.fine-adrail:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.fine-widget {
    margin: 0 0 26px;
    padding: 18px 20px 20px;
    background: var(--fine-paper);
    border: 1px solid var(--fine-line);
    border-radius: var(--fine-radius);
}

.fine-widget__title {
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--fine-line);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.fine-rank {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: fine-rank;
}

.fine-rank li {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--fine-line);
}

.fine-rank li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fine-rank li::before {
    counter-increment: fine-rank;
    content: counter(fine-rank);
    flex: 0 0 24px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--fine-line);
}

.fine-rank a {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fine-ink);
    text-decoration: none;
}

.fine-rank a:hover {
    color: var(--fine-accent);
}

.fine-rank__meta {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    color: var(--fine-ink-faint);
}

.fine-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fine-topics .fine-chip {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */

.fine-single {
    padding: 30px 34px 34px;
    background: var(--fine-paper);
    border: 1px solid var(--fine-line);
    border-radius: var(--fine-radius);
}

.fine-single__head {
    margin: 0 0 22px;
}

/* An article carries several categories (TP253), so they wrap rather than pushing
   the headline down a line at a narrow width. */
.fine-single__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fine-single__title {
    margin: 12px 0 14px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.fine-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--fine-ink-soft);
}

.fine-single__lead {
    margin: 0 0 24px;
    border-radius: var(--fine-radius);
    overflow: hidden;
}

.fine-single__lead img {
    display: block;
    width: 100%;
    height: auto;
}

.fine-single__credit {
    display: block;
    padding: 7px 2px 0;
    font-size: 12px;
    color: var(--fine-ink-faint);
}

.fine-single .entry-content {
    font-size: 17px;
    line-height: 1.72;
}

/* The attribution block BizNews appends to the_content. Styled here because the
   plugin ships no CSS of its own - it is content, not chrome. */
.biznews-attribution {
    margin: 26px 0 0;
    padding: 18px 20px;
    background: var(--fine-wash);
    border-left: 3px solid var(--fine-accent);
    border-radius: 0 var(--fine-radius) var(--fine-radius) 0;
}

.biznews-attribution p {
    margin: 0 0 6px;
}

.biznews-attribution__byline {
    font-size: 13px;
    font-weight: 700;
    color: var(--fine-ink);
}

.biznews-attribution__link a {
    font-size: 16px;
    font-weight: 700;
    color: var(--fine-accent);
    text-decoration: none;
}

.biznews-attribution__link a:hover {
    text-decoration: underline;
}

.biznews-attribution__note {
    margin: 0;
    font-size: 12px;
    color: var(--fine-ink-faint);
}

.fine-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--fine-line);
}

/* --------------------------------------------------------------------------
   Archive header + empty state
   -------------------------------------------------------------------------- */

.fine-archive-head {
    margin: 0 0 26px;
    padding: 22px 24px;
    background: var(--fine-paper);
    border: 1px solid var(--fine-line);
    border-left: 4px solid var(--fine-accent);
    border-radius: var(--fine-radius);
}

.fine-archive-head h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.fine-archive-head p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--fine-ink-soft);
}

.fine-empty {
    padding: 44px 30px;
    background: var(--fine-paper);
    border: 1px solid var(--fine-line);
    border-radius: var(--fine-radius);
    text-align: center;
    color: var(--fine-ink-soft);
}

.fine-empty h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--fine-ink);
}

.fine-empty p {
    margin: 0 auto;
    max-width: 46ch;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.fine-pagination {
    margin: 30px 0 0;
}

.fine-pagination .page-numbers {
    display: inline-block;
    min-width: 38px;
    padding: 8px 10px;
    margin: 0 4px 4px 0;
    background: var(--fine-paper);
    border: 1px solid var(--fine-line);
    border-radius: var(--fine-radius);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--fine-ink);
}

.fine-pagination .page-numbers.current,
.fine-pagination .page-numbers:hover {
    background: var(--fine-accent);
    border-color: var(--fine-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive - the column count the ad cell rule depends on
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .fine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fine-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .fine-hero__lead .fine-card__title {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    :root {
        --fine-gap: 18px;
    }

    .fine-grid,
    .fine-grid--two,
    .fine-hero__side {
        grid-template-columns: minmax(0, 1fr);
    }

    .fine-single {
        padding: 22px 18px 26px;
    }

    .fine-single__title {
        font-size: 26px;
    }

    .fine-hero__side .fine-card__excerpt {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Section bar + mega panels
   --------------------------------------------------------------------------
   Parity with stox.news. Panels are in the DOM and revealed with CSS only —
   no menu script ships, the whole navigation is present for a crawler, and it
   works with JavaScript off.

   `:focus-within` is what makes it keyboard-operable. It must stay alongside
   `:hover`, not replace it.
   -------------------------------------------------------------------------- */

.fine-nav {
    border-top: 1px solid var(--fine-line);
    border-bottom: 1px solid var(--fine-line);
    background: var(--fine-bar);
}

.fine-nav__wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}

.fine-nav__nav {
    flex: 1 1 auto;
    /* Without this the flex item refuses to shrink below its content width and the
       search is pushed off the container instead of the bar scrolling. */
    min-width: 0;
}

.fine-nav__bar {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    /* A long section list must scroll rather than wrap into a second row that
       shifts the whole page down. */
    overflow-x: auto;
    scrollbar-width: none;
}

.fine-nav__bar::-webkit-scrollbar {
    display: none;
}

.fine-nav__item {
    position: static;
    flex: 0 0 auto;
}

/* Hairline dividers rather than a gap: the items read as one continuous strip of
   tabs, which is what makes the active one look seated in the bar. */
.fine-nav__item + .fine-nav__item .fine-nav__trigger {
    border-left: 1px solid var(--fine-bar-line);
}

.fine-nav__trigger {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fine-ink);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

/* ⚠ `background-color` is not decoration here, it is a REPAIR. A trigger with no
   href is a <button>, and GeneratePress' dynamic CSS styles `button:hover,
   button:focus` with a near-black fill. That selector is (0,1,1) and beat the
   (0,1,0) `.fine-nav__trigger` reset, so hovering "Policy" painted the theme's
   purple text onto a #3f4047 block — unreadable, and the reason this rule is
   qualified with `.fine-nav` to clear the parent's specificity for good. */
.fine-nav .fine-nav__trigger:hover,
.fine-nav .fine-nav__trigger:focus,
.fine-nav .fine-nav__trigger:focus-visible,
.fine-nav__item:focus-within > .fine-nav__trigger {
    color: var(--fine-accent);
    background-color: var(--fine-bar-hover);
    box-shadow: inset 0 -3px 0 var(--fine-accent);
}

/* The section being read sits on the page colour, lifted out of the bar. */
.fine-nav .fine-nav__trigger.is-current {
    color: var(--fine-accent);
    background-color: var(--fine-paper);
    box-shadow: inset 0 -3px 0 var(--fine-accent);
}

.fine-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    background: var(--fine-paper);
    border: 1px solid var(--fine-line);
    border-top: 0;
    box-shadow: var(--fine-shadow);
    /* visibility, not display:none — the panel keeps its layout so the
       transition works, and keeps its links reachable for `focus-within`. */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.fine-nav__item--panel:hover > .fine-panel,
.fine-nav__item--panel:focus-within > .fine-panel {
    visibility: visible;
    opacity: 1;
}

.fine-panel__inner {
    display: flex;
    gap: 28px;
    padding: 20px 0 24px;
}

.fine-panel__links {
    flex: 0 0 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
}

.fine-panel__links a,
.fine-navlist a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--fine-radius);
    font-size: 14px;
    color: var(--fine-ink-soft);
    text-decoration: none;
}

.fine-panel__links a:hover,
.fine-navlist a:hover {
    background: var(--fine-wash);
    color: var(--fine-accent);
}

.fine-panel__count,
.fine-navlist__count {
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fine-ink-faint);
}

.fine-panel__feed {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fine-panel__thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--fine-radius);
    background: var(--fine-wash);
}

.fine-panel__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.fine-panel__title {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.fine-panel__title a {
    color: var(--fine-ink);
    text-decoration: none;
}

.fine-panel__title a:hover {
    color: var(--fine-accent);
}

.fine-panel__meta {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--fine-ink-faint);
}

/* The flat strip - the phone's navigation.
   The bar above is a pointer affordance: on touch there is no hover, so a panel
   that opened on tap would swallow the tap that was meant to navigate. This is
   the same links one level down, where no hover is needed to reach them. Since
   GP's own menu (and its hamburger) is gone, one of these two must always be
   present - which is why the bar is swapped rather than simply hidden. */
.fine-nav__flat {
    display: none;
}

@media (max-width: 768px) {
    .fine-nav__wrap {
        gap: 10px;
    }

    .fine-nav__nav {
        display: none;
    }

    .fine-nav__flat {
        display: flex;
        gap: 6px;
        padding: 8px 0;
        overflow-x: auto;
        scrollbar-width: none;
        border-top: 1px solid var(--fine-bar-line);
    }

    .fine-nav__flat::-webkit-scrollbar {
        display: none;
    }

    .fine-nav__flatlink {
        flex: 0 0 auto;
        padding: 7px 12px;
        border: 1px solid var(--fine-bar-line);
        border-radius: 999px;
        background: var(--fine-paper);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--fine-ink);
        text-decoration: none;
    }

    .fine-nav__flatlink.is-current {
        border-color: var(--fine-accent);
        background: var(--fine-accent);
        color: #fff;
    }
}

/* --------------------------------------------------------------------------
   Rail navigation list
   -------------------------------------------------------------------------- */

.fine-navlist {
    margin: 0 -8px;
    padding: 0;
    list-style: none;
}

.fine-widget__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.fine-widget__more {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fine-ink-faint);
    text-decoration: none;
}

.fine-widget__more:hover {
    color: var(--fine-accent);
}

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

.fine-credit {
    margin: 0;
}

.fine-credit a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fine-credit span[aria-hidden] {
    opacity: 0.4;
    margin: 0 4px;
}

/* --------------------------------------------------------------------------
   Hero: slider + latest list
   --------------------------------------------------------------------------
   The old hero put a lead card beside a 2x2 grid of cards. On a ~1050px content
   column that squeezed each side card to roughly 205px, so a normal headline
   wrapped to seven lines and the two columns finished at different heights.

   Both halves are now locked to --fine-hero-h. That one property is what keeps
   them level: the slides are height-locked to it and the list divides exactly
   the same box into equal rows. Sizing either side from its own content is what
   made the edge ragged, and it will do so again if this is removed.
   -------------------------------------------------------------------------- */

.fine-hero {
    --fine-hero-h: 460px;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--fine-gap);
    margin: 0 0 34px;
    align-items: stretch;
}

/* ---- slider ---- */

.fine-slider {
    position: relative;
    height: var(--fine-hero-h);
    border-radius: var(--fine-radius);
    overflow: hidden;
    background: var(--fine-navy);
    box-shadow: var(--fine-shadow);
}

.fine-slider__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Focusable so the track can be scrolled from the keyboard; the ring is drawn
       inside so the rounded overflow does not clip it. */
    outline-offset: -3px;
}

.fine-slider__track::-webkit-scrollbar {
    display: none;
}

.fine-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    height: 100%;
}

.fine-slide__link {
    display: block;
    position: relative;
    height: 100%;
    text-decoration: none;
}

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

.fine-slide__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 56px;
    font-weight: 800;
    color: rgba(255, 255, 255, .25);
}

/* A gradient rather than a flat scrim: the headline must stay legible over a
   bright photo without dimming the whole image to get there. */
.fine-slide__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 8, 26, .92) 0%, rgba(10, 8, 26, .55) 38%, rgba(10, 8, 26, 0) 68%);
}

.fine-slide__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 28px 30px;
}

.fine-slide__title {
    margin: 10px 0 0;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    /* Three lines maximum. A six-line headline over a photo is unreadable, and it
       pushes the meta line off the bottom of the slide. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fine-slide__meta {
    margin: 10px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
}

.fine-slide__meta span + span {
    margin-left: 6px;
}

/* ---- controls, created by assets/slider.js ---- */

.fine-slider__nav {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.fine-slider__arrow {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

/* `display: block` on the icon, because an inline SVG sits on the text baseline
   and carries the line box's descender space with it — which is what left the
   chevron hanging toward the bottom of the circle even under `place-items:
   center`. Out of the inline formatting context, the grid centres it exactly. */
.fine-slider__arrow svg {
    display: block;
}

.fine-slider__arrow:hover {
    background: var(--fine-accent);
}

.fine-slider__dots {
    display: flex;
    gap: 6px;
}

.fine-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
}

.fine-slider__dot.is-on {
    width: 20px;
    background: var(--fine-accent);
}

/* ---- the latest-stories column ---- */

.fine-hero__list {
    display: flex;
    flex-direction: column;
    height: var(--fine-hero-h);
    background: var(--fine-paper);
    border: 1px solid var(--fine-line);
    border-radius: var(--fine-radius);
    padding: 4px 16px 8px;
    box-shadow: var(--fine-shadow);
}

.fine-hero__listhead h2 {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fine-ink);
}

.fine-sidelist {
    /* Equal rows, count driven by the template. Three long headlines and five
       short ones both fill the column exactly. */
    display: grid;
    grid-template-rows: repeat(var(--fine-sidelist-rows, 4), minmax(0, 1fr));
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
}

.fine-sideitem {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--fine-line);
    min-height: 0;
}

.fine-sideitem:first-child {
    border-top: 0;
}

.fine-sideitem__thumb {
    display: block;
    border-radius: var(--fine-radius);
    overflow: hidden;
    background: var(--fine-wash);
}

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

.fine-sideitem__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fine-sideitem__title a {
    color: var(--fine-ink);
    text-decoration: none;
}

.fine-sideitem__title a:hover {
    color: var(--fine-accent);
}

.fine-sideitem__meta {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--fine-ink-faint);
}

.fine-sideitem__meta span + span {
    margin-left: 5px;
}

@media (max-width: 900px) {
    .fine-hero {
        grid-template-columns: minmax(0, 1fr);
        --fine-hero-h: 320px;
    }

    /* Stacked underneath, the list has nothing left to be level with, so it stops
       being a fixed-height companion. */
    .fine-hero__list {
        height: auto;
    }

    .fine-sidelist {
        grid-template-rows: none;
    }
}

/* --------------------------------------------------------------------------
   Blog list
   --------------------------------------------------------------------------
   Text left, thumbnail right. The markup order is text first so the reading
   order matches the source order; the image is a grid column, not a float, so
   stacking on mobile needs no reordering.
   -------------------------------------------------------------------------- */

.fine-list {
    display: flex;
    flex-direction: column;
}

.fine-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--fine-gap);
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid var(--fine-line);
}

.fine-row:first-child {
    padding-top: 4px;
}

.fine-row__title {
    margin: 8px 0 0;
    font-size: 21px;
    line-height: 1.28;
    font-weight: 800;
}

.fine-row__title a {
    color: var(--fine-ink);
    text-decoration: none;
}

.fine-row__title a:hover {
    color: var(--fine-accent);
}

.fine-row__meta {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--fine-ink-faint);
}

.fine-row__source {
    font-weight: 700;
    color: var(--fine-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fine-row__meta span + span,
.fine-row__meta span + time {
    margin-left: 6px;
}

.fine-row__excerpt {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fine-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fine-row__media {
    display: block;
    border-radius: var(--fine-radius);
    overflow: hidden;
    background: var(--fine-wash);
}

.fine-row__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .3s ease;
}

.fine-row:hover .fine-row__media img {
    transform: scale(1.03);
}

/* A chip inside a row sits in the flow rather than over an image, so it drops the
   absolute positioning the card version needs. */
.fine-chip--flat {
    position: static;
    display: inline-block;
}

.fine-listad {
    padding: 20px 0;
    border-bottom: 1px solid var(--fine-line);
    text-align: center;
}

.fine-listad:empty {
    display: none;
}

@media (max-width: 700px) {
    .fine-row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Image above the text once stacked. Source order puts it second, so it is
       pulled up rather than the text being pushed down. */
    .fine-row__media {
        grid-row: 1;
        margin-bottom: 12px;
    }

    .fine-row__title {
        font-size: 18px;
    }
}

/* --------------------------------------------------------------------------
   Masthead lockup
   --------------------------------------------------------------------------
   Mark, wordmark and tagline as one link. The mark takes its colour from the
   accent token through `currentColor`, so it followed the site purple without
   needing a re-export — which is the argument for drawing it in markup.
   -------------------------------------------------------------------------- */

.fine-logo__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.fine-logo__mark {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: var(--fine-accent);
    border-radius: 11px;
    /* A tinted shadow rather than a grey one — a neutral drop shadow under a
       saturated tile reads as dirt. */
    box-shadow: 0 4px 12px -4px rgba(109, 63, 245, .55);
}

.fine-logo__text {
    display: flex;
    flex-direction: column;
    /* The wordmark and the tagline are set tight against each other so the pair
       reads as one object rather than two stacked lines. */
    line-height: 1.05;
}

/* The wordmark carries the brand colour, so the mark and the name are one object
   rather than a purple tile next to some black text. */
.fine-logo .fine-logo__name {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--fine-accent);
}

.fine-logo__link:hover .fine-logo__name {
    color: var(--fine-accent-dark);
}

.fine-logo .fine-logo__tagline {
    margin: 3px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fine-ink-faint);
}

@media (max-width: 600px) {
    .fine-logo__mark {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .fine-logo .fine-logo__name {
        font-size: 20px;
    }

    /* The tagline is the first thing to go on a narrow masthead: it is
       supporting copy, and crushing it to eight characters a line serves nobody. */
    .fine-logo .fine-logo__tagline {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Masthead row
   --------------------------------------------------------------------------
   Logo left, banner right. GeneratePress' navigation used to hold the right
   side; with it switched off (inc/masthead.php) the header is back to the two
   things a masthead can actually hold at once.
   -------------------------------------------------------------------------- */

.site-header .inside-header {
    display: flex;
    align-items: center;
    gap: 24px;
}

.fine-headad {
    flex: 0 1 auto;
    /* Right-aligned by the auto margin rather than by justify-content, so the
       header still looks right on a page where the slot renders nothing. */
    margin-left: auto;
    line-height: 0;
}

.fine-headad img,
.fine-headad iframe,
.fine-headad ins {
    max-width: 100%;
    height: auto;
}

/* A 728px banner cannot share a row with a logo on a phone. Hidden rather than
   skipped server-side, which is only safe because BizAds pushes a network unit
   on intersection - a slot that never appears never pushes and never counts. */
@media (max-width: 900px) {
    .fine-headad {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Search, on the section bar
   --------------------------------------------------------------------------
   Every rule here is qualified with `.fine-search`. GeneratePress styles
   `input[type="search"]` and `button:hover` by attribute and pseudo-class,
   which outrank a bare class - the same specificity trap that painted the
   section bar hover state near-black.
   -------------------------------------------------------------------------- */

.fine-search {
    display: flex;
    align-items: center;
    flex: 0 1 260px;
    min-width: 0;
    height: 34px;
    overflow: hidden;
    background: var(--fine-paper);
    border: 1px solid var(--fine-bar-line);
    border-radius: 999px;
}

.fine-search:focus-within {
    border-color: var(--fine-accent);
    box-shadow: 0 0 0 3px var(--fine-accent-wash);
}

.fine-search .fine-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 2px 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    line-height: 1;
    color: var(--fine-ink);
}

.fine-search .fine-search__input:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
}

.fine-search .fine-search__go {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fine-ink-soft);
    cursor: pointer;
}

.fine-search .fine-search__go:hover,
.fine-search .fine-search__go:focus {
    background: var(--fine-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Utility strip: ticker, date, theme switch
   --------------------------------------------------------------------------
   Dark in both themes. It is a rule above the masthead rather than a surface,
   and inverting it in dark mode would leave the page with no top edge at all.
   -------------------------------------------------------------------------- */

.fine-topbar {
    background: var(--fine-top);
    color: var(--fine-top-ink);
}

.fine-topbar__wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 38px;
}

.fine-topbar__ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    /* Without min-width:0 a flex item refuses to shrink below its content, and
       the headlines push the date and the switch off the container. */
    min-width: 0;
}

.fine-ticker__flag {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--fine-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fine-ticker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /* Headlines fade out at both edges instead of being guillotined by the
       container - the difference between a ticker and clipped text. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent);
}

.fine-ticker__track {
    display: flex;
    width: max-content;
    animation: fine-ticker var(--fine-ticker-secs, 48s) linear infinite;
}

/* A headline that scrolls away from the cursor cannot be clicked. Pausing on
   hover and on keyboard focus is what makes the links real links. */
.fine-ticker:hover .fine-ticker__track,
.fine-ticker:focus-within .fine-ticker__track {
    animation-play-state: paused;
}

.fine-ticker__list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fine-ticker__list li {
    flex: 0 0 auto;
}

/* On every item including the last, so the gap between the two copies of the
   list matches the gap inside one - the join has to be invisible. */
.fine-ticker__list li::after {
    content: "\2022";
    margin: 0 14px;
    color: rgba(255, 255, 255, .3);
}

.fine-ticker__list a {
    font-size: 12.5px;
    white-space: nowrap;
    color: var(--fine-top-ink);
    text-decoration: none;
}

.fine-ticker__list a:hover,
.fine-ticker__list a:focus {
    color: #fff;
    text-decoration: underline;
}

@keyframes fine-ticker {
    from { transform: translateX(0); }
    /* Exactly half the track - one full copy of the list - so the headline that
       leaves the left edge is the one arriving at the right. */
    to   { transform: translateX(-50%); }
}

/* An animated strip is motion the reader did not ask for. With reduced motion
   the same headlines become a plain scroller they drive themselves. */
@media (prefers-reduced-motion: reduce) {
    .fine-ticker {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .fine-ticker::-webkit-scrollbar {
        display: none;
    }

    .fine-ticker__track {
        animation: none;
    }

    /* The second copy exists only to make the loop seamless. */
    .fine-ticker__list + .fine-ticker__list {
        display: none;
    }
}

.fine-topbar__end {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    margin-left: auto;
}

.fine-topbar__date {
    font-size: 12px;
    white-space: nowrap;
    color: var(--fine-top-ink);
}

.fine-topbar .fine-themetoggle {
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}

/* GP styles `button:hover` with a near-black fill; without these the switch
   grows a dark box the moment the pointer touches it. */
.fine-topbar .fine-themetoggle:hover,
.fine-topbar .fine-themetoggle:focus {
    background: transparent;
}

.fine-themetoggle__track {
    display: block;
    position: relative;
    width: 44px;
    height: 24px;
    border: 1px solid var(--fine-top-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    transition: background-color .16s ease;
}

.fine-themetoggle:hover .fine-themetoggle__track {
    background: rgba(255, 255, 255, .2);
}

.fine-themetoggle:focus-visible .fine-themetoggle__track {
    outline: 2px solid var(--fine-accent);
    outline-offset: 2px;
}

.fine-themetoggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    color: #c88a00;
    transition: transform .16s ease, color .16s ease;
}

.fine-themetoggle__moon {
    display: none;
}

[data-theme="dark"] .fine-themetoggle__knob {
    transform: translateX(20px);
    color: #3d2f6d;
}

[data-theme="dark"] .fine-themetoggle__sun {
    display: none;
}

[data-theme="dark"] .fine-themetoggle__moon {
    display: block;
}

@media (max-width: 768px) {
    /* The date is the first thing to go: it is the least useful of the three
       and the only one that can be read off the device itself. */
    .fine-topbar__date {
        display: none;
    }
}

@media (max-width: 480px) {
    .fine-ticker__flag {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   --------------------------------------------------------------------------
   `data-theme` is set on <html> before the first paint by an inline snippet in
   <head>, so the page never flashes light and then turns dark.

   The block remaps GeneratePress' OWN globals (--contrast, --base*) alongside
   the theme tokens. That is what makes this ~30 lines instead of a second
   stylesheet: the parent drives every surface, input, footer and container it
   renders from those seven variables, so all of them follow at once.

   `:root[data-theme]` rather than a bare `[data-theme]` on purpose - GP defines
   its globals on `:root`, which is the same specificity as a lone attribute
   selector, and a tie decided by source order is a tie waiting to break.
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --fine-ink: #e7ebf3;
    --fine-ink-soft: #a6b0c0;
    --fine-ink-faint: #798496;
    --fine-paper: #171b24;
    --fine-wash: #0e1219;
    --fine-line: #2a323f;
    /* Lifted off the light-mode purple: #6d3ff5 on a dark surface is close to
       unreadable, and an accent that cannot be read is not an accent. */
    --fine-accent: #a684ff;
    --fine-accent-dark: #8b64ff;
    --fine-accent-wash: #241d3d;
    --fine-navy: #0b0918;

    --fine-bar: #131822;
    --fine-bar-line: #2a323f;
    --fine-bar-hover: rgba(255, 255, 255, .07);

    --fine-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .38);

    /* GeneratePress globals. */
    --contrast: #e7ebf3;
    --contrast-2: #a6b0c0;
    --contrast-3: #69748a;
    --base: #232b38;
    --base-2: #0e1219;
    --base-3: #171b24;
    --accent: #a684ff;
}

/* The tinted glow under the mark is drawn for a white masthead; on a dark one
   it reads as a smudge. */
:root[data-theme="dark"] .fine-logo__mark {
    box-shadow: none;
}

/* Publisher photography is the one thing that should NOT be dimmed - it is the
   content. Only the placeholder surfaces behind it change. */
:root[data-theme="dark"] .fine-card__media,
:root[data-theme="dark"] .fine-panel__thumb,
:root[data-theme="dark"] .fine-slide {
    background: #10141c;
}

/* --------------------------------------------------------------------------
   Latest-stories pager
   --------------------------------------------------------------------------
   Fifteen stories in the hero's right-hand column, five at a time. It reuses
   the hero slider's mechanism through data attributes (assets/slider.js) - one
   scroll-snap implementation, two callers - and only the furniture differs:
   dots, no arrows, no autoplay. A list of headlines that advanced on a timer
   would move under the eye that is reading it.
   -------------------------------------------------------------------------- */

.fine-sidepager {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.fine-sidepager__track {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* No smooth here: the script drives the scroll and honours reduced motion
       itself. Declaring it in CSS as well would override that decision. */
}

.fine-sidepager__track::-webkit-scrollbar {
    display: none;
}

.fine-sidepage {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
}

/* Static row under the list, not floating over it: there is no image here to
   float the controls onto, and dots over a headline would sit on the text. */
.fine-sidepager__nav {
    position: static;
    justify-content: center;
    gap: 7px;
    padding: 8px 0 2px;
}

/* The dots ride on paper here rather than on a photograph, so the resting
   colour has to come off the page instead of out of white. */
.fine-sidepager__nav .fine-slider__dot {
    background: var(--fine-line);
}

.fine-sidepager__nav .fine-slider__dot.is-on {
    background: var(--fine-accent);
}

/* Five rows in the box that used to hold four: the thumbnail and the clamp both
   come down a notch so the row still fits without the column growing. Growing it
   would break --fine-hero-h, which is the one thing keeping the two halves of the
   hero level. */
.fine-sidepager .fine-sideitem {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
}

.fine-sidepager .fine-sideitem__title {
    font-size: 13.5px;
    -webkit-line-clamp: 2;
}

/* --------------------------------------------------------------------------
   Sidebar tabs
   --------------------------------------------------------------------------
   Three rail cards became three tabs of one card. Everything is visible in the
   server's HTML; `is-live` is added by assets/tabs.js once the handlers are
   bound, which is what reveals the bar and retires the per-panel headings. With
   the script blocked the reader gets the three stacked lists, never a row of
   buttons that do nothing.
   -------------------------------------------------------------------------- */

.fine-tabs__bar {
    display: none;
}

.fine-tabs.is-live .fine-tabs__bar {
    display: flex;
    gap: 0;
    margin: -4px -4px 12px;
    border-bottom: 1px solid var(--fine-line);
}

.fine-tabs.is-live .fine-tabs__legend {
    display: none;
}

.fine-tabs__tab {
    flex: 1 1 auto;
    padding: 9px 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fine-ink-faint);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease;
}

/* Qualified past GeneratePress' `button:hover` (0,1,1), which would otherwise
   paint a near-black block behind the tab - the same trap as the section bar. */
.fine-tabs .fine-tabs__tab:hover,
.fine-tabs .fine-tabs__tab:focus {
    background: transparent;
    color: var(--fine-ink);
}

.fine-tabs .fine-tabs__tab.is-on {
    background: transparent;
    color: var(--fine-accent);
    border-bottom-color: var(--fine-accent);
}

.fine-tabs .fine-tabs__tab:focus-visible {
    outline: 2px solid var(--fine-accent);
    outline-offset: -2px;
}

/* A panel is a tab stop (it can scroll), but it must not draw a ring the moment
   a tab is clicked - only when the reader actually tabs into it. */
.fine-tabs__panel:focus {
    outline: none;
}

.fine-tabs__panel:focus-visible {
    outline: 2px solid var(--fine-accent);
    outline-offset: 3px;
}

/* Stacked-and-headed is the no-JavaScript shape; the gap keeps the three lists
   from running together. */
.fine-tabs__panel + .fine-tabs__panel {
    margin-top: 18px;
}

.fine-tabs.is-live .fine-tabs__panel + .fine-tabs__panel {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   The gutter
   --------------------------------------------------------------------------
   ONE horizontal inset, applied to every container on the page, so the site has
   exactly one left edge.

   Two faults were hiding in each other here. GeneratePress pads `.inside-header`
   40px horizontally while every other grid-container computed to **0**, so the
   logo started at x=148 and the menu directly under it at x=108 - a stray indent
   on the masthead. And the 0 was the bigger problem: below the 1200px container
   width the page is fluid, so with no padding the hero, the cards and the
   headlines ran flush into the viewport edge with nothing to breathe against.

   Fixing only the first made the second worse, which is why they are one rule
   now: both selectors take the same token, and moving the site's gutter is a
   one-line change rather than a hunt.

   Horizontal only on the header. Its 20px of VERTICAL padding is what gives the
   masthead its height, and zeroing that would collapse the row onto the logo.
   -------------------------------------------------------------------------- */

.grid-container {
    padding-left: var(--fine-gutter);
    padding-right: var(--fine-gutter);
}

/* `.inside-header` carries `grid-container` too, but GeneratePress' own 40px
   rule outranks the line above on source order - so it is restated, not left to
   inherit. */
.site-header .inside-header {
    padding-left: var(--fine-gutter);
    padding-right: var(--fine-gutter);
}