@layer app {
    .r1v-article {
        --r1v-article-ink: #203c32;
        --r1v-article-paper: #faf7ef;
        --r1v-article-green: #007c50;
        --r1v-article-muted: #647067;
        --r1v-article-line: #d9dfd6;
        background: var(--r1v-article-paper);
        color: var(--r1v-article-ink);
    }

    .r1v-article__header {
        padding: clamp(3rem, 4.5vw, 4.5rem) 1.375rem 0;
    }

    .r1v-article__header-inner {
        max-width: 65rem;
        margin-inline: auto;
    }

    .r1v-article__feature {
        max-width: 75rem;
    }

    .r1v-article__title,
    .r1v-article__content h2,
    .r1v-article__content h3 {
        color: var(--r1v-article-ink);
        font-family: Georgia, 'Times New Roman', serif;
    }

    .r1v-article__title {
        max-width: 60rem;
        margin: 0;
        font-size: clamp(2.7rem, 6.6vw, 5.125rem);
        font-weight: 400;
        line-height: 1.02;
        letter-spacing: -0.045em;
    }

    .r1v-article__deck {
        max-width: 51.25rem;
        margin: 1.5rem 0 0;
        color: var(--r1v-article-muted);
        font: 1.375rem/1.6 system-ui, sans-serif;
    }

    .r1v-article__meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
        margin-top: 1.5rem;
        color: var(--r1v-article-muted);
        font: 0.8125rem/1.6 system-ui, sans-serif;
    }

    .r1v-article__share { margin-top: 1.5rem; }
    .r1v-article__share-note { margin: 0.5rem 0 0; color: var(--r1v-article-muted); font: 0.8125rem/1.5 system-ui, sans-serif; }
    .r1v-article__breadcrumbs { margin-bottom: 1.5rem; font: 0.8125rem/1.5 system-ui, sans-serif; }
    .r1v-article__breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
    .r1v-article__breadcrumbs li { display: inline; }
    .r1v-article__breadcrumbs li + li::before { content: '›'; margin-right: 0.4rem; color: var(--r1v-article-muted); }
    .r1v-article__breadcrumbs a { color: var(--r1v-article-green); }
    .r1v-article__breadcrumbs [aria-current] { color: var(--r1v-article-muted); }
    @media (max-width: 360px) {
        .r1v-article .r1v-share[data-share-widget="legacy"] .r1v-share__actions { gap: 0.1875rem; }
        .r1v-article .r1v-share[data-share-widget="legacy"] .r1v-share__action { width: 2.5rem; min-width: 2.5rem; }
    }

    .r1v-article .r1v-article__feature {
        margin: clamp(1.5rem, 2.5vw, 2.5rem) auto 0 !important;
    }

    .r1v-article__feature img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 43.125rem;
        object-fit: cover;
    }

    .r1v-article__reading {
        width: min(100% - 2.75rem, 45.5rem);
        margin: 0 auto;
        padding: clamp(2rem, 5vw, 4rem) 0 5rem;
    }

    .r1v-article__content {
        font: 19px/1.8 Georgia, 'Times New Roman', serif;
    }

    .r1v-article__content.entry-content {
        max-width: none !important;
        width: 100%;
        margin: 0;
        font: 19px/1.8 Georgia, 'Times New Roman', serif !important;
    }

    .r1v-article__content .main-content {
        width: 100%;
        max-width: none;
        font: inherit;
    }

    .r1v-article__content .main-content > :first-child {
        margin-top: 0;
    }

    .r1v-article__content .main-content p,
    .r1v-article__content .main-content ul,
    .r1v-article__content .main-content ol,
    .r1v-article__content .main-content blockquote {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: inherit;
        line-height: inherit;
        margin: 0 0 1.5rem;
    }

    .r1v-article__content h2 {
        margin: 3.5rem 0 1.5rem;
        font-size: clamp(2rem, 4vw, 2.375rem);
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: -0.025em;
    }

    .r1v-article__content h3 {
        margin: 2.25rem 0 1rem;
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .r1v-article__content a,
    .r1v-article__toc a {
        color: var(--r1v-article-green);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
    }

    .r1v-article a:focus-visible,
    .r1v-article summary:focus-visible,
    .r1v-article button:focus-visible {
        outline: 3px solid #b95028;
        outline-offset: 4px;
    }

    .r1v-article--plain .r1v-article__content .main-content > figure,
    .r1v-article--plain .r1v-article__content .main-content > .wp-block-image,
    .r1v-article--plain .r1v-article__content .main-content > .wp-block-embed,
    .r1v-article--plain .r1v-article__content .main-content > .wp-block-gallery {
        width: min(calc(100% + 18rem), 68rem, calc(100vw - 2rem));
        max-width: none;
        /* WordPress's unlayered figure reset overrides layered margins.
           Position from the column center so that reset cannot leave only
           the negative translation applied. */
        position: relative;
        left: 50%;
        margin: 2.25rem 0;
        transform: translateX(-50%);
    }

    .r1v-article--plain .r1v-article__content .main-content > .alignfull,
    .r1v-article--plain .r1v-article__content .main-content > .alignwide {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        left: 0;
        transform: none;
    }

    .r1v-article--map .r1v-article__content figure,
    .r1v-article--map .r1v-article__content .wp-block-image,
    .r1v-article--map .r1v-article__content .wp-block-embed,
    .r1v-article--map .r1v-article__content .wp-block-gallery,
    .r1v-article__content figure figure {
        max-width: 100%;
    }

    .r1v-article--map .r1v-article__content .main-content > .alignfull,
    .r1v-article--map .r1v-article__content .main-content > .alignwide {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        transform: none;
    }

    .r1v-article__content img {
        max-width: 100%;
        height: auto;
    }

    .r1v-article__content .wp-block-image img {
        margin-inline: auto;
    }

    .r1v-article__content figcaption {
        margin-top: 0.625rem;
        color: var(--r1v-article-muted);
        font: 0.8125rem/1.6 system-ui, sans-serif;
    }

    .r1v-article__toc {
        margin: 0 0 2rem;
        border-block: 1px solid var(--r1v-article-line);
        color: var(--r1v-article-ink);
        font: 0.9375rem/1.7 system-ui, sans-serif;
    }

    .r1v-article__toc-title {
        margin: 0;
        padding: 1rem 0;
        color: var(--r1v-article-ink);
        font: inherit;
        font-weight: 700;
    }

    .r1v-article__toc-body {
        padding: 0 0 1rem;
    }

    .r1v-article__toc-body ul,
    .r1v-article__toc-body ol {
        margin: 0;
        padding-left: 1.25rem;
    }

    .r1v-article__toc-body li + li {
        margin-top: 0.4rem;
    }

    .r1v-article__after-content {
        margin-top: 3rem;
    }

    .r1v-article--map .r1v-article__map-layout {
        display: grid;
        min-width: 0;
    }

    .r1v-article--map .r1v-article__title {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }

    .r1v-article--map .r1v-article__map-content,
    .r1v-article--map .r1v-article__map-aside {
        min-width: 0;
    }

    .r1v-article--map .r1v-article__map-aside {
        display: none;
    }

    .r1v-article__map-follow,
    .r1v-article-map-dialog .r1v-btn {
        min-height: 44px;
        padding: .5rem .875rem;
        border-color: var(--color-rov-green);
        color: var(--color-rov-green);
        background: transparent;
        font-size: .875rem;
        font-weight: 500;
        line-height: 1.3;
    }

    .r1v-article__map-follow:hover,
    .r1v-article-map-dialog .r1v-btn:hover:not(:disabled) {
        background: color-mix(in srgb, var(--color-rov-green) 6%, #fff);
    }

    .r1v-article__map-follow {
        position: fixed;
        z-index: 1010;
        bottom: max(1rem, env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: .625rem;
        width: max-content;
        max-width: calc(100% - 2rem);
        border-radius: 999px;
        color: #343a36;
        border-color: rgb(255 255 255 / 95%);
        background: rgb(255 255 255 / 82%);
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px #0001;
        text-align: left;
    }

    .r1v-article__map-follow:hover {
        color: #262626;
        background: rgb(255 255 255 / 94%);
    }

    .r1v-article__map-follow > i { flex: 0 0 auto; }
    .r1v-article__map-follow > span { min-width: 0; }
    .r1v-article__map-current {
        display: block;
        font-size: inherit;
        font-weight: 400;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .r1v-article__map-follow[hidden] { display: none; }

    .r1v-article-map-dialog {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        height: 90vh;
        height: 90dvh;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: .875rem .875rem 0 0;
        background: #faf7ef;
        color: #262626;
        overflow: hidden;
    }

    .r1v-article-map-dialog[open] { display: flex; flex-direction: column; }
    .r1v-article-map-dialog::backdrop { background: #0006; }
    .r1v-article-map-dialog__header {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex: 0 0 auto;
        padding: .5rem .75rem .5rem 1rem;
        border-bottom: 1px solid #d9dfd6;
        max-height: 30dvh;
        overflow-y: auto;
    }
    .r1v-article-map-dialog__context { flex: 1; min-width: 0; }
    .r1v-article-map-dialog__header h2 {
        margin: 0;
        font-family: inherit;
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .r1v-article-map-dialog__details {
        margin: .25rem 0 0;
        font-size: .75rem;
        line-height: 1.4;
        color: #565c58;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .r1v-article-map-dialog__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: .375rem;
        background: transparent;
        color: #262626;
        font-size: 1.375rem;
        cursor: pointer;
    }
    .r1v-article-map-dialog__close:hover { background: #0001; }
    .r1v-article-map-dialog__canvas { flex: 1; min-height: 0; }
    .r1v-article-map-dialog #mobile-location-map { width: 100%; height: 100%; }
    .r1v-article-map-dialog__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        flex: 0 0 auto;
        padding: .5rem 1rem max(.5rem, env(safe-area-inset-bottom));
        border-top: 1px solid #d9dfd6;
    }
    .r1v-article-map-dialog__navigation { display: flex; align-items: center; gap: .375rem; }
    .r1v-article-map-dialog__navigation .r1v-btn { width: 44px; padding: 0; }
    .r1v-article-map-dialog__navigation .r1v-btn:disabled {
        opacity: .3;
        cursor: default;
        background: transparent;
    }
    .r1v-article-map-dialog__position {
        min-width: 2.5rem;
        text-align: center;
        font-size: .8125rem;
        font-variant-numeric: tabular-nums;
    }
    .r1v-article-map-dialog__directions[hidden],
    .r1v-article-map-dialog__details[hidden] { display: none; }
    .r1v-article__map-follow:focus-visible,
    .r1v-article-map-dialog :is(button, a):focus-visible {
        outline: 2px solid var(--color-rov-green);
        outline-offset: 2px;
    }

    .r1v-article__map-follow:focus-visible {
        outline-color: #565c58;
    }

    /* The legacy block ships editor-like dashed cards as unlayered front-end
       CSS. Keep its data/markup, but make stops part of the reading flow. */
    .r1v-article .roadtrip-place {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding-inline: 0 !important;
    }

    .r1v-article .roadtrip-place-location {
        background: #edf2e9 !important;
        border-left-color: var(--r1v-article-green) !important;
    }

    .r1v-article .roadtrip-place-location a {
        color: var(--r1v-article-green) !important;
    }

    /* single-map-aside.js chooses desktop only above 768px. Keep CSS on the
       same boundary so exactly 768px never hides the map JS initialized. */
    @media (min-width: 769px) {
        .r1v-article--map .r1v-article__map-layout {
            grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
        }

        .r1v-article--map .r1v-article__map-aside {
            display: block;
        }

        .r1v-article--map .r1v-article__map-sticky {
            position: sticky;
            top: 0;
            height: 100vh;
            height: 100dvh;
        }

        .r1v-article--map #location-map {
            width: 100%;
            height: 100%;
        }

        .r1v-article--route .r1v-article__map-content--route {
            position: relative;
            height: 100vh;
            height: 100dvh;
            overflow-y: auto;
        }
    }

    @media (max-width: 768px) {
        .r1v-article__header {
            padding: 2.5rem 1rem 0;
        }

        .r1v-article__reading {
            width: min(100% - 2rem, 45.5rem);
            padding-bottom: 3.5rem;
        }

        .r1v-article__content.entry-content {
            font-size: 18px !important;
            line-height: 1.75 !important;
        }

        .r1v-article__content h2 {
            margin-top: 3rem;
            font-size: 1.9375rem;
        }

        .r1v-article__deck {
            font-size: 1.1875rem;
            line-height: 1.55;
        }

        .r1v-article--plain .r1v-article__content .main-content > figure,
        .r1v-article--plain .r1v-article__content .main-content > .wp-block-image,
        .r1v-article--plain .r1v-article__content .main-content > .wp-block-embed,
        .r1v-article--plain .r1v-article__content .main-content > .wp-block-gallery {
            width: 100%;
            margin-inline: 0;
            left: 0;
            transform: none;
        }

        /* Gutenberg's resized Image block can persist width:auto plus a fixed
           height inline. On narrow readers that restores its intrinsic width
           and pushes the document sideways. Keep its desktop crop intact, but
           make the stored block fluid on phones. */
        .r1v-article__content .wp-block-image.is-resized,
        .r1v-article__content figure.is-resized {
            max-width: 100%;
        }

        .r1v-article__content .wp-block-image.is-resized img,
        .r1v-article__content figure.is-resized img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
        }
    }
}