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

    html {
        color-scheme: light;
        scroll-behavior: smooth;
        text-size-adjust: 100%;
    }

    body {
        min-block-size: 100vh;
        margin: 0;
        background: var(--color-canvas);
        color: var(--color-text-primary);
        font-family: var(--font-body);
        font-size: var(--text-body);
        font-weight: var(--weight-body-regular);
        line-height: var(--leading-body);
        text-rendering: optimizeLegibility;
    }

    main {
        display: block;
    }

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

    h1,
    h2,
    h3,
    h4,
    .jh-type-h1,
    .jh-type-h2,
    .jh-type-h3,
    .jh-type-h4 {
        margin-block: 0;
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-weight: var(--weight-display-semibold);
    }

    h3,
    h4,
    .jh-type-h3,
    .jh-type-h4 {
        font-weight: var(--weight-display-medium);
    }

    h1,
    .jh-type-h1 {
        font-size: var(--text-h1);
        font-weight: var(--weight-display-extrabold);
        letter-spacing: var(--tracking-h1);
        line-height: var(--leading-h1);
    }

    h2,
    .jh-type-h2 {
        font-size: var(--text-h2);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    h3,
    .jh-type-h3 {
        font-size: var(--text-h3);
        letter-spacing: var(--tracking-h3);
        line-height: var(--leading-h3);
    }

    h4,
    .jh-type-h4 {
        font-size: var(--text-h4);
        letter-spacing: var(--tracking-h4);
        line-height: var(--leading-h4);
    }

    .jh-type-display {
        margin-block: 0;
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-size: var(--text-display);
        font-weight: var(--weight-display-extrabold);
        letter-spacing: var(--tracking-display);
        line-height: var(--leading-display);
    }

    .jh-type-body-large {
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    .jh-type-body-small,
    small {
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-type-metric-large,
    .jh-type-metric {
        margin-block: 0;
        color: var(--color-text-primary);
        font-family: var(--font-analytical);
        font-variant-numeric: tabular-nums;
    }

    .jh-type-metric-large {
        font-size: var(--text-metric-large);
        font-weight: var(--weight-analytical-black);
        letter-spacing: var(--tracking-metric-large);
        line-height: var(--leading-metric-large);
    }

    .jh-type-metric {
        font-size: var(--text-metric);
        font-weight: var(--weight-analytical-bold);
        letter-spacing: var(--tracking-metric);
        line-height: var(--leading-metric);
    }

    .jh-metadata,
    .jh-label {
        font-size: var(--text-min);
    }

    .jh-metadata {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-metadata);
        line-height: var(--leading-metadata);
    }

    .jh-label {
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    p {
        max-inline-size: 68ch;
        margin-block: 0 1em;
    }

    ul,
    ol {
        margin-block: 0 1em;
        padding-inline-start: 1.5em;
    }

    li + li {
        margin-block-start: var(--space-2);
    }

    dl {
        margin-block: 0 1em;
    }

    dt {
        font-weight: var(--weight-body-semibold);
    }

    dd {
        margin-inline-start: 0;
    }

    dd + dt {
        margin-block-start: var(--space-4);
    }

    table {
        inline-size: 100%;
        border-collapse: collapse;
        font-variant-numeric: tabular-nums;
    }

    th,
    td {
        padding: var(--space-3) var(--space-4);
        border-block-end: var(--border-w) solid var(--color-border);
        text-align: start;
        vertical-align: top;
    }

    th {
        font-weight: var(--weight-body-semibold);
    }

    figure {
        margin: 0;
    }

    figcaption {
        margin-block-start: var(--space-3);
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    a {
        color: var(--color-action-secondary);
        text-decoration-line: underline;
        text-decoration-thickness: var(--border-w);
        text-underline-offset: 3px;
    }

    a:hover {
        text-decoration-thickness: var(--rule-w);
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: var(--focus-w) solid var(--color-focus);
        outline-offset: 3px;
    }

    code,
    kbd,
    samp {
        font-family: var(--font-mono);
        font-size: max(0.9em, var(--text-min));
    }

    code {
        padding: 0.1em 0.25em;
        border: var(--border-w) solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface-subtle);
    }

    kbd {
        padding: 0.15em 0.35em;
        border: var(--border-w) solid var(--color-border-strong);
        border-block-end-width: var(--rule-w);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        font-weight: var(--weight-body-semibold);
    }

    img,
    picture,
    svg {
        display: block;
        max-inline-size: 100%;
    }

    :target {
        scroll-margin-block-start: var(--space-8);
    }

    [hidden] {
        display: none !important;
    }

    .skip-link {
        position: fixed;
        z-index: 100;
        inset-block-start: var(--space-2);
        inset-inline-start: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border: var(--rule-w) solid var(--color-focus-inverse);
        border-radius: var(--radius-sm);
        background: var(--color-surface-inverse);
        color: var(--color-text-inverse);
        font-weight: var(--weight-body-semibold);
        transform: translateY(calc(-100% - var(--space-4)));
    }

    .skip-link:focus-visible {
        outline-color: var(--color-focus-inverse);
        transform: translateY(0);
    }

    .visually-hidden {
        position: absolute !important;
        inline-size: 1px !important;
        block-size: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Responsive layout primitives. */
    .jh-shell {
        inline-size: min(
            100%,
            calc(var(--shell-max) + var(--gutter) + var(--gutter))
        );
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .jh-prose {
        inline-size: 100%;
        max-inline-size: min(var(--prose-max), 68ch);
        margin-inline: auto;
    }

    .jh-section {
        padding-block: var(--section-space);
    }

    .jh-section--subsection {
        padding-block: var(--subsection-space);
    }

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

    .jh-stack {
        display: flex;
        flex-direction: column;
        gap: var(--stack-space, var(--space-5));
    }

    .jh-scroller {
        max-inline-size: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    /* Public shell. */
    .jh-site-header {
        position: relative;
        z-index: 20;
        min-block-size: var(--header-height);
        border-block-end: var(--border-w) solid var(--color-border);
        background: var(--color-surface);
    }

    .jh-site-header__inner {
        position: relative;
        display: flex;
        min-block-size: var(--header-height);
        align-items: center;
        gap: var(--space-3);
    }

    /* Approved Jurhen wordmark (vector, navy variant on the light header surface).
       The box reserves the intrinsic aspect ratio so the mark never shifts layout. */
    .jh-wordmark {
        display: block;
        flex: 0 1 var(--brand-wordmark-header);
        inline-size: var(--brand-wordmark-header);
        min-inline-size: 5.5rem;
        aspect-ratio: var(--brand-wordmark-ratio);
        color: var(--color-text-primary);
        text-decoration: none;
        transition: opacity var(--motion-fast) var(--ease-standard);
    }

    .jh-wordmark__image {
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: var(--brand-wordmark-ratio);
    }

    .jh-wordmark:hover {
        opacity: 0.82;
    }

    .jh-site-header nav {
        margin-inline-start: auto;
    }

    .jh-primary-navigation {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    html:not(.js) .jh-site-header__inner {
        flex-wrap: wrap;
        align-items: flex-start;
        padding-block: var(--space-3);
    }

    /* The enhanced class is set before first paint; until nav.js has applied
       the initial closed state, controlled panels stay out of the render so the
       header is painted once, at its final height. */
    .js .jh-site-header:not([data-nav-ready]) .jh-primary-nav__panel,
    .js .jh-site-header:not([data-nav-ready]) .jh-nav__submenu {
        display: none;
    }

    html:not(.js) .jh-site-header nav {
        inline-size: 100%;
        margin-inline-start: 0;
    }

    html:not(.js) .jh-primary-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    html:not(.js) .jh-primary-nav__panel {
        position: static;
        padding: 0;
        border: 0;
    }

    .jh-menu-toggle,
    .jh-nav__disclosure {
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--color-text-primary);
        cursor: pointer;
        font-weight: var(--weight-body-semibold);
        transition:
            background-color var(--motion-fast) var(--ease-standard),
            color var(--motion-fast) var(--ease-standard);
    }

    .jh-menu-toggle {
        display: none;
        min-block-size: 2.5rem;
        padding-inline: var(--space-3);
    }

    .js .jh-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .jh-primary-nav__panel {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        padding: var(--space-4) var(--gutter) var(--space-5);
        border-block-end: var(--border-w) solid var(--color-border);
        background: var(--color-surface);
    }

    .jh-primary-nav__list,
    .jh-nav__submenu,
    .jh-locale__list,
    .jh-footer__links {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-primary-nav__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .jh-primary-nav__list li + li,
    .jh-nav__submenu li + li,
    .jh-locale__list li + li,
    .jh-footer__links li + li {
        margin-block-start: 0;
    }

    .jh-nav__item--group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .jh-nav__disclosure,
    .jh-nav__link {
        position: relative;
        display: inline-flex;
        min-block-size: 2.75rem;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        color: var(--color-text-primary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
        letter-spacing: 0.01em;
        text-decoration: none;
        transition:
            background-color var(--motion-fast) var(--ease-standard),
            color var(--motion-fast) var(--ease-standard);
    }

    .jh-nav__disclosure:hover,
    .jh-nav__link:hover {
        background: var(--color-surface-subtle);
        text-decoration: underline;
        text-decoration-thickness: var(--rule-w);
        text-underline-offset: 4px;
    }

    .jh-nav__disclosure.is-current-section:hover,
    .jh-nav__link:not(.jh-button)[aria-current="page"]:hover {
        background: var(--color-surface);
    }

    .jh-nav__link:not(.jh-button)[aria-current="page"] {
        font-weight: var(--weight-body-semibold);
    }

    .jh-nav__disclosure.is-current-section {
        font-weight: var(--weight-body-semibold);
    }

    .jh-nav__link:not(.jh-button)[aria-current="page"]::after {
        position: absolute;
        inset-inline: var(--space-3);
        inset-block-end: 0;
        block-size: var(--rule-w);
        background: var(--color-accent-primary);
        content: "";
    }

    .jh-nav__disclosure.is-current-section::after {
        position: absolute;
        inset-inline: var(--space-3);
        inset-block-end: 0;
        block-size: var(--rule-w);
        background: var(--color-accent-primary);
        content: "";
    }

    .jh-nav__indicator {
        inline-size: 0.45rem;
        block-size: 0.45rem;
        border-inline-end: var(--border-w) solid currentColor;
        border-block-end: var(--border-w) solid currentColor;
        transform: rotate(45deg) translateY(-0.15rem);
    }

    .jh-nav__disclosure[aria-expanded="true"] .jh-nav__indicator {
        transform: rotate(225deg) translate(-0.1rem, -0.1rem);
    }

    .jh-nav__submenu {
        display: flex;
        flex-direction: column;
        padding-inline-start: var(--space-3);
    }

    /* Geography submenu (owner review 2026-09-12): country -> markets, so a
       recurring reader reaches a city without the Markets landing page. */
    .jh-nav__geography,
    .jh-nav__markets {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-nav__geography {
        display: grid;
        gap: var(--space-2);
    }

    .jh-nav__geography li + li,
    .jh-nav__markets li + li {
        margin-block-start: 0;
    }

    .jh-nav__link--country {
        font-weight: var(--weight-body-semibold);
    }

    .jh-nav__markets {
        padding-inline-start: var(--space-3);
    }

    .jh-nav__markets .jh-nav__link {
        min-block-size: 2.25rem;
        padding-block: var(--space-1);
    }

    .jh-nav__link--static {
        color: var(--color-text-secondary);
        cursor: default;
    }

    .jh-nav__link--static:hover {
        background: transparent;
        text-decoration: none;
    }

    /* A coming-soon market keeps its name on one line; the label sits beneath. */
    .jh-nav__market--soon .jh-nav__link--static {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        white-space: nowrap;
    }

    .jh-nav__soon {
        color: var(--color-text-tertiary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        line-height: var(--leading-label);
    }

    .jh-primary-nav__action {
        white-space: nowrap;
    }

    .jh-primary-nav__action .jh-button {
        position: relative;
        min-block-size: 2.25rem;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-body-small);
    }

    .jh-primary-nav__action .jh-button[aria-current="page"]::after {
        position: absolute;
        inset-inline: var(--space-3);
        inset-block-end: var(--space-1);
        block-size: var(--rule-w);
        background: var(--color-accent-primary);
        content: "";
    }

    .jh-locale__list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        padding-inline-start: var(--space-3);
    }

    .jh-locale__link {
        display: inline-flex;
        min-block-size: 2.25rem;
        align-items: center;
        padding-inline: var(--space-2);
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
    }

    .jh-locale__link[aria-current="page"] {
        border-inline-start: var(--rule-w) solid var(--color-accent-primary);
        color: var(--color-text-primary);
        font-weight: var(--weight-body-semibold);
    }

    .jh-site-main {
        min-block-size: 45vh;
    }

    .jh-site-main > :first-child {
        padding-block: var(--section-space);
    }

    .jh-site-footer {
        border-block-start: var(--rule-w) solid var(--color-accent-primary);
        background: var(--gradient-inverse-surface);
        color: var(--color-text-primary);
    }

    .jh-site-footer__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-7);
        padding-block: var(--space-8);
    }

    /* Approved Jurhen wordmark (vector, light variant on the inverse footer).
       The negative start margin aligns the visible glyphs with the column edge. */
    .jh-site-footer__wordmark {
        display: block;
        inline-size: var(--brand-wordmark-footer);
        max-inline-size: 100%;
        aspect-ratio: var(--brand-wordmark-ratio);
        margin-inline-start: calc(var(--brand-wordmark-footer) * -0.139);
        margin-block-end: var(--space-3);
    }

    .jh-site-footer__wordmark img {
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: var(--brand-wordmark-ratio);
    }

    .jh-site-footer__descriptor {
        min-block-size: calc(var(--space-5) * 2);
        border-block-start: var(--border-w) solid var(--color-accent-primary);
    }

    .jh-footer__sitemap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .jh-footer__group-title a {
        color: inherit;
        text-decoration: none;
    }

    .jh-footer__group-title a:hover,
    .jh-footer__group-title a:focus-visible {
        text-decoration: underline;
    }

    .jh-footer__group-title {
        margin-block-end: var(--space-3);
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-footer__links {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .jh-footer__links a,
    .jh-footer__methodology {
        color: var(--color-text-primary);
        font-size: var(--text-body-small);
    }

    .jh-footer__links a[aria-current="page"],
    .jh-footer__methodology[aria-current="page"] {
        padding-inline-start: var(--space-2);
        border-inline-start: var(--rule-w) solid var(--color-accent-primary);
        font-weight: var(--weight-body-semibold);
    }

    .jh-footer__meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
    }

    .jh-footer__locales {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-footer__locales li + li {
        margin-block-start: 0;
    }

    .jh-footer__locale {
        display: inline-flex;
        min-block-size: 2.25rem;
        align-items: center;
        padding-inline: var(--space-2);
        border-inline-start: var(--rule-w) solid transparent;
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
    }

    .jh-footer__locale[aria-current="page"] {
        border-inline-start-color: var(--color-accent-primary);
        color: var(--color-text-primary);
        font-weight: var(--weight-body-semibold);
    }

    @media (min-width: 30rem) {
        .jh-footer__sitemap {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 48rem) {
        .jh-grid {
            grid-template-columns: repeat(8, minmax(0, 1fr));
        }

        .jh-footer__sitemap {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 64rem) {
        .jh-grid {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }

        .jh-wordmark {
            flex-basis: var(--brand-wordmark-header);
            inline-size: var(--brand-wordmark-header);
        }

        html:not(.js) .jh-site-header__inner {
            flex-wrap: nowrap;
            align-items: center;
            padding-block: 0;
        }

        html:not(.js) .jh-site-header nav {
            inline-size: auto;
            margin-inline-start: auto;
        }

        html:not(.js) .jh-primary-navigation {
            flex-direction: row;
            align-items: center;
        }

        .js .jh-menu-toggle {
            display: none;
        }

        .jh-primary-navigation {
            gap: var(--space-4);
        }

        .jh-primary-nav__panel {
            position: static;
            padding: 0;
            border: 0;
            background: transparent;
        }

        .js .jh-site-header:not([data-nav-ready]) .jh-primary-nav__panel {
            display: block;
        }

        .jh-primary-nav__list {
            flex-direction: row;
            align-items: center;
            gap: var(--space-1);
        }

        .jh-nav__item--group {
            position: relative;
            flex-direction: row;
            align-items: center;
            gap: var(--space-1);
        }

        .jh-nav__disclosure,
        .jh-nav__link {
            min-block-size: 2.5rem;
            padding-inline: var(--space-3);
        }

        .js .jh-nav__submenu {
            position: absolute;
            z-index: 30;
            inset-block-start: calc(100% + var(--space-2));
            inset-inline-start: 0;
            min-inline-size: 11rem;
            padding: var(--space-2);
            border: var(--border-w) solid var(--color-border);
            border-radius: var(--radius-md);
            background: var(--color-surface);
        }

        .jh-nav__submenu .jh-nav__link {
            display: flex;
            inline-size: 100%;
        }

        /* The geography panel is centred on its item and lays countries out as
           columns; it never exceeds the viewport. */
        .js .jh-nav__submenu--geography {
            inset-inline-start: 50%;
            inline-size: min(52rem, calc(100vw - 2 * var(--gutter)));
            padding: var(--space-4);
            translate: -50% 0;
        }

        .jh-nav__submenu--geography .jh-nav__link--all {
            margin-block-end: var(--space-3);
            padding-block-end: var(--space-3);
            border-block-end: var(--border-w) solid var(--color-border);
            border-radius: 0;
        }

        .jh-nav__geography {
            grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
            gap: var(--space-3) var(--space-5);
        }

        .jh-nav__markets {
            padding-inline-start: 0;
        }

        .jh-nav__markets .jh-nav__link {
            padding-inline: var(--space-3);
        }

        .jh-primary-nav__action .jh-button {
            min-block-size: 2.5rem;
            padding-inline: var(--space-4);
        }

        .jh-locale__list {
            padding-inline-start: 0;
        }

        .jh-site-footer__grid {
            grid-template-columns: minmax(10rem, 1fr) minmax(24rem, 3fr);
            gap: var(--space-8);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-delay: 0s !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            transition-delay: 0s !important;
        }
    }
}