/* Table of contents
/* ------------------------------------------------------------

This is a development CSS file which is built to assets/built/screen.css
by `node build.mjs`.

1. Variables
2. Fonts
3. Resets
4. Globals
5. Layout
6. Site navigation
7. Page hero
8. Category filters
9. Post feed
10. Newsletter
11. Demo CTA and dialog
12. Site footer
13. Post/page
  13.1. Article
  13.2. Page template
  13.3. Page without header
14. Content
15. Cards
16. Comments
17. Article brand layer
18. Lightbox

Sections 1–12 implement the Olareport blog design and are first-party. Sections
13–16 and 18 are inherited from Ghost's Source theme and kept close to upstream,
because they style editor output (Koenig cards, galleries, the lightbox) that
Ghost controls; section 17 is the brand layer over them, collected in one place
so a future re-fork only has to carry that block forward.

*/

/* 1. Variables
/* ---------------------------------------------------------- */

/* Olareport brand tokens.
/*
/* These mirror the platform palette defined in the product's `frontend/src/
/* index.css` and the Figma "Olareport v2" blog frame. Keep them in sync: the
/* blog is one section of the marketing site, so a visitor moves between them
/* without a page-level context switch and any drift reads as a broken handoff. */

:root {
    /* Brand */
    --color-teal: #1a7a6e;
    --color-teal-strong: #145f56;
    --color-teal-soft: rgb(26 122 110 / 0.1);
    --color-teal-softer: rgb(26 122 110 / 0.05);
    --color-chip: #d1f5f1;

    /* A shade lighter than `--color-chip`, and deliberately its own token: this
    /* is the marketing header's "Coming soon" badge, and it has to track that
    /* header rather than the blog's category chips. */
    --color-badge: #e5f5f2;
    --color-accent: #e8621a;

    /* Deliberately teal rather than `var(--ghost-accent-color)`. Ghost's accent
    /* setting defaults to pink and is editable by any admin, so binding the
    /* brand to it means one stray click restyles the public site. Ghost's own
    /* public apps — Portal, comments, search, Koenig cards — do read that
    /* setting and the theme cannot reach them, so it should still be set to this
    /* value in Ghost admin; see the theme README. */
    --color-brand: #1a7a6e;

    /* Neutrals, named for the role they play in the design rather than for
    /* their lightness, so a palette tweak does not turn every name into a lie. */
    --color-white: #fff;
    --color-black: #000;
    --color-ink: #1a1a1a;
    --color-body: #4b5961;
    --color-muted: #7b7b7b;
    --color-placeholder: #aab7bc;
    --color-border: #cbd5db;
    --color-rule: #ebebeb;

    /* Hairlines the marketing header draws its chrome with: the heavier one
    /* outlines the mega-menu panels and the burger, the softer one separates
    /* stacked rows inside them. Named separately from `--color-rule` because
    /* they are the marketing site's values and have to stay pinned to it. */
    --color-hairline: #e5e7eb;
    --color-hairline-soft: #eef2f4;
    --color-hairline-softer: #f3f4f6;
    --color-field-border: #d1d1d1;
    --color-surface: #fff;
    --color-panel: #fff;

    /* Aliases kept for the inherited article, card, and lightbox sections. */
    --color-primary-text: var(--color-ink);
    --color-secondary-text: var(--color-body);
    --color-darker-gray: var(--color-ink);
    --color-light-gray: var(--color-rule);
    --color-lighter-gray: rgb(26 122 110 / 0.05);
    --color-darkgrey: var(--color-ink);
    --background-color: var(--color-surface);

    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-display: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: Georgia, Times, serif;
    --font-serif-alt: Georgia, Times, serif;
    --font-mono: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;

    /* The design is drawn on a 1440px frame with 80px gutters; the shell holds
    /* that 1280px measure and the gutter steps down on the way to a phone.
    /*
    /* The steps are the marketing site's, not a smooth clamp: every section
    /* there is `px-5 sm:px-8 lg:px-20` around a 1280px column, and the header
    /* this theme mirrors is drawn on the same scale. A clamp lands between the
    /* steps at intermediate widths, which pulls the blog's content edge off the
    /* marketing site's by a visible margin at laptop sizes. */
    --shell-width: 1280px;
    --container-width: 1200px;
    --container-gap: clamp(20px, 5.55vw, 48px);
    --shell-gutter: 20px;
    --nav-height: 80px;
    --section-space: clamp(64px, 8.33vw, 120px);

    --radius-panel: 16px;
    --radius-control: 8px;
    --radius-field: 12px;
}

@media (min-width: 640px) {
    :root {
        --shell-gutter: 32px;
    }
}

@media (min-width: 1024px) {
    :root {
        --shell-gutter: 80px;
        --nav-height: 96px;
    }
}

/* 2. Fonts
/* ---------------------------------------------------------- */

/* Fonts are preloaded and defined in default.hbs to avoid layout shift */

/* 3. Resets
/* ---------------------------------------------------------- */

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

* {
    margin: 0;
}

html {
    font-size: 62.5%;
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    height: auto;
    max-width: 100%;
}

iframe {
    display: block;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

sub, sup {
    line-height: 1;
}

/* 4. Globals
/* ---------------------------------------------------------- */

body {
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: -0.5px;
    color: var(--color-ink);
    background-color: var(--color-surface);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gh-font-heading, var(--font-display));
    letter-spacing: -0.02em;
}

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

::selection {
    color: inherit;
    background: rgb(26 122 110 / 0.18);
}

/* Buttons.
/*
/* Teal is the action colour throughout the marketing site's chrome, so it
/* carries the primary button here too. `is-inverse` is the same button on a
/* teal surface, where a teal fill would disappear. */

.ola-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.5px;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ola-button.is-primary {
    color: var(--color-white);
    background-color: var(--color-teal);
}

.ola-button.is-primary:hover {
    background-color: var(--color-teal-strong);
}

.ola-button.is-ghost {
    color: var(--color-teal);
    background-color: transparent;
}

.ola-button.is-ghost:hover {
    background-color: var(--color-teal-softer);
}

.ola-button.is-inverse {
    color: var(--color-teal);
    background-color: var(--color-white);
}

.ola-button.is-inverse:hover {
    background-color: rgb(255 255 255 / 0.86);
}

.ola-button.is-outline {
    padding: 10px 20px;
    color: var(--color-teal);
    background-color: var(--color-white);
    border-color: var(--color-border);
}

.ola-button.is-outline:hover {
    border-color: var(--color-teal);
}

.ola-button svg {
    width: 20px;
    height: 20px;
}

.ola-input {
    height: 56px;
    padding: 0 16px;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: var(--color-ink);
    background-color: var(--color-white);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-control);
    outline: none;
}

.ola-input::placeholder {
    color: var(--color-body);
}

.ola-input:focus {
    border-color: var(--color-teal);
}

/* Ghost's default focus ring disappears against the teal surfaces, and the blog
/* is a public page that has to stay keyboard-navigable. */
:is(a, button, input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
    border-radius: 4px;
}

.ola-footer :is(a, button, input, summary):focus-visible,
.ola-hero :is(a, button):focus-visible,
.ola-newsletter :is(a, button):focus-visible {
    outline-color: var(--color-white);
}

/* 5. Layout
/* ---------------------------------------------------------- */

.ola-viewport {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ola-main {
    flex-grow: 1;
}

/* Every band runs full-bleed and holds its content to the same 1280px measure
/* the design is drawn on, so the teal sections meet the white ones edge to
/* edge without a wrapper element between them. */
.ola-nav-inner,
.ola-hero-inner,
.ola-posts-inner,
.ola-newsletter-inner,
.ola-footer-inner {
    margin-inline: auto;
    width: 100%;
    max-width: var(--shell-width);
}

/* Post and page bodies use a different layout to the marketing bands: a grid
/* that keeps prose at a readable measure while letting Koenig's wide and
/* full-width cards break out of it. This is Ghost's canvas and the editor's
/* card CSS depends on the column names, so it stays as upstream defines it. */
.gh-canvas,
.kg-width-full.kg-content-wide {
    --main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2);
    --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
    --full: minmax(var(--container-gap), 1fr);

    display: grid;
    grid-template-columns:
        [full-start] var(--full)
        [wide-start] var(--wide)
        [main-start] var(--main) [main-end]
        var(--wide) [wide-end]
        var(--full) [full-end];
}

.gh-canvas > * {
    grid-column: main;
}

.kg-width-wide,
.kg-content-wide > div {
    grid-column: wide;
}

.kg-width-full {
    grid-column: full;
}

/* 6. Site navigation
/* ---------------------------------------------------------- */

/* The header is a port of `MarketingHeader` in the product repo
/* (`frontend/src/components/landing/shared/marketing-header.tsx`), so the
/* measurements below are that component's Tailwind classes written out: the
/* blog shares an origin with the marketing site and a visitor crossing into
/* /blog must not see the chrome change under them.
/*
/* The desktop breakpoint is 1024px because that is the `lg:` the React header
/* switches on. Above it the mega menus are laid out against the header, not
/* against their trigger, which is why `.ola-nav-item` stays `static`. */

.ola-nav {
    position: relative;
    z-index: 50;
    background-color: var(--color-white);
}

/* The marketing header carries no bottom rule, and neither does this one where
/* a teal hero follows it. Articles and pages open on white, though, so there
/* the bar would dissolve into the content under it. */
.post-template .ola-nav,
.page-template .ola-nav {
    border-bottom: 1px solid var(--color-hairline);
}

/* Open, the mobile menu owns the viewport: the bar pins to the top and the
/* panel fills everything below it, matching the React header's `fixed inset-x-0
/* top-0`. `main.js` locks the page behind it. */
.ola-nav.is-open {
    position: fixed;
    inset-inline: 0;
    top: 0;
}

.ola-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--nav-height);
    padding-inline: var(--shell-gutter);
}

.ola-nav-brand img {
    display: block;
    height: 32px;
    width: auto;
}

.ola-nav-menu {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Static so the mega menus resolve against `.ola-nav` and can run the full
/* width of the header, the way the React panels do. */
.ola-nav-item {
    position: static;
}

.ola-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: var(--color-body);
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: color 0.2s ease;
}

.ola-nav-link:hover,
.ola-nav-item.is-open > .ola-nav-link {
    color: var(--color-teal);
}

/* The marketing header cannot mark the blog as the current section — it is a
/* different app. Here it can, and a top bar with nothing active on it reads as
/* broken, so the label takes the brand colour without a weight change that
/* would shift the rest of the row. */
.ola-nav-link.is-current {
    color: var(--color-teal);
}

.ola-nav-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.ola-nav-item.is-open > .ola-nav-link svg {
    transform: rotate(180deg);
}

/* Mega menus
/* ---------------------------------------------------------- */

.ola-nav-dropdown {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 10;
}

.ola-nav-item.is-open > .ola-nav-dropdown {
    display: block;
}

/* Products and Solutions hang a contained surface off the header. The panel —
/* not the full-bleed wrapper — carries the background, border and shadow, so
/* every menu ends at the same 1280px edge as the header content. */
.ola-menu-panel {
    margin-inline: auto;
    max-width: var(--shell-width);
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-hairline);
    border-top: 0;
    border-end-start-radius: 24px;
    border-end-end-radius: 24px;
    box-shadow: 0 10px 20px 3px rgb(0 0 0 / 0.04);
}

.ola-menu-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding: 48px;
}

.ola-menu-feature {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
}

.ola-menu-feature-art {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: var(--radius-control);
    background-color: var(--color-teal-strong);
}

.ola-menu-feature-art img {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
}

.ola-menu-feature h2 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-ink);
}

.ola-menu-feature p {
    font-size: 1.4rem;
    line-height: 20px;
    color: var(--color-ink);
}

.ola-menu-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    height: 56px;
    padding: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-teal);
}

.ola-menu-explore img {
    width: 16px;
    height: 16px;
}

.ola-menu-group {
    min-width: 0;
}

.ola-menu-group h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-ink);
}

.ola-menu-group h2 img {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.ola-menu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* The stacked pair centres against the taller columns beside it. */
.ola-menu-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.ola-menu-solutions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    padding: 48px;
}

.ola-menu-solution {
    display: grid;
    gap: 32px;
}

.ola-menu-solution-head h2 {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-ink);
}

.ola-menu-solution-head img {
    display: block;
    width: 100%;
    height: 180px;
    margin-top: 20px;
    object-fit: cover;
    border-radius: var(--radius-control);
}

.ola-menu-solution-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 4px;
}

@media (min-width: 1280px) {
    .ola-menu-solution {
        grid-template-columns: 270px 1fr;
    }
}

/* Resources is the one menu the marketing site runs full-bleed: three links and
/* no artwork do not need a contained surface. */
.ola-nav-dropdown.is-wide {
    background-color: var(--color-white);
    border-top: 1px solid var(--color-hairline-soft);
    box-shadow: 0 22px 45px rgb(6 12 21 / 0.12);
}

.ola-menu-resources {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-inline: auto;
    max-width: 960px;
    padding: 40px 32px;
}

/* Menu entries
/* ---------------------------------------------------------- */

.ola-menu-item {
    display: block;
}

/* Only the Products grid insets its rows; the Solutions and Resources lists
/* space themselves with the gap instead. */
.ola-menu-products .ola-menu-item {
    padding: 4px 8px;
}

.ola-menu-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: var(--color-ink);
    transition: color 0.2s ease;
}

.ola-menu-item:hover .ola-menu-item-title {
    color: var(--color-teal);
}

.ola-menu-item-desc {
    display: block;
    margin-top: 4px;
    font-size: 1.2rem;
    line-height: 16px;
    color: var(--color-body);
}

/* An item with no route still appears, badged, rather than being hidden: the
/* catalog is the roadmap, and a link that 404s is worse than a labelled gap. */
.ola-menu-item.is-disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.ola-menu-item.is-disabled .ola-menu-item-title,
.ola-menu-item.is-disabled:hover .ola-menu-item-title {
    color: #657079;
}

.ola-menu-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 16px;
    color: var(--color-teal);
    background-color: var(--color-badge);
    border-radius: 999px;
}

.ola-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ola-nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-teal);
    background: none;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-control);
    cursor: pointer;
}

.ola-nav-burger svg {
    width: 20px;
    height: 20px;
}

.ola-nav-burger svg:last-child,
.ola-nav.is-open .ola-nav-burger svg:first-child {
    display: none;
}

.ola-nav.is-open .ola-nav-burger svg:last-child {
    display: block;
}

/* Mobile menu
/* ---------------------------------------------------------- */

/* Two levels of disclosure — section, then group — so a phone is never handed
/* the whole catalog at once. `<details name>` makes the siblings at each level
/* mutually exclusive, which is what the React menu's single-open state does;
/* browsers without it simply allow more than one open at a time. */

.ola-nav-mobile {
    display: none;
    position: fixed;
    inset-inline: 0;
    top: var(--nav-height);
    bottom: 0;
    flex-direction: column;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-hairline-soft);
}

.ola-nav.is-open .ola-nav-mobile {
    display: flex;
}

.ola-nav-mobile-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px var(--shell-gutter);
}

.ola-nav-mobile summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.ola-nav-mobile summary::-webkit-details-marker {
    display: none;
}

.ola-nav-mobile summary svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ola-nav-mobile details[open] > summary svg {
    transform: rotate(180deg);
}

.ola-nav-mobile-section {
    border-bottom: 1px solid var(--color-hairline-soft);
}

.ola-nav-mobile-section > summary {
    min-height: 56px;
    padding: 12px 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-ink);
}

.ola-nav-mobile-section > summary svg {
    width: 20px;
    height: 20px;
    color: var(--color-teal);
}

.ola-nav-mobile-groups {
    padding-bottom: 12px;
}

.ola-nav-mobile-groups.is-flat {
    display: grid;
    gap: 4px;
    padding-block: 8px 12px;
}

.ola-nav-mobile-group {
    border-top: 1px solid var(--color-hairline-softer);
}

.ola-nav-mobile-group:first-child {
    border-top: 0;
}

.ola-nav-mobile-group > summary {
    min-height: 48px;
    padding: 8px 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-teal);
}

.ola-nav-mobile-group > summary svg {
    width: 16px;
    height: 16px;
}

.ola-nav-mobile-group > .ola-nav-mobile-item:last-child {
    margin-bottom: 8px;
}

.ola-nav-mobile-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 1.4rem;
    line-height: 20px;
    color: var(--color-body);
    border-radius: var(--radius-control);
}

.ola-nav-mobile-item:hover {
    color: var(--color-teal);
    background-color: var(--color-teal-softer);
}

.ola-nav-mobile-item.is-disabled {
    color: #879198;
    cursor: not-allowed;
}

.ola-nav-mobile-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-top: 12px;
    padding: 0 16px;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-teal);
    border-radius: var(--radius-field);
}

/* The demo CTA stays out of the scroller, so it is reachable without paging
/* through the catalog first. */
.ola-nav-mobile-cta {
    padding: 16px var(--shell-gutter) calc(16px + env(safe-area-inset-bottom));
    background-color: var(--color-white);
    border-top: 1px solid var(--color-hairline-soft);
}

.ola-nav-mobile-cta .ola-button {
    display: flex;
    width: 100%;
    height: 56px;
    padding: 0;
    border-radius: var(--radius-field);
}

@media (min-width: 640px) {
    .ola-nav-brand img {
        height: 40px;
    }
}

@media (max-width: 1023px) {
    .ola-nav-menu,
    .ola-nav-actions {
        display: none;
    }

    .ola-nav-burger {
        display: inline-flex;
        margin-inline-start: auto;
    }
}

/* 7. Page hero
/* ---------------------------------------------------------- */

.ola-hero {
    padding: var(--section-space) var(--shell-gutter);
    color: var(--color-white);
    background-color: var(--color-teal);
}

.ola-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 761px;
    text-align: center;
}

.ola-hero-title {
    font-family: var(--gh-font-heading, var(--font-display));
    font-size: clamp(3.6rem, 1.6rem + 3.2vw, 6.4rem);
    font-weight: 700;
    line-height: 1.125;
    letter-spacing: -0.01em;
}

.ola-hero-title.is-compact {
    font-size: clamp(3.2rem, 2rem + 2vw, 4.8rem);
    line-height: 1.17;
}

.ola-hero-subtitle {
    font-size: clamp(1.7rem, 1.5rem + 0.4vw, 2rem);
    line-height: 1.4;
    letter-spacing: 0;
}

.ola-hero-avatar {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
}

.ola-hero-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ola-hero-social svg {
    width: 22px;
    height: 22px;
}

/* 8. Category filters
/* ---------------------------------------------------------- */

.ola-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.ola-filter-tabs {
    display: flex;
    align-items: flex-end;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 2px solid var(--color-rule);
}

.ola-filter-tabs::-webkit-scrollbar {
    display: none;
}

.ola-filter {
    padding: 8px 16px;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: var(--color-muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ola-filter:hover {
    color: var(--color-ink);
}

.ola-filter.is-active {
    font-weight: 600;
    color: var(--color-teal);
    border-bottom-color: var(--color-teal);
}

.ola-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 281px;
    max-width: 100%;
    padding: 16px;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--color-placeholder);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.ola-search:hover {
    border-color: var(--color-teal);
}

.ola-search svg {
    width: 24px;
    height: 24px;
    color: var(--color-body);
}

/* 9. Post feed
/* ---------------------------------------------------------- */

.ola-posts {
    padding: var(--section-space) var(--shell-gutter);
    background-color: var(--color-white);
}

.ola-posts-inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.ola-posts-title {
    font-family: var(--gh-font-heading, var(--font-display));
    font-size: clamp(2.8rem, 2rem + 1.4vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
}

.ola-posts-empty {
    color: var(--color-body);
}

.ola-feed {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* Related posts sit under the article rather than opening a page, so the band
/* needs a rule to separate it from the content above. */
.post-template .ola-posts {
    border-top: 1px solid var(--color-rule);
}

.ola-card {
    display: flex;
    background-color: var(--color-white);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ola-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.1);
}

.ola-card-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    width: 100%;
}

.ola-card-image {
    aspect-ratio: 373 / 229;
    border-radius: var(--radius-control);
    overflow: hidden;
    background-color: var(--color-teal-softer);
}

.ola-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ola-card-image.is-empty {
    display: grid;
    place-items: center;
}

.ola-card-image.is-empty img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.ola-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 16px;
    padding: 12px 0;
}

.ola-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ola-card-date {
    font-size: 1.4rem;
    line-height: 20px;
    color: var(--color-body);
}

.ola-card-tag {
    padding: 4px 8px;
    font-size: 1.4rem;
    line-height: 20px;
    color: var(--color-teal);
    background-color: var(--color-chip);
    border-radius: var(--radius-control);
}

.ola-card-title {
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-ink);
}

.ola-card-excerpt {
    font-size: 1.4rem;
    line-height: 20px;
    color: var(--color-body);
}

.ola-card-author {
    margin-top: auto;
    font-size: 1.3rem;
    line-height: 20px;
    color: var(--color-muted);
}

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

@media (max-width: 767px) {
    .ola-posts-inner {
        gap: 40px;
    }

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

    .ola-filters {
        align-items: stretch;
    }

    .ola-search {
        width: 100%;
    }
}

/* 10. Newsletter
/* ---------------------------------------------------------- */

.ola-newsletter {
    padding: clamp(56px, 5.55vw, 80px) var(--shell-gutter);
    color: var(--color-white);
    background-color: var(--color-teal);
}

.ola-newsletter-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 761px;
    text-align: center;
}

.ola-newsletter-title {
    font-family: var(--gh-font-heading, var(--font-display));
    font-size: clamp(3.2rem, 2rem + 2vw, 4.8rem);
    font-weight: 700;
    line-height: 1.17;
    letter-spacing: -0.01em;
}

.ola-newsletter-subtitle {
    font-size: 1.6rem;
    line-height: 24px;
}

.ola-subscribe {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(446px, 100%);
    padding: 4px 4px 4px 16px;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-field);
}

.ola-subscribe-input {
    flex: 1;
    min-width: 0;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: var(--color-ink);
    background: none;
    border: 0;
    outline: none;
}

.ola-subscribe-input::placeholder {
    color: var(--color-body);
}

.ola-subscribe .ola-button {
    position: relative;
    padding: 16px;
}

.ola-subscribe-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Ghost's members script drives these states by adding a class to the form. */
.ola-subscribe-done,
.ola-subscribe > .ola-button > svg {
    display: none;
}

.ola-subscribe.loading {
    pointer-events: none;
}

.ola-subscribe.loading .ola-subscribe-label {
    visibility: hidden;
}

.ola-subscribe.loading > .ola-button > svg {
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
}

.ola-subscribe.success {
    pointer-events: none;
}

.ola-subscribe.success .ola-subscribe-label {
    display: none;
}

.ola-subscribe.success .ola-subscribe-done {
    display: inline;
}

.ola-subscribe.error {
    border-color: #e34935;
}

.ola-subscribe-error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 20px;
    color: var(--color-white);
}

/* 11. Demo CTA and dialog
/* ---------------------------------------------------------- */

/* Ports of `FinalCtaSection` and `DemoRequestDialog` / `DemoRequestForm`
/* (product repo, `frontend/src/components/landing/conversion/`). Every
/* marketing page closes on this band and opens this dialog from it, so an
/* article that ends without them drops the reader off the end of the site. */

.ola-cta {
    padding: 64px var(--shell-gutter);
    background-color: var(--color-white);
}

.ola-cta-panel {
    position: relative;
    margin-inline: auto;
    max-width: var(--shell-width);
    overflow: hidden;
    padding: 80px 24px;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-teal);
    border-radius: 32px;
}

/* Decorative, and large enough to swallow taps if it stayed in the flow. */
.ola-cta-stars {
    position: absolute;
    left: -144px;
    top: -32px;
    width: 455px;
    height: 455px;
    opacity: 0.4;
    pointer-events: none;
}

.ola-cta-body {
    position: relative;
    z-index: 10;
    margin-inline: auto;
    max-width: 790px;
}

.ola-cta-title {
    font-family: var(--gh-font-heading, var(--font-display));
    font-size: clamp(3.2rem, 4vw, 4.8rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.035em;
}

.ola-cta-subtitle {
    margin-inline: auto;
    margin-top: 24px;
    max-width: 760px;
    font-size: 1.8rem;
    line-height: 28px;
}

.ola-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 48px;
}

.ola-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding-inline: 20px;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-teal);
    background-color: #f7f9fa;
    border-radius: var(--radius-control);
    transition: background-color 0.2s ease;
}

.ola-cta-button:hover {
    background-color: var(--color-white);
}

.ola-cta-button svg {
    width: 20px;
    height: 20px;
}

/* The apps are not published yet. A label that says so beats a link that
/* invents a store URL, so this is deliberately not interactive. */
.ola-cta-stores {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding-inline: 24px;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-white);
    border: 1px solid rgb(255 255 255 / 0.8);
    border-radius: var(--radius-control);
}

.ola-cta-stores img {
    flex-shrink: 0;
    width: 20px;
    height: 24px;
}

.ola-cta-stores img:last-of-type {
    width: 22px;
}

@media (min-width: 640px) {
    .ola-cta-actions {
        flex-direction: row;
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .ola-cta {
        padding-block: 80px;
    }

    .ola-cta-panel {
        padding: 120px 80px;
        border-radius: 48px;
    }

    .ola-cta-subtitle {
        font-size: 2rem;
    }
}

/* Dialog
/* ---------------------------------------------------------- */

/* On a phone the dialog is a sheet: it starts below the header and the panel
/* runs to the bottom edge, so the form has the whole screen. From `sm` up it
/* becomes a centred card over a dimmed page. */
.ola-demo {
    position: fixed;
    inset-inline: 0;
    top: var(--nav-height);
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
}

.ola-demo[hidden] {
    display: none;
}

.ola-demo-scroll {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
}

.ola-demo-panel,
.ola-demo-success {
    width: 100%;
    background-color: var(--color-white);
    text-align: left;
}

.ola-demo-panel {
    min-height: 100%;
    padding: 48px 16px;
    border-start-start-radius: 32px;
    border-start-end-radius: 32px;
}

.ola-demo-panel[hidden],
.ola-demo-success[hidden] {
    display: none;
}

.ola-demo-close-row {
    display: flex;
    justify-content: flex-end;
}

.ola-demo-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #7a8a91;
    background: none;
    border: 0;
    cursor: pointer;
}

.ola-demo-close svg {
    width: 20px;
    height: 20px;
}

.ola-demo-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.ola-demo-title {
    font-family: var(--gh-font-heading, var(--font-display));
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 40px;
    color: var(--color-ink);
}

.ola-demo-lede {
    max-width: 750px;
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: var(--color-ink);
}

/* Honeypot: reachable to a bot reading the DOM, out of reach of a person and
/* of a screen reader following the tab order. */
.ola-demo-hp-label,
.ola-demo-hp {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ola-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.ola-demo-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ola-demo-field.is-half {
    grid-column: span 1;
}

.ola-demo-field.is-wide,
.ola-demo-field.is-full {
    grid-column: span 2;
}

.ola-demo-label {
    display: block;
    font-size: 1.6rem;
    line-height: 24px;
    color: var(--color-ink);
}

.ola-demo-required {
    color: #e22d2d;
}

.ola-demo-input,
.ola-demo-textarea {
    width: 100%;
    padding-inline: 12px;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    line-height: 24px;
    color: var(--color-ink);
    background-color: var(--color-white);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-control);
    outline: none;
    transition: border-color 0.2s ease;
}

.ola-demo-input {
    height: 56px;
}

.ola-demo-textarea {
    height: 125px;
    padding-block: 16px;
    resize: none;
}

.ola-demo-input::placeholder,
.ola-demo-textarea::placeholder {
    color: #7a8a91;
}

.ola-demo-input:focus,
.ola-demo-textarea:focus,
.ola-demo-phone:focus-within {
    border-color: var(--color-teal);
}

/* A native select cannot style its placeholder option separately, so the
/* grey-until-chosen state is a class the change handler clears. */
select.ola-demo-input {
    appearance: none;
    padding-inline-end: 40px;
}

select.ola-demo-input.is-placeholder {
    color: #7a8a91;
}

.ola-demo-select {
    position: relative;
    display: block;
}

.ola-demo-select img {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 7px;
    transform: translateY(-50%);
    pointer-events: none;
}

.ola-demo-phone {
    display: flex;
    overflow: hidden;
    height: 56px;
    background-color: var(--color-white);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-control);
    transition: border-color 0.2s ease;
}

.ola-demo-phone-prefix {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
    font-size: 1.6rem;
    color: var(--color-body);
}

.ola-demo-phone-prefix img:first-child {
    width: 24px;
    height: 18px;
}

.ola-demo-phone-prefix img:nth-child(2) {
    width: 10px;
    height: 7px;
}

.ola-demo-phone-divider {
    width: 1px;
    height: 56px;
}

.ola-demo-phone-input {
    min-width: 0;
    flex: 1;
    padding-inline: 12px;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    line-height: 24px;
    color: var(--color-ink);
    border: 0;
    outline: none;
}

.ola-demo-phone-input::placeholder {
    color: #7a8a91;
}

.ola-demo-submit-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 32px;
}

.ola-demo-submit {
    height: 56px;
    padding-inline: 24px;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-teal);
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ola-demo-submit:hover {
    background-color: #14685e;
}

.ola-demo-submit:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ola-demo-error {
    font-size: 1.4rem;
    font-weight: 500;
    color: #c43434;
}

.ola-demo-error[hidden] {
    display: none;
}

.ola-demo-success {
    align-self: flex-start;
    max-width: 418px;
    min-height: 448px;
    padding: 32px 16px;
    text-align: center;
    border: 1px solid var(--color-rule);
    border-radius: 24px;
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.02), 0 5px 13px -5px rgb(0 0 0 / 0.05);
}

.ola-demo-success > img {
    display: block;
    margin-inline: auto;
    width: 120px;
    height: 120px;
}

.ola-demo-success-title {
    margin-top: 24px;
    font-family: var(--gh-font-heading, var(--font-display));
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 32px;
    color: var(--color-ink);
}

.ola-demo-success-body {
    margin-top: 12px;
    font-size: 1.6rem;
    line-height: 24px;
    color: var(--color-body);
}

.ola-demo-success .ola-demo-submit {
    width: 100%;
    margin-block: 32px;
}

@media (min-width: 640px) {
    .ola-demo {
        top: 0;
        padding: 40px 32px;
        background-color: rgb(6 12 21 / 0.7);
        backdrop-filter: blur(4px);
    }

    .ola-demo-scroll {
        align-items: center;
    }

    .ola-demo-panel {
        min-height: 0;
        max-width: 846px;
        padding: 48px;
        border-radius: 32px;
        box-shadow: 0 5px 24px rgb(0 0 0 / 0.08);
    }

    /* React hides the close button from `sm` up and drops this margin with
    /* it. The button stays here — a dialog with no visible way out is a real
    /* trap on desktop, where there is no swipe-away — so the margin only
    /* shrinks. */
    .ola-demo-head {
        margin-top: 16px;
    }

    .ola-demo-title {
        letter-spacing: -1.5px;
    }

    .ola-demo-lede {
        color: var(--color-body);
    }

    .ola-demo-submit-row {
        align-items: flex-end;
    }

    .ola-demo-success {
        align-self: center;
    }
}

@media (min-width: 768px) {
    .ola-demo-field.is-wide {
        grid-column: span 1;
    }
}

/* 12. Site footer
/* ---------------------------------------------------------- */

.ola-footer {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 5.55vw, 80px) var(--shell-gutter) 0;
    color: var(--color-white);
    background-color: var(--color-teal);
}

.ola-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.ola-footer a:hover {
    color: rgb(255 255 255 / 0.78);
}

.ola-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

.ola-footer-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 401px;
}

.ola-footer-logo {
    width: 141px;
    height: 32px;
}

.ola-footer-intro p {
    font-size: 1.4rem;
    line-height: 20px;
}

.ola-footer-sales {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ola-footer-sales-label {
    font-size: 2rem;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0;
}

.ola-footer-sales-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ola-footer-sales .ola-input {
    width: 316px;
    max-width: 100%;
}

.ola-footer-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px;
}

.ola-footer-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 1.6rem;
    line-height: 24px;
}

.ola-footer-column h2 {
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.5px;
}

.ola-footer-column-stack {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.ola-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 1.6rem;
    line-height: 24px;
}

.ola-footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ola-footer-social svg {
    width: 24px;
    height: 24px;
}

/* The oversized wordmark closes the footer. It fades into the teal rather than
/* ending on a hard edge, matching the blurred plate used in the design. */
.ola-footer-wordmark {
    position: relative;
    margin-bottom: -2px;
}

.ola-footer-wordmark img {
    display: block;
    width: 100%;
    height: auto;
}

.ola-footer-wordmark::after {
    content: "";
    position: absolute;
    inset: 58% 0 0;
    background: linear-gradient(to top, var(--color-teal) 12%, transparent);
    pointer-events: none;
}

@media (max-width: 991px) {
    .ola-footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }

    .ola-footer-top {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .ola-footer-sales-row {
        flex-direction: column;
    }

    .ola-footer-sales .ola-input,
    .ola-footer-sales .ola-button {
        width: 100%;
    }
}

/* 13. Post/page
/* ---------------------------------------------------------- */

/* 13.1. Article */

.gh-article {
    --container-width: 1120px;

    word-break: break-word;
}

.gh-article-header {
    margin: clamp(40px, 3.64vw + 25.45px, 72px) 0 40px;
}

.gh-article-tag {
    margin-bottom: 12px;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ghost-accent-color);
}

.gh-article-title {
    font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1));
    line-height: 1.1;
    letter-spacing: -0.022em;
}

.gh-article-excerpt {
    margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
    max-width: 720px;
    font-size: clamp(1.7rem, 0.23vw + 1.61rem, 1.9rem);
    line-height: 1.45;
    letter-spacing: -0.018em;
}

.gh-article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
}

.gh-article-author-image {
    display: flex;
    margin-right: 8px;
}

.gh-article-author-image a {
    position: relative;
    margin: 0 -8px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background-color: var(--color-light-gray);
    border-radius: 50%;
    border: 3px solid var(--background-color);
}

.gh-article-author-image a:first-child {
    z-index: 10;
}

.gh-article-author-image a:nth-child(2) {
    z-index: 9;
}

.gh-article-author-image a:nth-child(3) {
    z-index: 8;
}

.gh-article-author-image :is(img, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-article-meta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gh-article-author-name {
    font-size: 1.6rem;
    font-weight: 650;
    letter-spacing: -0.013em;
}

.gh-article-meta-content {
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.006em;
    color: var(--color-secondary-text);
}

.gh-article-image {
    grid-column: wide;
    margin-top: 40px;
}

.gh-article-image img {
    width: 100%;
}

/* 13.2. Page template */

.page-template .gh-article-header {
    margin-block: 72px 32px;
}

/* 13.3. Page without header */

.page-template .gh-content:only-child > *:first-child:not(.kg-width-full) {
    margin-top: 64px;
}

.page-template .gh-content > *:last-child:not(.kg-width-full) {
    margin-bottom: 6vw;
}

.page-template .gh-footer {
    margin-top: 0;
}

/* 14. Content
/* ---------------------------------------------------------- */

/* Content refers to styling all page and post content that is
created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */

.gh-content {
    font-size: var(--content-font-size, 1.7rem);
    letter-spacing: -0.01em;
}

/* Default vertical spacing */
.gh-content > * + * {
    margin-top: calc(28px * var(--content-spacing-factor, 1));
    margin-bottom: 0;
}

/* Remove space between full-width cards */
.gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
    margin-top: 0;
}

/* Add back a top margin to all headings,
unless a heading is the very first element in the post content */
.gh-content > [id]:not(:first-child) {
    margin-top: calc(56px * var(--content-spacing-factor, 1));
}

/* Add drop cap setting */
.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
    margin :0 0.2em 0em 0;
    font-size: 3.1em;
    float:left;
    line-height: 1;
    margin-left: -1px;
    font-weight: 700;
}

.has-serif-body.post-template:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content.drop-cap > p:first-of-type:first-letter {
    font-size: 3.2em;
}

/* Add a small margin between a heading and paragraph after it */
.gh-content > [id] + p {
    margin-top: calc(12px * var(--content-spacing-factor, 1));
}

/* A larger margin before/after dividers, blockquotes and embeds */
.gh-content > :is(hr, blockquote, iframe) {
    position: relative;
    margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
}

.gh-content > :is(hr, blockquote, iframe) + * {
    margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
}

/* Now the content typography styles */
.gh-content h1 {
    font-size: calc(2.2em * var(--factor, 1));
    letter-spacing: -0.02em;
}

.gh-content h2 {
    font-size: calc(1.6em * var(--factor, 1));
    letter-spacing: -0.02em;
}

.gh-content h3 {
    font-size: calc(1.3em * var(--factor, 1));
    letter-spacing: -0.017em;
}

.gh-content a {
    color: var(--ghost-accent-color);
    text-decoration: underline;
}

.gh-content .kg-callout-card .kg-callout-text,
.gh-content .kg-toggle-card .kg-toggle-content > :is(ul, ol, p) {
    font-size: 0.95em;
}

.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > blockquote,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ol,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ul,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > dl,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > p,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-callout-text,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ol,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ul,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > p {
    font-family: var(--font-serif-alt);
}

.gh-content :is(ul, ol) {
    padding-left: 28px;
}

.gh-content :is(li + li, li :is(ul, ol)) {
    margin-top: 8px;
}

.gh-content ol ol li {
    list-style-type: lower-alpha;
}

.gh-content ol ol ol li {
    list-style-type: lower-roman;
}

.gh-content hr {
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    border: 0;
}

.gh-content .gh-table {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.gh-content .gh-table table {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    white-space: nowrap;
    vertical-align: top;
    border-spacing: 0;
    border-collapse: collapse;
}

.gh-content .gh-table table th {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-darkgrey);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.gh-content .gh-table table :is(th, td),
.gh-content .gh-table table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--color-border);
}

.gh-content .gh-table table :is(th, td):first-child {
    padding-left: 0;
}

.gh-content .gh-table table :is(th, td):last-child {
    padding-right: 0;
}

.gh-content pre {
    overflow: auto;
    padding: 16px;
    font-size: 1.5rem;
    line-height: 1.5em;
    background: var(--color-lighter-gray);
    border-radius: 6px;
    font-family: var(--font-mono);
}

.gh-content :not(pre) > code {
    vertical-align: baseline;
    padding: 0.15em 0.4em;
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1em;
    background: var(--color-lighter-gray);
    border-radius: 0.25em;
    font-family: var(--font-mono);
}

/* 15. Cards
/* ---------------------------------------------------------- */

/* Add extra margin before/after any cards, except for when immediately preceeded by a heading */

.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
    margin-top: calc(48px * var(--content-spacing-factor, 1));
}

.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
    margin-top: calc(48px * var(--content-spacing-factor, 1));
}

.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full {
    margin-top: calc(68px * var(--content-spacing-factor, 1));
}

.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) {
    margin-top: calc(68px * var(--content-spacing-factor, 1));
}

/* Image */

.kg-image {
    margin-right: auto;
    margin-left: auto;
}

/* Embed */

.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Gallery */

.kg-image[width][height],
.kg-gallery-image {
    cursor: pointer;
}

.kg-image-card a:hover,
.kg-gallery-image a:hover {
    opacity: 1 !important;
}

/* Toggle */

.kg-card.kg-toggle-card .kg-toggle-heading-text {
    font-size: 2rem;
    font-weight: 700;
}

.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-toggle-card .kg-toggle-heading-text {
    font-family: var(--font-serif);
}

.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-toggle-card .kg-toggle-heading-text {
    font-family: var(--font-mono);
}

/* Callout */

.kg-callout-card.kg-card {
    border-radius: 0.25em;
}

.kg-callout-card-accent a {
    text-decoration: underline;
}

/* Blockquote */

blockquote:not([class]) {
    padding-left: 2rem;
    border-left: 4px solid var(--ghost-accent-color);
}

blockquote.kg-blockquote-alt {
    font-style: normal;
    font-weight: 400;
    color: var(--color-secondary-text);
}

/* Button */

.kg-card.kg-button-card .kg-btn {
    height: unset;
    padding: .6em 1.2em;
    text-align: center;
    font-size: 1em;
    line-height: 1.2em;
}

/* Header */

.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-card.kg-header-card h2.kg-header-card-header {
    font-family: var(--font-serif);
}

.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-card.kg-header-card h2.kg-header-card-header {
    font-family: var(--font-mono);
}

.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-header-card h3.kg-header-card-subheader {
    font-family: var(--font-serif);
}

/* Bookmark */

.kg-bookmark-card .kg-bookmark-container {
    border-radius: 0.25em !important;
}

.kg-bookmark-card .kg-bookmark-container:hover {
    opacity: 1;
}

.kg-bookmark-card a.kg-bookmark-container,
.kg-bookmark-card a.kg-bookmark-container:hover {
    background: var(--background-color) !important;
    color: var(--color-darker-gray) !important;
}

.kg-bookmark-card .kg-bookmark-content {
    padding: 1.15em;
}

.kg-bookmark-card .kg-bookmark-title {
    font-size: 0.9em;
}

.kg-bookmark-card .kg-bookmark-description {
    max-height: none;
    margin-top: 0.3em;
    font-size: 0.8em;
}

.kg-bookmark-card .kg-bookmark-metadata {
    font-size: 0.8em;
}

.kg-bookmark-card .kg-bookmark-thumbnail img {
    border-radius: 0 0.2em 0.2em 0;
}

/* Product */

.kg-product-card.kg-card .kg-product-card-image {
    margin-bottom: 12px;
}

.kg-product-card.kg-card a.kg-product-card-button {
    height: 2.8em;
    margin-top: 12px;
}

.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-product-card.kg-card .kg-product-card-title {
    font-family: var(--font-serif);
}

.has-mono-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-product-card.kg-card .kg-product-card-title {
    font-family: var(--font-mono);
}

.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-product-card-description :is(p, ul, ol) {
    font-family: var(--font-serif-alt);
}

/* File */

.kg-file-card.kg-card .kg-file-card-container {
    padding: 0.6em;
}

.kg-file-card.kg-card .kg-file-card-contents {
    margin: 4px 8px 6px;
}

.kg-file-card.kg-card .kg-file-card-metadata {
    font-size: 0.9em;
}

.kg-file-card.kg-card .kg-file-card-filesize::before {
    margin-right: 6px;
    margin-left: 6px;
}

/* Caption */

figcaption {
    margin-top: 12px;
    font-size: 1.4rem;
    text-align: center;
}

.kg-card.kg-width-full figcaption {
    padding: 0 16px;
}

figcaption a {
    color: var(--ghost-accent-color);
    text-decoration: underline;
}

/* 16. Comments
/* ---------------------------------------------------------- */

.gh-comments {
    margin-top: 48px;
}

/* 17. Article brand layer
/* ----------------------------------------------------------

Sections 12–15 are inherited from Ghost's Source theme and kept close to
upstream so the fork stays legible. This block is the Olareport identity over
them, collected in one place rather than scattered through the file, so a future
re-fork only has to carry it forward.

Rules here intentionally sit last and rely on source order rather than
`!important`.

*/

.gh-article {
    padding-inline: 0;
}

.gh-article-title {
    font-family: var(--gh-font-heading, var(--font-display));
    font-weight: 700;
    letter-spacing: -0.03em;
}

.gh-article-excerpt {
    color: var(--color-body);
}

/* Long-form post bodies keep the reading font rather than the display face —
/* Space Grotesk is a display type and tires the eye at paragraph length. */
.gh-content :is(h1, h2, h3, h4) {
    font-family: var(--gh-font-heading, var(--font-display));
    letter-spacing: -0.03em;
}

.gh-article-image,
.gh-article-image img,
.kg-image-card img,
.kg-bookmark-card {
    border-radius: var(--radius-panel);
    overflow: hidden;
}

/* The article's tag reads as the same object as the chip on a feed card, so it
/* wears the same pill instead of inventing a second treatment for one label. */
.gh-article-tag {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    margin-bottom: 16px;
    padding: 4px 8px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-teal);
    background-color: var(--color-chip);
    border-radius: var(--radius-control);
}

.gh-article-tag:hover {
    color: var(--color-white);
    background-color: var(--color-teal);
}

.gh-article-meta-content {
    color: var(--color-body);
}

.gh-article-author-image a {
    border-color: var(--color-white);
    background-color: var(--color-rule);
}

.gh-meta-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.gh-content a:not(.kg-btn, .kg-bookmark-container, .kg-nft-card-container) {
    color: var(--color-teal);
    text-decoration: underline;
    text-decoration-color: rgb(26 122 110 / 0.35);
    text-underline-offset: 0.2em;
}

.gh-content a:not(.kg-btn, .kg-bookmark-container, .kg-nft-card-container):hover {
    text-decoration-color: currentcolor;
}

.gh-content blockquote:not([class]) {
    border-left: 3px solid var(--color-teal);
}
/* 18. Lightbox
/* ---------------------------------------------------------- */

.pswp {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3999999;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    outline: none;
    backface-visibility: hidden;
    -webkit-text-size-adjust: 100%;
}

.pswp img {
    max-width: none;
}

.pswp--animate_opacity {
    opacity: 0.001;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    will-change: opacity;
}

.pswp--open {
    display: block;
}

.pswp--zoom-allowed .pswp__img {
    cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
    cursor: grab;
}

.pswp--dragging .pswp__img {
    cursor: grabbing;
}

.pswp__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

.pswp__scroll-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    touch-action: none;
    backface-visibility: hidden;
}

.pswp__container,
.pswp__img {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transform-origin: left top;
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
    transition: none;
}

.pswp__item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.pswp__img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
}

.pswp__img--placeholder {
    backface-visibility: hidden;
}

.pswp__img--placeholder--blank {
    background: var(--color-black);
}

.pswp--ie .pswp__img {
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
}

.pswp__error-msg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -8px;
    font-size: 14px;
    line-height: 16px;
    color: var(--color-secondary-text);
    text-align: center;
}

.pswp__error-msg a {
    color: var(--color-secondary-text);
    text-decoration: underline;
}

.pswp__button {
    position: relative;
    display: block;
    float: right;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    overflow: visible;
    appearance: none;
    cursor: pointer;
    background: none;
    border: 0;
    box-shadow: none;
    transition: opacity 0.2s;
}

.pswp__button:focus,
.pswp__button:hover {
    opacity: 1;
}

.pswp__button:active {
    outline: none;
    opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.pswp__ui--over-close .pswp__button--close {
    opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    width: 44px;
    height: 44px;
    background: url("../images/default-skin.png") 0 0 no-repeat;
    background-size: 264px 88px;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left::before,
    .pswp--svg .pswp__button--arrow--right::before {
        background-image: url("../images/default-skin.svg");
    }

    .pswp--svg .pswp__button--arrow--left,
    .pswp--svg .pswp__button--arrow--right {
        background: none;
    }
}

.pswp__button--close {
    background-position: 0 -44px;
}

.pswp__button--share {
    background-position: -44px -44px;
}

.pswp__button--fs {
    display: none;
}

.pswp--supports-fs .pswp__button--fs {
    display: block;
}

.pswp--fs .pswp__button--fs {
    background-position: -44px 0;
}

.pswp__button--zoom {
    display: none;
    background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
    display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
    background-position: -132px 0;
}

.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: hidden;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
    position: absolute;
    top: 50%;
    width: 70px;
    height: 100px;
    margin-top: -50px;
    background: none;
}

.pswp__button--arrow--left {
    left: 0;
}

.pswp__button--arrow--right {
    right: 0;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    position: absolute;
    top: 35px;
    width: 32px;
    height: 30px;
    content: "";
}

.pswp__button--arrow--left::before {
    left: 6px;
    background-position: -138px -44px;
}

.pswp__button--arrow--right::before {
    right: 6px;
    background-position: -94px -44px;
}

.pswp__counter {
    position: absolute;
    top: 0;
    left: 0;
    height: 44px;
    padding: 0 15px;
    font-size: 11px;
    font-weight: 700;
    line-height: 44px;
    color: var(--color-white);
    user-select: none;
}

.pswp__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 44px;
}

.pswp__caption__center {
    max-width: 420px;
    padding: 25px 15px 30px;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.6;
    color: var(--color-white);
    text-align: center;
}

.pswp__caption__center .post-caption-title {
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before {
    padding: 0 4px;
    content: "\02022";
}

.pswp__caption--empty {
    display: none;
}

.pswp__caption--fake {
    visibility: hidden;
}

.pswp__preloader {
    position: absolute;
    top: 0;
    left: 50%;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    direction: ltr;
    will-change: opacity;
}

.pswp__preloader__icn {
    width: 20px;
    height: 20px;
    margin: 12px;
}

.pswp__preloader--active {
    opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
    background: url("../images/preloader.gif") 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
    opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 14px;
    height: 14px;
    margin: 0;
    background: none;
    opacity: 0.75;
}

.pswp--css_animation .pswp__preloader__cut {
    position: relative;
    width: 7px;
    height: 14px;
    overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin: 0;
    background: none;
    border: 2px solid var(--color-white);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
}

@media screen and (max-width: 1024px) {
    .pswp__preloader {
        position: relative;
        top: auto;
        left: auto;
        float: right;
        margin: 0;
    }
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes donut-rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-140deg);
    }

    100% {
        transform: rotate(0);
    }
}

.pswp__ui {
    z-index: 1550;
    visibility: visible;
    opacity: 1;
    -webkit-font-smoothing: auto;
}

.pswp__top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    backface-visibility: hidden;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    will-change: opacity;
}

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    visibility: visible;
}

.pswp__ui--idle .pswp__top-bar {
    opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
    opacity: 0;
}

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
    opacity: 0.001;
}

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
    display: none;
}

.pswp__element--disabled {
    display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
    background: none;
}

/* SHARE */
.gh-meta-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.has-light-text .gh-button-share {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.has-light-text .gh-button-share:hover {
    border-color: rgba(255, 255, 255, 0.85);
}

.gh-button-share {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.85);
    background: transparent;
    cursor: pointer;
    transition: all 0.4s ease;
}

.gh-button-share:hover {
    border-color: rgba(0, 0, 0, 0.5);
}