/**
 * [Main styles]
 * Contain custom styles applied to own classes.
 * This file is supposed to be separated into smaller ones once become too complex.
 *
 * Colour system: "Fresh Mist" — white/slate surfaces with a single cobalt accent
 * and a mint accent reserved for success states and highlighted tags.
 */

:root {
    --cobalt: #1c42c9;
    --cobalt-hover: #16359f;
    --cobalt-glow: rgba(28, 66, 201, .09);
    --mint: #10b981;
    --amber: #f59e0b;
    --info: #4c82f7;
    --red: #ef4444;

    --ink: #0f172a;
    --body-text: #334155;
    --muted: #475569;
    --placeholder: #64748b;
    --rule: #e2e8f0;
    --rule-strong: #cbd5e1;
    --panel: #f1f5f9;
    --code-bg: #f1f5f9;
    --code-ink: #1e293b;

    --shadow-card: 0 1.25rem 2.5rem rgba(15, 23, 42, .04), 0 .0625rem .1875rem rgba(28, 66, 201, .04);
    --shadow-raised: 0 .275rem .75rem -.0625rem rgba(15, 23, 42, .06), 0 .125rem .4rem -.0625rem rgba(15, 23, 42, .03);
    --shadow-navbar: 0 .5rem 1.75rem rgba(28, 66, 201, .06);

    /* Overwritten at runtime by assets/js/sticky-header.js. */
    --header-height: 6rem;
}

/* General styles block. */
.app-blog {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-content {
    flex: 1;
}
/* General styles block. */


/* Post styles block. */
/* The text column keeps its normal centered width (col-xl-8 offset-xl-2,
   untouched); the aside overlays the pre-existing empty margin to its
   right instead of taking space from it, and is centered within that
   margin. The card inside it sticks while the column scrolls, without
   ever floating over the fixed/stuck nav (see --header-height) or
   outliving the article's own height. */
/* The card's horizontal position (left) and the text's right margin are
   computed and set inline by assets/js/interview-aside.js, since the
   space actually available between the text column and the true right
   edge of the screen doesn't map to a fixed fraction across Bootstrap's
   breakpoints — measuring it directly is the only reliable way to
   center the card there at any window width. */
.post_has-aside {
    position: relative;
}

.blog-post__aside_desktop,
.blog-post__aside_tablet {
    position: absolute;
    top: 0;
    bottom: 0;
}

.blog-post__aside_desktop .interviewees_card,
.blog-post__aside_tablet .interviewees_card {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
}

.blog-post {
    display: flex;
    flex-direction: row-reverse;
}

.blog-post__aside_tablet {
    display: none;
}


@media (max-width: 1279px) {
    .blog-post__aside_desktop {
        display: none;
    }

    .blog-post__aside_tablet {
        display: block;
    }
}


@media (max-width: 599px) {
    .blog-post-content_has-aside {
        margin-right: 0 !important;
    }

    .blog-post {
        flex-direction: column;
    }

    .blog-post__aside_desktop,
    .blog-post__aside_tablet {
        position: static;
        margin-bottom: 10px;
    }

    .blog-post__aside_desktop .interviewees_card,
    .blog-post__aside_tablet .interviewees_card {
        position: static;
    }
}
/* Post styles block. */


/* Shared/global styles block. */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

::selection {
    background: var(--cobalt);
    color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ink);
}

/* Fluid heading sizes, matching the main site's Bootstrap RFS scale: fixed
   at 1200px and up, shrinking smoothly below it instead of staying flat. */
h1 {
    font-size: calc(1.375rem + 1.5vw);
}

h2 {
    font-size: calc(1.325rem + .9vw);
}

h3 {
    font-size: calc(1.3rem + .6vw);
}

h4 {
    font-size: calc(1.275rem + .3vw);
}

h4, h5, h6 {
    line-height: 1.4;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

@media (min-width: 1200px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.5rem;
    }
}

a {
    color: var(--cobalt);
    text-decoration: underline;
}

a:hover,
a:focus,
a:active {
    color: var(--cobalt-hover);
    text-decoration: none;
}

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Keep in-page anchor targets clear of the header. */
:target {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}
/* Shared/global styles block. */


/* Page container block.
   The main site's .container: full width on phones, 97% / 95% of the
   viewport in between, capped at 1320px from 1400px up, 12px side gutters.
   Header and footer use it so both line up with the main site exactly. */
.site-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: .75rem;
    padding-left: .75rem;
}

@media (min-width: 500px) {
    .site-container {
        max-width: 97%;
    }
}

@media (min-width: 768px) {
    .site-container {
        max-width: 95%;
    }
}

@media (min-width: 1400px) {
    .site-container {
        max-width: 1320px;
    }
}
/* Page container block. */


/* Navbar styles block.
   Mirrors the main site's header: topbar, then a brand / nav / toolbar row
   that collapses at 992px. The header sits absolutely positioned over the
   hero, so every intro-header supplies its own top clearance. JS adds
   .is-stuck once the page has scrolled past the fold, pinning it to the
   viewport. */
.site-header.navbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1030;
    display: block;
    width: 100%;
    margin-top: -1px;
    padding: 0 0 .5rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    background-color: transparent;
}

/* Collapsed menu opens over the hero, so the bar is opaque below 992px.
   Cover-image posts keep an opaque bar at every width — nav text is dark
   and an arbitrary photo underneath it can't be trusted for contrast. */
@media (max-width: 991.98px) {
    .site-header.navbar {
        background-color: #ffffff;
    }
}

.has-cover-img .site-header.navbar {
    background-color: #ffffff;
}

.site-header.navbar.is-stuck {
    position: fixed;
    z-index: 1031;
    background-color: #ffffff;
    box-shadow: var(--shadow-navbar);
    animation: site-header-show .25s ease-in-out;
}

.site-header.is-stuck .topbar {
    display: none;
}

@keyframes site-header-show {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Topbar */
.topbar {
    width: 100%;
    padding: .25rem 0;
    color: var(--muted);
    background-color: #ebeefa;
}

.topbar__inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    font-size: .75rem;
    text-align: center;
}

@media (min-width: 992px) {
    .topbar__inner {
        gap: 1rem;
    }
}

.topbar__flag {
    flex-shrink: 0;
    vertical-align: middle;
}

.topbar__text {
    align-self: center;
    margin: 0;
    line-height: 1.6;
}

.topbar a {
    color: var(--cobalt);
    text-decoration: underline;
    transition: color .2s ease-in-out;
}

.topbar a:hover {
    text-decoration: none;
}

/* Brand / nav / toolbar row: half + half with the nav wrapping below on
   small screens, a quarter / half / quarter split from 992px up. */
.site-header__bar {
    margin-top: .5rem;
}

.site-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: -.75rem;
    margin-left: -.75rem;
}

.site-header__row > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
}

.site-header__brand {
    order: 1;
    width: 50%;
}

.site-header__nav {
    order: 3;
    width: 100%;
}

.site-header__toolbar {
    display: flex;
    order: 2;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    width: 50%;
}

@media (min-width: 992px) {
    .site-header__brand {
        width: 25%;
    }

    .site-header__nav {
        order: 2;
        width: 75%;
    }

    .site-header__toolbar {
        order: 3;
        width: 0;
    }
}

.site-header .navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    padding: .375rem 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: inherit;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .site-header .navbar-brand {
        padding: .75rem 0;
    }
}

.site-header .navbar-brand img {
    vertical-align: middle;
}

.site-header__nav-divider {
    margin: .5rem 0;
    color: var(--rule);
    border: 0;
    border-top: 1px solid currentColor;
}

@media (min-width: 992px) {
    .site-header__nav-divider {
        display: none;
    }
}

.site-header .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: .535rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

@media (min-width: 992px) {
    .site-header .navbar-nav .nav-link {
        padding-right: .875rem;
        padding-left: .875rem;
    }
}

.site-header .navbar-nav .nav-item:hover > .nav-link,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .show > .nav-link {
    color: var(--cobalt);
}

/* Links sit centered on mobile (Bootstrap's mx-auto); on desktop the search
   bar's own margin-left:auto below pushes the whole group (search, links
   and the back link) over to the right instead. */
@media (min-width: 992px) {
    .site-header .navbar-nav.mx-auto {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Search bar: hidden by default, opens from a magnifying-glass toggle button
   placed first in the nav. On mobile the input unfolds below the icon; on
   desktop it slides in to the icon's left instead. Results drop down
   beneath the input either way. */
.site-header__search {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: .375rem 0;
}

@media (min-width: 992px) {
    .site-header__search {
        flex-wrap: nowrap;
        width: auto;
        padding: 0;
        margin-right: .5rem;
        margin-left: auto;
    }
}

.site-header__search-toggle {
    display: flex;
    align-items: center;
    padding: .535rem 0;
    font-size: 1rem;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .2s ease-in-out;
}

@media (min-width: 992px) {
    .site-header__search-toggle {
        padding: .535rem .875rem;
    }
}

.site-header__search-toggle:hover,
.site-header__search-toggle:focus,
.site-header__search.is-open .site-header__search-toggle {
    color: var(--cobalt);
}

/* Mobile: the icon stays first and the input unfolds as a full-width block
   underneath it. Desktop overrides this below to instead slide the input
   in from the icon, growing leftward while the icon stays put. */
.site-header__search-input {
    display: none;
    width: 100%;
    margin-top: .5rem;
    padding: .4375rem .875rem;
    font-size: .875rem;
    color: var(--ink);
    background: #f1f4fd;
    border: 1px solid transparent;
    border-radius: 2rem;
    outline: none;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.site-header__search.is-open .site-header__search-input {
    display: block;
}

.site-header__search-input::placeholder {
    color: var(--muted);
}

.site-header__search-input:focus {
    background: #ffffff;
    border-color: var(--cobalt);
}

@media (min-width: 992px) {
    .site-header__search-toggle {
        order: 2;
    }

    .site-header__search-input {
        display: block;
        order: 1;
        width: 0;
        margin-top: 0;
        padding: .4375rem 0;
        opacity: 0;
        pointer-events: none;
        transition: width .3s ease, padding .3s ease, opacity .2s ease;
    }

    .site-header__search.is-open .site-header__search-input {
        width: 22rem;
        padding: .4375rem .875rem;
        opacity: 1;
        pointer-events: auto;
    }
}

.site-header__search-results {
    display: none;
    width: 100%;
    max-height: 20rem;
    padding: .5rem;
    margin: .5rem 0 0;
    overflow-y: auto;
    list-style: none;
    background: #ffffff;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .18);
}

@media (min-width: 992px) {
    .site-header__search-results {
        position: absolute;
        z-index: 10;
        top: calc(100% + .375rem);
        right: 0;
        width: 22rem;
        min-width: 16rem;
        margin-top: 0;
    }
}

.site-header__search-results:not(:empty) {
    display: block;
}

.site-header__search-results li + li {
    margin-top: .125rem;
}

.site-header__search-results a {
    display: block;
    padding: .5rem .625rem;
    overflow: hidden;
    font-size: .875rem;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: .375rem;
}

.site-header__search-results a:hover,
.site-header__search-results a:focus {
    color: var(--ink);
    background: var(--cobalt-glow);
}

/* Back link: last in the nav, pushed to the far right, with a vertical
   divider and an arrow before its label, pointing back to the main Galexic
   site. */
.site-header__back {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .535rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease-in-out;
}

.site-header__back:hover,
.site-header__back:focus {
    color: var(--cobalt);
}

.site-header__back-divider {
    display: none;
}

.site-header__back-arrow {
    line-height: 1;
}

@media (min-width: 992px) {
    .site-header__back {
        padding: 0 0 0 1rem;
    }

    .site-header__back-divider {
        display: block;
        align-self: stretch;
        width: 1px;
        margin-right: .25rem;
        background: rgba(15, 23, 42, .12);
    }
}

/* Dropdown caret: the main site's boxicons chevron-down, drawn as a mask so
   it takes the link colour without loading the icon font. */
.site-header .dropdown-toggle::after {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin: .0625rem -.25rem 0 .255em;
    font-size: 1.15em;
    vertical-align: middle;
    content: "";
    border: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Collapsed menu: the dropdown opens inline, marked by a thin left rule. */
.site-header .dropdown-menu {
    min-width: 12rem;
    margin-top: .25rem;
    padding: .5rem 0;
    font-size: .875rem;
    color: var(--muted);
    text-align: left;
    background: none;
    border: 0;
    border-left: 1px solid rgba(28, 66, 201, .1);
    border-radius: 0;
    box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, .06), 0 .0625rem .1875rem rgba(28, 66, 201, .04);
}

/* Expanded menu: a floating card that opens on hover only, as on the main
   site. An invisible strip bridges the gap under the toggle so the menu
   stays open while the pointer crosses into it. */
@media (min-width: 992px) {
    .site-header .dropdown::before {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: .375rem;
        content: "";
    }

    .site-header .dropdown-menu {
        background-color: #ffffff;
        border: 1px solid rgba(28, 66, 201, .1);
        border-radius: .5rem;
    }

    .site-header .dropdown-menu.show {
        display: none;
    }

    .site-header .dropdown:hover > .dropdown-menu,
    .site-header .dropdown:focus-within > .dropdown-menu {
        display: block;
        animation: dropdown-show .2s;
    }
}

@keyframes dropdown-show {
    from {
        opacity: 0;
        transform: scale(.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.site-header .dropdown-item {
    display: block;
    width: 100%;
    padding: .375rem 1rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: color .2s ease-in-out;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus,
.site-header .dropdown-item:active,
.site-header .dropdown-item.active {
    color: var(--cobalt);
    background-color: transparent;
}

/* Menu toggler: three bars that fold into a cross while the menu is open. */
.site-header .navbar-toggler {
    position: relative;
    width: 1.875rem;
    height: 2.25rem;
    margin: 0;
    padding: .625rem .25rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--muted);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0;
}

.site-header .navbar-toggler:focus {
    outline: 0;
    box-shadow: none;
}

.site-header .navbar-toggler:focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Keep in-page anchor targets clear of the header. */
:target {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.site-header .navbar-toggler-icon,
.site-header .navbar-toggler-icon::before,
.site-header .navbar-toggler-icon::after {
    position: absolute;
    width: 1.375rem;
    height: .125rem;
    background-color: var(--ink);
    background-image: none;
}

.site-header .navbar-toggler-icon {
    top: 50%;
    display: block;
    margin-top: -.0625rem;
    vertical-align: baseline;
    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
    transition-duration: .075s;
}

.site-header .navbar-toggler-icon::before,
.site-header .navbar-toggler-icon::after {
    display: block;
    content: "";
}

.site-header .navbar-toggler-icon::before {
    top: -.4375rem;
    transition: top .075s .12s ease, opacity .075s ease;
}

.site-header .navbar-toggler-icon::after {
    bottom: -.4375rem;
    transition: bottom .075s .12s ease, transform .075s cubic-bezier(.55, .055, .675, .19);
}

.site-header [aria-expanded="true"] .navbar-toggler-icon {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: rotate(45deg);
}

.site-header [aria-expanded="true"] .navbar-toggler-icon::before {
    top: 0;
    opacity: 0;
    transition: top .075s ease, opacity .075s .12s ease;
}

.site-header [aria-expanded="true"] .navbar-toggler-icon::after {
    bottom: 0;
    transition: bottom .075s ease, transform .075s .12s cubic-bezier(.215, .61, .355, 1);
    transform: rotate(-90deg);
}
/* Navbar styles block. */


/* Footer styles block.
   Mirrors the main site's footer: copyright, socials and awards in three
   equal columns from 768px up, stacked awards-first below that. */
.site-footer {
    padding: .9rem 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    background: var(--cobalt);
    border-top: 0;
}

@media (min-width: 768px) {
    .site-footer {
        padding: 1.8rem 0;
    }
}

.site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: -.9rem;
    margin-right: -.75rem;
    margin-left: -.75rem;
    text-align: center;
}

.site-footer__row > * {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin-top: .9rem;
    padding-right: .75rem;
    padding-left: .75rem;
}

.site-footer__copy {
    order: 3;
    font-size: .75rem;
    color: #ffffff;
    opacity: .5;
}

.site-footer__copy a {
    color: inherit;
}

.site-footer__socials {
    display: flex;
    order: 2;
    justify-content: center;
    gap: .5rem;
}

.site-footer__awards {
    display: flex;
    order: 1;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.site-footer__awards img {
    width: 56px;
    height: auto;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .site-footer__row {
        text-align: left;
    }

    .site-footer__row > * {
        width: 33.33333333%;
    }

    .site-footer__copy {
        order: 1;
    }

    .site-footer__awards {
        order: 3;
        justify-content: flex-end;
    }
}

/* Social buttons: faint white squares that fill solid white on hover. */
.site-footer__social {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: .375rem;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.site-footer__social:focus {
    color: #ffffff;
}

.site-footer__social:hover,
.site-footer__social:focus-visible,
.site-footer__social:active {
    color: var(--ink);
    background-color: #ffffff;
    border-color: #ffffff;
    outline: 0;
}
/* Footer styles block. */


/* Buttons block. */
.btn {
    text-decoration: none;
}

.btn-primary {
    background-color: var(--cobalt);
    border-color: var(--cobalt);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cobalt-hover);
    border-color: var(--cobalt-hover);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    background-color: var(--cobalt-hover);
    border-color: var(--cobalt-hover);
    box-shadow: 0 0 0 0.2rem rgba(28, 66, 201, .25);
}
/* Buttons block. */


/* Hero / page-intro block.
   The header is absolutely positioned over whatever comes next (see
   .site-header), so every intro-header supplies its own top clearance
   instead of the page reserving space for a fixed nav. */
.intro-header {
    margin: 0 0 1.25rem;
}

/* Pages without a title still need to clear the header. */
.intro-header:empty {
    padding-top: calc(var(--header-height) + 2rem);
}

.header-section:not(.has-img) .intro-header.no-img {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 3rem;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 45%, #ffffff 100%),
        radial-gradient(circle at 82% 12%, var(--cobalt-glow) 0%, rgba(255, 255, 255, 0) 45%);
}

/* Posts end their header with the author byline, so it needs less
   trailing space before the article text than a page's heading does. */
.header-section:not(.has-img) .intro-header.no-img.intro-header--post {
    padding-bottom: 1.25rem;
}

/* Home hero: full mist treatment with the drifting particle network. */
.header-section:not(.has-img) .intro-header.is-mist {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 55%, #ffffff 92%),
        radial-gradient(circle at 82% 12%, var(--cobalt-glow) 0%, rgba(255, 255, 255, 0) 45%),
        #ffffff;
}

.intro-header.is-mist > .container-md {
    position: relative;
    z-index: 1;
}

#hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 45%, transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 88%);
}

/* Key phrase pop, available for a highlighted word/phrase in hero copy. */
.hero-key {
    padding: 0 .14em;
    color: var(--cobalt);
    background: rgba(28, 66, 201, .06);
    border-radius: .3rem;
}

/* Cover-image posts: the nav stays opaque, so the photo starts right below
   it rather than being hidden behind it. */
.intro-header.big-img {
    margin-top: var(--header-height);
}
/* Hero / page-intro block. */


/* Narrow, centered column shared by the post page, the "Latest Posts" list
   and the featured-posts carousel, so their titles line up. */
.posts-list__container {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 500px) {
    .posts-list__container {
        max-width: 97%;
    }
}

@media (min-width: 768px) {
    .posts-list__container {
        max-width: 900px;
    }
}

.posts-list__title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.625rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--ink);
}

.posts-list__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.25rem;
    height: 3px;
    border-radius: 2px;
    background: var(--cobalt);
}

/* Post preview & typography styles block. */
.post-preview {
    display: block;
}

.post-preview__caption {
    display: block;
}

.post-preview .post-title,
.post-preview .post-subtitle {
    color: var(--ink);
}

.post-preview__caption:hover .post-title,
.post-preview__caption:focus .post-title {
    color: var(--cobalt);
}

.post-heading .post-meta {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--muted);
}

.post-preview a.post-read-more {
    display: flex;
    font-family: 'Montserrat', sans-serif;
    align-items: center;
    width: fit-content;
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    color: var(--cobalt);
    text-decoration: none;
}

.post-preview a.post-read-more:hover,
.post-preview a.post-read-more:focus {
    color: var(--cobalt-hover);
    text-decoration: none;
}

.post-preview a.post-read-more i {
    margin-left: 0.25rem;
    font-size: inherit;
    color: inherit;
}

.post-preview .post-title,
.intro-header .post-heading h1 {
    font-size: 2rem;
}

.post-preview .post-subtitle,
.intro-header .post-heading .post-subheading {
    font-size: 1.25rem;
}

.post-preview .post-entry,
.blog-post-content {
    font-size: 1rem;
}

/* In-article subheadings sit well below the post's own h1 (2rem) so the
   hierarchy stays clear instead of headings competing with the title. */
.blog-post-content h2 {
    font-size: 1.5rem;
}

.blog-post-content h3 {
    font-size: 1.25rem;
}

.blog-post-content h4 {
    font-size: 1.125rem;
}

.blog-post-content img.rounded-img {
    border-radius: .75rem;
}

.intro-header .page-heading .page-subheading,
.intro-header .post-heading .post-subheading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--muted);
}

/* Match the title-to-subtitle spacing used on dreamproit-web's hero (h1 mb-3, no extra top margin on the subtitle). */
.intro-header .page-heading h1 {
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    text-wrap: balance;
}

.intro-header .page-heading .page-subheading {
    margin-top: 0;
    font-size: 1.25rem;
}

.pagination .page-item .page-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    border: 1px solid var(--rule);
    border-radius: 8px;
    color: var(--ink);
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
    border: 1px solid var(--cobalt);
    background-color: var(--cobalt);
    color: #ffffff;
}

.blog-post blockquote {
    color: var(--muted);
}

article.blog-post blockquote {
    border-left: 0.3125rem solid var(--cobalt);
}

.mini-post-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.mini-post-card:hover,
.mini-post-card:focus {
    border-color: var(--cobalt);
    box-shadow: var(--shadow-raised);
    text-decoration: none;
}

.mini-post-card__img {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

.mini-post-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.mini-post-card__eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--placeholder);
}

.mini-post-card__title {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-post-card:hover .mini-post-card__title,
.mini-post-card:focus .mini-post-card__title {
    color: var(--cobalt);
}

.mini-post-card__excerpt {
    font-size: 0.875rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-post-card__author {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding-left: 1rem;
    border-left: 1px solid var(--rule);
    text-align: center;
}

.mini-post-card__author-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
}

.mini-post-card__author-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

/* Post preview & typography styles block. */


/* Tags styles block. */
.tag-btn {
    background-color: var(--panel);
    border-color: var(--panel);
    border-radius: 4px;
    text-decoration: none;
    color: var(--muted);
}

.tag-btn:hover,
.tag-btn:focus {
    background-color: var(--cobalt);
    border-color: var(--cobalt);
    text-decoration: none;
    color: #ffffff;
}

.tag-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(28, 66, 201, .25);
}

/* Pull the archive "Jump to:" nav up under the page title, subtitle-style,
   then push the year list further down for clearer separation. */
.menu.browse.by-year,
.menu.browse.by-tag {
    margin-top: -4.25rem;
    margin-bottom: 2.5rem;
}

/* Indent each month under its year so the year heading reads as the
   parent of the list instead of blending in with the months. */
.archive-month {
    margin-left: 1.5rem;
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.blog-tags span {
    opacity: 1;
    color: var(--muted);
    font-size: 0.875rem;
    margin-right: 0.15rem;
}

.blog-tags a {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 4px;
    background-color: var(--panel);
    border: 1px solid transparent;
    color: var(--muted);
    text-decoration: none;
    opacity: 1;
    font-size: 0.75rem;
    line-height: 1.4;
    transition: color .2s ease-in-out, background-color .2s ease-in-out;
}

.blog-tags a:hover,
.blog-tags a:focus {
    background-color: var(--cobalt);
    border-color: var(--cobalt);
    color: #ffffff;
}

/* Tag index full tag list: center each wrapped row (ragged both edges),
   widen past the page's offset column to match the outer container, and
   bump the chip text up slightly from the shared .blog-tags size. */
.tag-cloud {
    justify-content: center;
    margin-bottom: 2.5rem;
}

.tag-cloud a {
    font-size: 0.9rem;
}

@media (min-width: 992px) {
    .tag-cloud {
        width: 120%;
        margin-left: -10%;
    }
}

@media (min-width: 1200px) {
    .tag-cloud {
        width: 150%;
        margin-left: -25%;
    }
}
/* Tags styles block. */


/* Code & tables block. */
code {
    color: var(--code-ink);
    background-color: var(--code-bg);
}

.highlight > pre {
    border-color: var(--rule);
    border-left-color: var(--cobalt);
}

table tr {
    border-top-color: var(--rule);
}

table tr th,
table tr td {
    border-color: var(--rule);
}
/* Code & tables block. */


/* Notification boxes block. */
.box-note {
    background-color: rgba(76, 130, 247, .08);
    border-color: var(--rule);
    border-left-color: var(--info);
}

.box-warning {
    background-color: rgba(245, 158, 11, .1);
    border-color: var(--rule);
    border-left-color: var(--amber);
}

.box-error {
    background-color: rgba(239, 68, 68, .1);
    border-color: var(--rule);
    border-left-color: var(--red);
}

.box-success {
    background-color: rgba(16, 185, 129, .1);
    border-color: var(--rule);
    border-left-color: var(--mint);
}
/* Notification boxes block. */