/* ==========================================================================
   HealthWired — site styles
   Layered on top of the template's style.css. The accent colour comes from
   --hw-accent, which the dashboard writes into an inline <style> block, so
   changing it in Settings recolours everything below.
   ========================================================================== */

:root {
    --hw-ink:        #14161a;
    --hw-ink-soft:   #5b6270;
    --hw-line:       #e3e6ec;
    --hw-tint:       #f5f7fa;
    --hw-radius:     3px;
}

/* --- Base ----------------------------------------------------------------- */

body {
    background: #fff;
}

#main-content {
    min-height: 50vh;
}

a {
    color: inherit;
}

.hw-section {
    padding-block: 2.75rem;
}

.hw-section--tint {
    background: var(--hw-tint);
}

/* Accessible focus ring — the template removes outlines entirely. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--hw-accent);
    outline-offset: 2px;
}

/* --- Wordmark ------------------------------------------------------------- */

.hw-wordmark {
    display: inline-block;
    font-family: Roboto, sans-serif;
    font-size: 2.35rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1;
    text-decoration: none;
}

.hw-wordmark__health { color: var(--hw-ink); }
.hw-wordmark__wired  { color: var(--hw-accent); }

/* The signature detail: a pulse line under "Wired", drawn in CSS so it
   recolours with the accent and costs no extra request. */
.hw-wordmark__wired {
    position: relative;
}

.hw-wordmark__wired::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.18em;
    height: 6px;
    background:
        linear-gradient(var(--hw-accent), var(--hw-accent)) left  center / 34% 2px no-repeat,
        linear-gradient(var(--hw-accent), var(--hw-accent)) right center / 34% 2px no-repeat;
}

.hw-wordmark__wired::before {
    content: "";
    position: absolute;
    left: 34%;
    right: 34%;
    bottom: -0.18em;
    height: 7px;
    background: var(--hw-accent);
    clip-path: polygon(0 50%, 22% 50%, 34% 0, 50% 100%, 66% 22%, 78% 50%, 100% 50%,
                       100% 62%, 74% 62%, 64% 40%, 50% 118%, 33% 18%, 25% 62%, 0 62%);
}

.hw-wordmark--sm { font-size: 1.5rem; }

.hw-wordmark--light .hw-wordmark__health { color: #fff; }

.hw-tagline {
    color: var(--hw-ink-soft);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    margin-top: 0.6rem;
    text-transform: uppercase;
}

/* --- Header --------------------------------------------------------------- */

.header-top {
    background: var(--hw-ink);
    font-size: 0.8rem;
    padding-block: 0.5rem;
}

.header-top a,
.header-top .hw-today {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.header-top a:hover {
    color: #fff;
}

.header-top ul {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
}

.header-mid {
    border-bottom: 1px solid var(--hw-line);
}

.hw-masthead-search {
    display: flex;
    max-width: 460px;
    position: relative;
}

.hw-masthead-search .form-control {
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-radius) 0 0 var(--hw-radius);
    height: 46px;
}

.hw-masthead-search .form-control:focus {
    border-color: var(--hw-accent);
    box-shadow: none;
}

.hw-masthead-search .btn {
    background: var(--hw-accent);
    border-radius: 0 var(--hw-radius) var(--hw-radius) 0;
    color: #fff;
    padding-inline: 1.25rem;
}

/* --- Navigation ----------------------------------------------------------- */

.custom-navbar {
    background: var(--hw-accent);
    padding-block: 0;
}

.custom-navbar .navbar-nav > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.95rem 1.05rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.custom-navbar .navbar-nav > .nav-item > .nav-link:hover,
.custom-navbar .navbar-nav > .nav-item > .nav-link.active {
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
}

/* Dropdowns.
   Bootstrap 5 only opens these on click, so the hover behaviour is done here
   in CSS: it works before any JavaScript loads, and keeps working if it fails.
   The .is-open class is added by the script for taps and keyboard use.       */

.custom-navbar .dropdown-menu {
    border: 0;
    border-radius: 0;
    border-top: 3px solid var(--hw-accent);
    box-shadow: 0 12px 32px rgba(20, 22, 26, 0.14);
    margin-top: 0;
    min-width: 240px;
    padding-block: 0.5rem;
}

@media (min-width: 992px) {
    /* The tap arrow is for touch screens only; hover does the job here. */
    .hw-submenu-toggle { display: none; }

    .custom-navbar .nav-item.dropdown > .dropdown-menu {
        display: block;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 100%;
        transform: translateY(6px);
        transition: opacity 0.15s ease, transform 0.15s ease;
        visibility: hidden;
    }

    .custom-navbar .nav-item.dropdown:hover > .dropdown-menu,
    .custom-navbar .nav-item.dropdown:focus-within > .dropdown-menu,
    .custom-navbar .nav-item.dropdown.is-open > .dropdown-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }

    /* A dropdown near the right edge opens leftwards instead of off-screen. */
    .custom-navbar .nav-item.dropdown.drops-left > .dropdown-menu {
        left: auto;
        right: 0;
    }

    /* The little arrow that says "there is more under here". */
    .custom-navbar .nav-link.dropdown-toggle::after {
        border-top-color: currentColor;
        margin-left: 0.4rem;
        transition: transform 0.15s ease;
        vertical-align: 0.15em;
    }

    .custom-navbar .nav-item.dropdown:hover > .nav-link.dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* On small screens the menu is a stacked list, opened by tapping the arrow. */
@media (max-width: 991.98px) {
    .custom-navbar .nav-item.dropdown > .dropdown-menu {
        display: none;
    }

    .custom-navbar .nav-item.dropdown.is-open > .dropdown-menu {
        display: block;
    }

    .custom-navbar .nav-item.dropdown {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
    }

    .custom-navbar .nav-item.dropdown > .nav-link {
        flex: 1 1 auto;
    }

    .custom-navbar .nav-item.dropdown > .dropdown-menu {
        flex: 1 0 100%;
    }

    /* A proper tap target for opening the submenu, separate from the link
       itself, so tapping "Conditions" still goes to the Conditions page. */
    .hw-submenu-toggle {
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
        flex: 0 0 auto;
        font-size: 0.8rem;
        line-height: 1;
        padding: 0.6rem 0.75rem;
    }

    .hw-submenu-toggle i {
        display: inline-block;
        transition: transform 0.15s ease;
    }

    .nav-item.dropdown.is-open > .hw-submenu-toggle i {
        transform: rotate(180deg);
    }

    .custom-navbar .nav-link.dropdown-toggle::after {
        display: none;
    }
}

.custom-navbar .dropdown-item {
    color: var(--hw-ink);
    font-size: 0.92rem;
    padding: 0.5rem 1.1rem;
}

.custom-navbar .dropdown-item:hover {
    background: var(--hw-tint);
    color: var(--hw-accent);
}

.navbar-toggler {
    border: 0;
    color: #fff;
    padding: 0.6rem 0;
}

.navbar-toggler:focus { box-shadow: none; }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Journal entries carry their abbreviation as a fixed-width chip */
.hw-journal-menu { min-width: 320px; }

.hw-journal-menu__abbr {
    background: var(--hw-tint);
    border-radius: 2px;
    color: var(--hw-accent);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-right: 0.6rem;
    min-width: 3.4rem;
    padding: 0.15rem 0.4rem;
    text-align: center;
}

.hw-journal-menu__name {
    font-size: 0.86rem;
}

/* --- Breadcrumbs ---------------------------------------------------------- */

.hw-breadcrumb-bar {
    background: var(--hw-tint);
    border-bottom: 1px solid var(--hw-line);
    font-size: 0.82rem;
    padding-block: 0.75rem;
}

.hw-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { content: "›"; }
.hw-breadcrumb-bar a { color: var(--hw-ink-soft); text-decoration: none; }
.hw-breadcrumb-bar a:hover { color: var(--hw-accent); }

.hw-breadcrumb-bar .breadcrumb-item.active {
    color: var(--hw-ink);
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Hero ----------------------------------------------------------------- */

.slider-inner { padding-top: 1.75rem; }

.slider-post {
    overflow: hidden;
    position: relative;
}

.slider-post img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    width: 100%;
}

.slider-post:hover img { transform: scale(1.04); }

.post-height-1 { height: 460px; }
.post-height-2 { height: 226px; }
.post-height-3 { height: 226px; }

.slider-post .post-inner-title {
    background: linear-gradient(to top, rgba(12, 14, 18, 0.92) 8%, rgba(12, 14, 18, 0) 78%);
    bottom: 0;
    left: 0;
    padding: 1.5rem;
    position: absolute;
    right: 0;
    z-index: 2;
}

.slider-post .post-inner-title h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0.5rem 0 0.6rem;
}

.slider-post .post-inner-title h4 {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0.45rem 0 0.4rem;
}

.slider-post .post-inner-title a { color: #fff; text-decoration: none; }
.slider-post .post-inner-title h2 a:hover,
.slider-post .post-inner-title h4 a:hover { text-decoration: underline; }

.slider-post .authar-info,
.slider-post .authar-info a { color: rgba(255, 255, 255, 0.78); }

.post-category {
    background: var(--hw-accent);
    color: #fff !important;
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    height: auto;
    letter-spacing: 0.07em;
    line-height: 1.5;
    margin: 0;
    padding: 0.25rem 0.6rem;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    width: auto;
}

.hw-flag {
    background: #fff;
    color: var(--hw-ink);
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin-left: 0.35rem;
    padding: 0.25rem 0.6rem;
    text-transform: uppercase;
}

/* Hero navigation.
   The dots sit below the slider rather than inside it: the slider clips its
   own overflow, which is what made them invisible before. */

.hw-hero { position: relative; }

.hw-hero-nav {
    align-items: center;
    background: rgba(12, 14, 18, 0.55);
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 46px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, background 0.2s ease;
    width: 38px;
    z-index: 5;
}

.hw-hero-nav--prev { left: 0; }
.hw-hero-nav--next { right: 0; }

.hw-hero:hover .hw-hero-nav,
.hw-hero-nav:focus-visible { opacity: 1; }

.hw-hero-nav:hover { background: var(--hw-accent); }

.hw-hero-nav.swiper-button-disabled {
    cursor: default;
    opacity: 0.25;
}

/* Touch screens have no hover, so the arrows are always on. */
@media (hover: none) {
    .hw-hero-nav { opacity: 1; }
}

.hw-hero-dots {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.75rem 0 0.25rem;
}

.hw-hero-dots .swiper-pagination-bullet {
    background: #c3c9d4;
    border-radius: 50%;
    cursor: pointer;
    height: 9px;
    margin: 0 !important;
    opacity: 1;
    transition: background 0.2s ease, width 0.2s ease;
    width: 9px;
}

.hw-hero-dots .swiper-pagination-bullet:hover { background: var(--hw-ink-soft); }

.hw-hero-dots .swiper-pagination-bullet-active {
    background: var(--hw-accent);
    border-radius: 5px;
    width: 22px;
}

.hw-slot-empty {
    align-items: center;
    background: var(--hw-tint);
    border: 1px dashed var(--hw-line);
    color: var(--hw-ink-soft);
    display: flex;
    font-size: 0.88rem;
    justify-content: center;
    min-height: 100px;
    padding: 1rem;
    text-align: center;
}

/* --- Section headings ----------------------------------------------------- */

/* The template gives .post-inner-2 blocks their own heading colour under a
   .home-seven ancestor, so that selector has to be matched to win. */
.post-head,
.post-inner .post-head,
.home-seven .post-inner-2 .post-head,
.home-nine .post-inner-2 .post-head {
    border-bottom: 2px solid var(--hw-ink);
    margin-bottom: 1.5rem;
    padding-bottom: 0.65rem;
}

.post-head .title {
    font-size: 1.35rem;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.post-head .title strong {
    color: var(--hw-accent);
    font-weight: 900;
}

.hw-more {
    color: var(--hw-ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
}

.hw-more:hover { color: var(--hw-accent); }

.filter-nav ul { gap: 0.25rem; }

.filter-nav a,
.post-inner-2 .filter-nav ul a {
    color: var(--hw-ink);
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    text-decoration: none;
}

/* The template colours the selected tab with the accent on an accent
   background, using !important, so it has to be matched to win. */
.filter-nav a.active,
.filter-nav a:hover,
.post-inner-2 .filter-nav ul a.active,
.post-inner-2 .filter-nav ul a:hover {
    background: var(--hw-accent);
    color: #fff !important;
}

/* A region with nothing in it is still a tab, just a quieter one. */
.filter-nav a.is-empty { color: var(--hw-ink-soft); }
.filter-nav a.is-empty:hover,
.filter-nav a.is-empty.active { color: #fff !important; }

.filter-nav a { border-radius: 2px; transition: background 0.15s ease, color 0.15s ease; }

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

.hw-card { margin-bottom: 1.75rem; }

.hw-card__figure {
    margin: 0 0 0.85rem;
    overflow: hidden;
    position: relative;
}

.hw-card__figure img {
    aspect-ratio: 340 / 215;
    object-fit: cover;
    transition: transform 0.5s ease;
    width: 100%;
}

.hw-card:hover .hw-card__figure img { transform: scale(1.05); }

/* The template pins figure badges with top:15px. Setting bottom as well
   stretched them into a tall block, so top is explicitly released here. */
.hw-card__figure .post-category,
article figure .post-category {
    bottom: 0;
    left: 0;
    position: absolute;
    top: auto;
    right: auto;
    height: auto;
    width: auto;
    max-width: calc(100% - 1rem);
}

.hw-card .post-info h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.32;
    margin: 0 0 0.5rem;
}

.hw-card .post-info h3 a {
    color: var(--hw-ink);
    text-decoration: none;
}

.hw-card .post-info h3 a:hover { color: var(--hw-accent); }

.hw-card .post-info p {
    color: var(--hw-ink-soft);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

.authar-info {
    color: var(--hw-ink-soft);
    font-size: 0.78rem;
    gap: 0.9rem;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.authar-info a { color: inherit; text-decoration: none; }
.authar-info a:hover { color: var(--hw-accent); }
.authar-info i { margin-right: 0.25rem; }

/* List cards (sidebar / footer) */

.news-list-item {
    align-items: flex-start;
    border-bottom: 1px solid var(--hw-line);
    display: flex;
    gap: 0.85rem;
    padding-block: 0.85rem;
}

.news-list-item:first-child { padding-top: 0; }
.news-list-item:last-child  { border-bottom: 0; padding-bottom: 0; }

.news-list-item .img-wrapper { flex: 0 0 92px; }

.news-list-item .thumb img {
    aspect-ratio: 115 / 85;
    object-fit: cover;
    width: 92px;
}

.news-list-item .post-info-2 h5 {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.3rem;
}

.news-list-item .post-info-2 h5 a {
    color: var(--hw-ink);
    text-decoration: none;
}

.news-list-item .post-info-2 h5 a:hover { color: var(--hw-accent); }

.bord-right { border-right: 1px solid var(--hw-line); }

@media (max-width: 767.98px) {
    .bord-right { border-right: 0; }
}

/* --- Page headers --------------------------------------------------------- */

.hw-page-head {
    border-bottom: 1px solid var(--hw-line);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
}

.hw-page-head h1 {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.hw-eyebrow {
    color: var(--hw-accent);
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.hw-page-head__intro {
    color: var(--hw-ink-soft);
    font-size: 1.05rem;
    max-width: 66ch;
    margin-bottom: 0.5rem;
}

.hw-page-head__count {
    color: var(--hw-ink-soft);
    font-size: 0.84rem;
    margin: 0;
}

.hw-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.1rem;
}

.ui.tag {
    border: 1px solid var(--hw-line) !important;
    border-radius: var(--hw-radius);
    color: var(--hw-ink-soft);
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.ui.tag:hover,
.ui.tag.active {
    background: var(--hw-accent);
    border-color: var(--hw-accent) !important;
    color: #fff;
}

/* --- Article -------------------------------------------------------------- */

.hw-article__head { margin-bottom: 1.5rem; }

.hw-article__cat { margin-bottom: 0.9rem; }

.hw-article h1 {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.14;
    margin: 0.55rem 0 0.9rem;
    max-width: 22ch;
}

.hw-article__meta {
    border-bottom: 1px solid var(--hw-line);
    margin: 0;
    padding-bottom: 1rem;
}

.hw-article__figure {
    margin: 0 0 1.75rem;
}

.hw-article__figure img {
    aspect-ratio: 1140 / 600;
    object-fit: cover;
    width: 100%;
}

.hw-article__standfirst {
    border-left: 3px solid var(--hw-accent);
    color: var(--hw-ink);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.55;
    margin-bottom: 1.5rem;
    padding-left: 1.1rem;
}

.hw-article__body {
    color: #2a2f38;
    font-size: 1.06rem;
    line-height: 1.75;
}

.hw-article__body p { margin-bottom: 1.15rem; }

.hw-article__body h2,
.hw-article__body h3 {
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
}

.hw-article__body h2 { font-size: 1.5rem; }
.hw-article__body h3 { font-size: 1.22rem; }

.hw-article__body a {
    color: var(--hw-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Source attribution — the credibility signal on every rephrased story */
.hw-source {
    align-items: center;
    background: var(--hw-tint);
    border-left: 3px solid var(--hw-accent);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem 0 1.5rem;
    padding: 0.9rem 1.1rem;
}

.hw-source__label {
    color: var(--hw-ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hw-source a {
    color: var(--hw-ink);
    font-weight: 700;
    text-decoration: none;
}

.hw-source a:hover { color: var(--hw-accent); }
.hw-source i { font-size: 0.78rem; margin-left: 0.25rem; }

.hw-share {
    align-items: center;
    border-block: 1px solid var(--hw-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-block: 1rem;
}

.hw-share__label {
    color: var(--hw-ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    margin-right: 0.35rem;
    text-transform: uppercase;
}

.hw-share__btn {
    align-items: center;
    background: var(--hw-tint);
    color: var(--hw-ink);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    transition: all 0.15s ease;
    width: 36px;
}

.hw-share__btn:hover {
    background: var(--hw-accent);
    color: #fff;
}

.hw-related { margin-top: 2.5rem; }

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

.hw-sidebar { position: sticky; top: 1.5rem; }

.hw-widget {
    border: 1px solid var(--hw-line);
    margin-bottom: 1.5rem;
    padding: 1.25rem;
}

/* The template sets .wiget-title to white for its dark sidebar. Ours is
   light, so the colour is restored here and re-inverted in the footer. */
.wiget-title {
    border-bottom: 2px solid var(--hw-ink);
    color: var(--hw-ink);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin: 0 0 1rem;
    padding-bottom: 0.55rem;
    text-transform: uppercase;
}

.hw-widget-list li {
    border-bottom: 1px solid var(--hw-line);
}

.hw-widget-list li:last-child { border-bottom: 0; }

.hw-widget-list a {
    align-items: center;
    color: var(--hw-ink);
    display: flex;
    font-size: 0.9rem;
    justify-content: space-between;
    padding: 0.55rem 0;
    text-decoration: none;
}

.hw-widget-list a:hover { color: var(--hw-accent); }

.hw-widget-list span {
    background: var(--hw-tint);
    border-radius: 2px;
    color: var(--hw-ink-soft);
    font-size: 0.74rem;
    min-width: 1.9rem;
    padding: 0.1rem 0.4rem;
    text-align: center;
}

.hw-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* --- Search results ------------------------------------------------------- */

.hw-search-form {
    display: flex;
    gap: 0.5rem;
    margin-block: 1.1rem;
    max-width: 560px;
}

.hw-search-form--center { margin-inline: auto; }

.hw-search-form .form-control { height: 48px; }

.hw-search-form .form-control:focus {
    border-color: var(--hw-accent);
    box-shadow: none;
}

.hw-result {
    border-bottom: 1px solid var(--hw-line);
    display: flex;
    gap: 1.25rem;
    padding-block: 1.5rem;
}

.hw-result:first-child { padding-top: 0; }

.hw-result__thumb { flex: 0 0 200px; }

.hw-result__thumb img {
    aspect-ratio: 340 / 215;
    object-fit: cover;
    width: 100%;
}

.hw-result__cat {
    color: var(--hw-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
}

.hw-result__body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0.35rem 0 0.5rem;
}

.hw-result__body h3 a { color: var(--hw-ink); text-decoration: none; }
.hw-result__body h3 a:hover { color: var(--hw-accent); }

.hw-result__body p {
    color: var(--hw-ink-soft);
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 575.98px) {
    .hw-result { flex-direction: column; gap: 0.85rem; }
    .hw-result__thumb { flex: 1 1 auto; }
}

/* --- Journal pages -------------------------------------------------------- */

.hw-journal-hero {
    background: linear-gradient(160deg, var(--hw-ink) 0%, #232833 100%);
    color: #fff;
    padding-block: 3rem;
}

.hw-journal-hero .hw-eyebrow { color: rgba(255, 255, 255, 0.62); }

.hw-journal-cover img {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
    width: 100%;
}

.hw-journal-title {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0 0 0.5rem;
    max-width: 20ch;
}

.hw-journal-abbr {
    color: var(--hw-accent);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    margin-bottom: 0.9rem;
}

.hw-journal-tagline {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
    max-width: 60ch;
}

.hw-journal-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.hw-badge {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 0.45rem 0.85rem;
    text-transform: uppercase;
}

.hw-badge--open { color: #fff; }
.hw-badge i { margin-right: 0.35rem; }

.hw-journal-facts {
    background: var(--hw-tint);
    border-bottom: 1px solid var(--hw-line);
}

.hw-journal-facts dl { margin: 0; }

.hw-fact {
    border-right: 1px solid var(--hw-line);
    padding: 1.25rem 1.1rem;
}

.hw-fact:last-child { border-right: 0; }

.hw-fact dt {
    color: var(--hw-ink-soft);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.hw-fact dd {
    color: var(--hw-ink);
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0;
}

.hw-journal-block { margin-bottom: 2.25rem; }

.hw-block-title {
    border-bottom: 2px solid var(--hw-ink);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
    padding-bottom: 0.55rem;
    text-transform: uppercase;
}

/* --- Forms, alerts, empty states ------------------------------------------ */

.hw-form .form-label {
    color: var(--hw-ink);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}

.hw-form .form-control {
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-radius);
    padding: 0.6rem 0.8rem;
}

.hw-form .form-control:focus {
    border-color: var(--hw-accent);
    box-shadow: 0 0 0 3px rgba(var(--hw-accent-rgb), 0.12);
}

/* Honeypot — off-screen rather than display:none, which some bots detect */
.hw-trap {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.btn-news {
    background: var(--hw-accent);
    border: 0;
    border-radius: var(--hw-radius);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.7rem 1.4rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: filter 0.15s ease;
}

.btn-news:hover { color: #fff; filter: brightness(0.9); }

.hw-alert {
    border-radius: var(--hw-radius);
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
}

.hw-alert i { font-size: 1.2rem; margin-top: 0.1rem; }
.hw-alert p, .hw-alert ul { font-size: 0.92rem; margin-bottom: 0; }
.hw-alert ul { padding-left: 1.1rem; }

.hw-alert--ok {
    background: #edf9f0;
    border: 1px solid #bfe6c9;
    color: #1c6b33;
}

.hw-alert--error {
    background: #fdeef1;
    border: 1px solid #f5c2cd;
    color: #9c1533;
}

.hw-contact-aside {
    background: var(--hw-tint);
    padding: 1.5rem;
}

.hw-contact-aside h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.hw-contact-aside dt {
    color: var(--hw-ink);
    font-size: 0.88rem;
    font-weight: 700;
    margin-top: 0.9rem;
}

.hw-contact-aside dd {
    color: var(--hw-ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0.2rem 0 0;
}

.hw-empty {
    border: 1px dashed var(--hw-line);
    color: var(--hw-ink-soft);
    padding: 3rem 1.5rem;
    text-align: center;
}

.hw-empty--lg { padding-block: 5rem; }

.hw-empty i {
    color: var(--hw-line);
    display: block;
    font-size: 2.75rem;
    margin-bottom: 1rem;
}

.hw-empty h3,
.hw-empty h4 {
    color: var(--hw-ink);
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.hw-empty p {
    margin-inline: auto;
    max-width: 48ch;
}

.hw-empty .btn-news { margin-top: 1rem; }

.hw-404 {
    padding-block: 3rem 2rem;
    text-align: center;
}

.hw-404__code {
    color: var(--hw-accent);
    display: block;
    font-size: 5.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.hw-404 h1 {
    font-size: 1.9rem;
    font-weight: 800;
    margin: 0.5rem 0;
}

.hw-404 p {
    color: var(--hw-ink-soft);
    margin-inline: auto;
    max-width: 52ch;
}

.hw-stat-strip {
    border-block: 1px solid var(--hw-line);
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.hw-stat-strip__item {
    border-right: 1px solid var(--hw-line);
    flex: 1 1 140px;
    padding: 1.25rem 1rem;
}

.hw-stat-strip__item:last-child { border-right: 0; }

.hw-stat-strip__item strong {
    color: var(--hw-accent);
    display: block;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
}

.hw-stat-strip__item span {
    color: var(--hw-ink-soft);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

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

.hw-pagination { margin-top: 1.5rem; }

.hw-pagination .page-link {
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-radius) !important;
    color: var(--hw-ink);
    margin: 0 0.15rem;
    padding: 0.5rem 0.85rem;
}

.hw-pagination .page-link:hover {
    background: var(--hw-tint);
    color: var(--hw-accent);
}

.hw-pagination .page-item.active .page-link {
    background: var(--hw-accent);
    border-color: var(--hw-accent);
    color: #fff;
}

.hw-pagination .page-item.disabled .page-link {
    color: #b6bbc5;
}

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

.main-footer {
    background: var(--hw-ink);
    color: rgba(255, 255, 255, 0.72);
    padding-block: 3rem 1.5rem;
    position: relative;
}

.main-footer .wiget-title {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.main-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.main-footer a:hover { color: var(--hw-accent); }

.main-footer hr { border-color: rgba(255, 255, 255, 0.16); opacity: 1; }

.menu-services li { padding: 0.3rem 0; }
.menu-services li a { font-size: 0.88rem; }

.main-footer .news-list-item {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.main-footer .news-list-item .post-info-2 h5 a { color: rgba(255, 255, 255, 0.88); }
.main-footer .news-list-item .post-info-2 h5 a:hover { color: var(--hw-accent); }
.main-footer .authar-info { color: rgba(255, 255, 255, 0.5); }

.sub-footer {
    background: #0c0e12;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.84rem;
    padding-block: 1rem;
}

.sub-footer a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.sub-footer a:hover { color: #fff; }

/* --- Back to top ---------------------------------------------------------- */

.hw-to-top {
    align-items: center;
    background: var(--hw-accent);
    border: 0;
    bottom: 1.5rem;
    color: #fff;
    display: flex;
    height: 44px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 1.5rem;
    transition: opacity 0.25s ease;
    width: 44px;
    z-index: 60;
}

.hw-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 991.98px) {
    .hw-sidebar { position: static; margin-top: 2rem; }
    .post-height-1 { height: 340px; }
    .hw-article h1 { font-size: 2rem; max-width: none; }
    .hw-journal-title { font-size: 1.9rem; }

    .custom-navbar .navbar-collapse {
        background: #fff;
        margin-top: 0.5rem;
        padding: 1rem;
    }

    .custom-navbar .navbar-nav > .nav-item > .nav-link {
        color: var(--hw-ink);
        padding: 0.65rem 0;
    }

    .custom-navbar .navbar-nav > .nav-item > .nav-link:hover,
    .custom-navbar .navbar-nav > .nav-item > .nav-link.active {
        background: transparent;
        color: var(--hw-accent);
    }

    .custom-navbar .dropdown-menu {
        border-top: 0;
        box-shadow: none;
        padding-left: 0.75rem;
    }

    .hw-fact { border-right: 0; border-bottom: 1px solid var(--hw-line); }
}

@media (max-width: 575.98px) {
    .hw-wordmark { font-size: 1.9rem; }
    .hw-page-head h1 { font-size: 1.75rem; }
    .hw-article h1 { font-size: 1.6rem; }
    .post-height-1 { height: 260px; }
    .post-height-2, .post-height-3 { height: 180px; }
    .slider-post .post-inner-title h2 { font-size: 1.15rem; }
    .hw-section { padding-block: 2rem; }
}

/* --- Motion preferences --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .slider-post:hover img,
    .hw-card:hover .hw-card__figure img { transform: none; }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
    header, footer, .sub-footer, .hw-share, .hw-sidebar,
    .hw-to-top, .hw-related, .hw-breadcrumb-bar { display: none !important; }

    .hw-article__body { font-size: 11pt; }
}

/* --- Region and journal index pages --------------------------------------- */

.hw-region-card {
    border: 1px solid var(--hw-line);
    margin-bottom: 1.5rem;
    padding: 1.25rem;
}

.hw-region-card__head {
    align-items: baseline;
    border-bottom: 2px solid var(--hw-ink);
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.55rem;
}

.hw-region-card__head h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0;
    text-transform: uppercase;
}

.hw-region-card__head h2 a { color: var(--hw-ink); text-decoration: none; }
.hw-region-card__head h2 a:hover { color: var(--hw-accent); }

.hw-region-card__count {
    color: var(--hw-ink-soft);
    font-size: 0.8rem;
    margin-left: auto;
    white-space: nowrap;
}

.hw-region-card .hw-more { display: inline-block; margin-top: 0.9rem; }

.hw-journal-card {
    border: 1px solid var(--hw-line);
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
}

.hw-journal-card__cover {
    flex: 0 0 120px;
}

.hw-journal-card__cover img {
    box-shadow: 0 6px 18px rgba(20, 22, 26, 0.18);
    height: auto;
    width: 100%;
}

.hw-journal-card__abbr {
    color: var(--hw-accent);
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 0.3rem;
}

.hw-journal-card__body h2 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.hw-journal-card__body h2 a { color: var(--hw-ink); text-decoration: none; }
.hw-journal-card__body h2 a:hover { color: var(--hw-accent); }

.hw-journal-card__body p {
    color: var(--hw-ink-soft);
    font-size: 0.92rem;
    margin-bottom: 0.6rem;
}

.main-footer .wiget-title a { color: #fff; text-decoration: none; }
.main-footer .wiget-title a:hover { color: var(--hw-accent); }

@media (max-width: 575.98px) {
    .hw-journal-card { flex-direction: column; }
    .hw-journal-card__cover { flex: 0 0 auto; max-width: 120px; }
}

/* --- Trending Now ticker --------------------------------------------------- */

.hw-ticker {
    align-items: stretch;
    border: 1px solid var(--hw-line);
    display: flex;
    margin-top: 1.25rem;
    overflow: hidden;
}

.hw-ticker__label {
    align-items: center;
    background: var(--hw-accent);
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    min-height: 44px;
    padding: 0 1.1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.hw-ticker__label strong { font-weight: 900; margin-right: 0.3em; }

.hw-ticker__track {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1rem;
}

/* A vertical slider needs an explicit height. Without one the slides stack
   instead of overlapping, and the container grows to the height of them all. */
.hw-ticker-slider {
    height: 44px;
    overflow: hidden;
}

.hw-ticker-slider .swiper-slide {
    align-items: center;
    display: flex;
    height: 44px;
}

.hw-ticker-slider a {
    color: var(--hw-ink);
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.hw-ticker-slider a:hover { color: var(--hw-accent); }

.hw-ticker__nav {
    align-items: center;
    border-left: 1px solid var(--hw-line);
    display: flex;
    flex: 0 0 auto;
    gap: 0;
}

.hw-ticker__btn {
    background: none;
    border: 0;
    color: var(--hw-ink-soft);
    cursor: pointer;
    font-size: 0.78rem;
    height: 44px;
    padding: 0 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.hw-ticker__btn:hover {
    background: var(--hw-tint);
    color: var(--hw-accent);
}

.hw-ticker__btn.swiper-button-disabled {
    cursor: default;
    opacity: 0.35;
}

@media (max-width: 575.98px) {
    .hw-ticker__label { font-size: 0.72rem; padding-inline: 0.75rem; }
    .hw-ticker__track { padding-inline: 0.65rem; }
    .hw-ticker-slider a { font-size: 0.85rem; }
    .hw-ticker-slider,
    .hw-ticker-slider .swiper-slide { height: 40px; }
    .hw-ticker__label, .hw-ticker__btn { min-height: 40px; height: 40px; }
}

/* --- Most viewed and hot categories ---------------------------------------- */

.hw-widget-block {
    border: 1px solid var(--hw-line);
    margin-bottom: 1.5rem;
    padding: 1.25rem;
}

.hw-widget-block__title {
    border-bottom: 2px solid var(--hw-ink);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0 0 1.1rem;
    padding-bottom: 0.55rem;
    text-transform: uppercase;
}

.hw-widget-block__title strong { color: var(--hw-accent); font-weight: 900; }

.hw-tab-nav {
    border-bottom: 2px solid var(--hw-ink);
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

.hw-tab-nav button {
    background: none;
    border: 0;
    color: var(--hw-ink-soft);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.55rem 1rem;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}

.hw-tab-nav button.active {
    background: var(--hw-accent);
    color: #fff;
}

.hw-tab-nav button:hover:not(.active) { color: var(--hw-accent); }

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

.hw-ranked li {
    border-bottom: 1px solid var(--hw-line);
    display: flex;
    gap: 0.9rem;
    padding: 0.7rem 0;
}

.hw-ranked li:last-child { border-bottom: 0; padding-bottom: 0; }
.hw-ranked li:first-child { padding-top: 0; }

.hw-ranked__num {
    color: var(--hw-line);
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    min-width: 1.8rem;
}

.hw-ranked li:nth-child(-n+3) .hw-ranked__num { color: var(--hw-accent); }

.hw-ranked__body { min-width: 0; }

.hw-ranked__body a {
    color: var(--hw-ink);
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.hw-ranked__body a:hover { color: var(--hw-accent); }

.hw-ranked__meta {
    color: var(--hw-ink-soft);
    display: block;
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.hw-hot-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hw-hot-cat {
    align-items: center;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-radius);
    color: var(--hw-ink);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 600;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.hw-hot-cat span {
    background: var(--hw-tint);
    border-radius: 10px;
    color: var(--hw-ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 1.5rem;
    padding: 0.05rem 0.35rem;
    text-align: center;
}

.hw-hot-cat:hover {
    background: var(--hw-accent);
    border-color: var(--hw-accent);
    color: #fff;
}

.hw-hot-cat:hover span {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.hw-hot-cats--compact .hw-hot-cat { font-size: 0.78rem; padding: 0.3rem 0.55rem; }

/* --- Advertising slots ----------------------------------------------------- */

.hw-ad {
    margin-block: 1.75rem;
    text-align: center;
}

.hw-ad--sidebar,
.hw-ad--home_mid { margin-block: 0 1.5rem; }

.hw-ad__label {
    color: #a8afbb;
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.hw-ad__inner {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.hw-ad__inner img,
.hw-ad__inner iframe { max-width: 100%; }

@media print {
    .hw-ad, .hw-ticker { display: none !important; }
}

/* --- Journal showcase ------------------------------------------------------ */

.hw-journal-showcase .wiget-title a {
    color: var(--hw-ink);
    text-decoration: none;
}

.hw-journal-showcase .wiget-title a:hover { color: var(--hw-accent); }

.hw-journal-mini {
    border-bottom: 1px solid var(--hw-line);
    display: flex;
    gap: 0.9rem;
    padding-block: 1rem;
}

.hw-journal-mini:first-of-type { padding-top: 0; }
.hw-journal-mini:last-of-type { border-bottom: 0; padding-bottom: 0; }

.hw-journal-mini__cover {
    flex: 0 0 72px;
}

.hw-journal-mini__cover img {
    box-shadow: 0 4px 14px rgba(20, 22, 26, 0.22);
    height: auto;
    width: 100%;
}

.hw-journal-mini__body { min-width: 0; }

.hw-journal-mini__abbr {
    color: var(--hw-accent);
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 0.2rem;
}

.hw-journal-mini h6 {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.4rem;
}

.hw-journal-mini h6 a { color: var(--hw-ink); text-decoration: none; }
.hw-journal-mini h6 a:hover { color: var(--hw-accent); }

.hw-journal-mini__editor {
    color: var(--hw-ink);
    font-size: 0.84rem;
    margin: 0 0 0.15rem;
}

.hw-journal-mini__role {
    color: var(--hw-ink-soft);
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hw-journal-mini__affiliation {
    color: var(--hw-ink-soft);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0 0 0.4rem;
}

.hw-journal-mini__oa {
    color: var(--hw-ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hw-journal-mini__oa i { color: var(--hw-accent); margin-right: 0.25rem; }

.hw-journal-showcase--compact .hw-journal-mini__cover { flex: 0 0 56px; }
.hw-journal-showcase--compact .hw-journal-mini h6 { font-size: 0.88rem; }
.hw-journal-showcase--compact .hw-journal-mini__affiliation { font-size: 0.76rem; }

/* --- Article photo gallery ------------------------------------------------- */

.hw-gallery { margin-bottom: 1.75rem; position: relative; }

.hw-gallery-slider {
    background: #10131a;
    overflow: hidden;
}

/* A fixed stage height with the picture fitted inside it. Portrait and
   landscape shots can then sit in the same slideshow without either being
   cropped and without the page jumping as the slides change. */
.hw-gallery__slide {
    align-items: center;
    display: flex;
    height: 560px;
    justify-content: center;
    margin: 0;
    position: relative;
}

.hw-gallery__slide img {
    display: block;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.hw-gallery__slide figcaption {
    background: linear-gradient(to top, rgba(12, 14, 18, 0.85), rgba(12, 14, 18, 0));
    bottom: 0;
    color: #fff;
    left: 0;
    padding: 2rem 1.25rem 0.9rem;
    position: absolute;
    right: 0;
}

/* Arrows.
   These carry the hero's classes, but the hero only reveals them on
   .hw-hero:hover, so inside a gallery they were never shown at all. */
.hw-gallery .hw-hero-nav { opacity: 0.75; }
.hw-gallery:hover .hw-hero-nav,
.hw-gallery .hw-hero-nav:focus-visible { opacity: 1; }

.hw-gallery .hw-hero-nav--prev { left: 0.5rem; }
.hw-gallery .hw-hero-nav--next { right: 0.5rem; }

@media (hover: none) {
    .hw-gallery .hw-hero-nav { opacity: 1; }
}

/* A single photo is fitted too, on the same dark stage. */
.hw-article__figure--fit {
    align-items: center;
    background: #10131a;
    display: flex;
    justify-content: center;
    max-height: 560px;
    overflow: hidden;
}

.hw-article__figure--fit img {
    aspect-ratio: auto;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    width: auto;
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .hw-gallery__slide { height: 440px; }
    .hw-article__figure--fit,
    .hw-article__figure--fit img { max-height: 440px; }
}

@media (max-width: 575.98px) {
    .hw-gallery__slide { height: 340px; }
    .hw-article__figure--fit,
    .hw-article__figure--fit img { max-height: 340px; }
}

.hw-article__figure figcaption {
    color: var(--hw-ink-soft);
    font-size: 0.84rem;
    line-height: 1.5;
    padding-top: 0.6rem;
}

.hw-gallery-dots { padding-top: 0.7rem; }

/* --- Rich text written in the dashboard ------------------------------------ */

.hw-article__body ul,
.hw-article__body ol { margin: 0 0 1.15rem 1.3rem; }

.hw-article__body li { margin-bottom: 0.35rem; }

.hw-article__body blockquote {
    border-left: 3px solid var(--hw-accent);
    color: var(--hw-ink);
    font-size: 1.1rem;
    font-style: italic;
    margin: 1.5rem 0;
    padding: 0.2rem 0 0.2rem 1.1rem;
}

.hw-article__body h4 {
    font-size: 1.08rem;
    font-weight: 700;
    margin: 1.6rem 0 0.6rem;
}

.hw-article__body hr {
    border: 0;
    border-top: 1px solid var(--hw-line);
    margin: 2rem 0;
}

/* The sizes the editor offers. Kept as classes rather than inline styles so
   the sanitiser can whitelist them, and so they scale on small screens. */
.hw-text-small  { font-size: 0.86em; }
.hw-text-large  { font-size: 1.2em; }
.hw-text-xlarge { font-size: 1.45em; }
.hw-text-center { display: block; text-align: center; }
.hw-text-right  { display: block; text-align: right; }